React Native: Enhance the background with a vibrant stripe of color

I am trying to incorporate a strip of grey in the middle of my white background, but I am encountering an issue where I am unable to input any text inside it. Below is the code snippet I am working with: 

  container: { flex: 1, justifyContent: "center", marginTop: 12, flexDirection: "column", }, upperContainer: { flex: 1, backgroundColor: "#fff", }, lowerContainer: { flex: 1, top: 1400, backgroundColor: "#F7F7F7", }

      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }}>
        <View style={styles.container}>
          <View style={styles.upperContainer}>
...
          <View style={styles.lowerContainer}>
...
javascriptcssreactjsreact-nativebackground-color

Answer №1

Not quite sure what the goal is with the ScrollView, but here's a method to achieve it on a static background:

<View style={{ flex: 1, backgroundColor: '#fff', justifyContent: 'center' }}>
  <View style={{ backgroundColor: '#bbb', width: '100%', paddingVertical: 12 }}>
    <Text style={{ textAlign: 'center' }}>
      Gray Stripe Text
    </Text>
  </View>
</View >

The important aspects are:

  • Using flex: 1 and justifyContent: 'center' in the outer View
  • Nesting elements for containment

You could potentially eliminate the inner View and apply the gray background color directly to the Text element.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Execute PHP script through jQuery request within the context of a Wordpress environment

I want to replicate a specific functionality in WordPress. In this functionality, jQuery calls a PHP file that queries a MySQL table and returns the result encapsulated within an HTML tag. How can I achieve this? <html> <head> <script ...

javascriptphpjqueryhtmlwordpress

Tips for resuming a video playback in HTML5 after pausing it for a brief moment

I am working with a video called introVid, and my goal is for it to pause for 2 seconds when it reaches the 1 second mark before resuming playback. Although I've attempted to achieve this using the code below, the video remains in a paused state after ...

javascriptjqueryhtmlvideohtml5-video

Neglecting to automatically align text

My goal is to automatically align text based on the language, so that Arabic text starts from the right and English text starts from the left. After some online research, I discovered that I need to use dir="auto" in the tag and text-align: auto; in the CS ...

javascriptcssreactjstext-alignment

Combine two sets of JavaScript objects based on their positions using Underscore.js

Data Set 1: {id: "01", name: "John Doe", age: "25", city: "New York", country: "USA"} Data Set 2: [{key:'id', value:'01'},{key:'name', value:'John Doe'},{key:'age', value:'25'},{key:'city& ...

javascriptunderscore.js

Using relative positioning in CSS causes the div to move to a new line

Feel free to check out this demo I've created for reference: http://jsfiddle.net/jcb9xm44/ In a nutshell, the scenario involves two inline-block divs nested within a parent div: <div class="outer"> <div class="inner1"> Y & ...

htmlcss

Steps to invoke a function in a PHP file from an external JavaScript file

Can anyone assist me with calling the function below in my PHP file? function update_hidden_input(saved_tokens, hidden_input) { var token_values = $.map(saved_tokens, function (el) { //alert(el[settings.tokenValue]); return el[ ...

phpjavascriptjqueryfacebook

I am curious if there exists a VSCode plugin or IDE that has the ability to show the dependencies of TypeScript functions or provide a visual representation

Are there any VSCode plugins or IDEs available that can display the dependency of TypeScript functions or show a call stack view? I am looking for a way to visualize the call stack view of TypeScript functions. Is there a tool that can help with this? Fo ...

javascripttypescriptvisual-studio-codeidewebstorm

Leveraging clusters in Node.js for REST API deployment

Within my node.js application, I have a REST API that contains complex logic with extensive looping, taking over 7 seconds to complete. As the loop count may increase in the future, the processing time is bound to increase as well. To optimize performance ...

javascriptnode.jsexpresscluster-computing

The React Nested Loop Query: Maximizing Efficiency in Data

Learning React has been a challenge for me, especially when comparing it to XML/XPath. In this scenario, I have two arrays simplified with basic string properties... customerList: Customer[] export class Customer { id: string = ""; firstnam ...

reactjstypescript

Having trouble with json_decode in PHP? Learn how to effectively retrieve JSON data in PHP

My attempt to update content using Angular on the front-end and PHP on the server side is encountering some issues. Below is the code snippet being used: In the main js file, a call for update: updateinscription: function($params) { var urlphp = "ht ...

javascriptphpjsonangularjs

Utilizing Node.js and Eclipse to Transfer MongoDB Data to Browser

I am working on a project where I need to display data fetched from MongoDB using Node.js in a web browser. The data is stored in the 'docs' object and I want to pass it to an EJS file so that I can insert it into a table: var express = require( ...

javascripteclipsenode.jsmongodbejs

GHCJS: A guide on integrating a JavaScript library designed for npm in your project

Currently, I am using ghcjs-0.2.0.9006030_ghc-7.10.3 along with stack lts-6.30 for developing a frontend application. Following the suggestions in this particular blog post, I decided to utilize react-flux and material-ui. To do this, I inserted React&apos ...

reactjshaskellnpmmaterial-designghcjs

Incorporate Vimeo video with full-width display

When embedding a Vimeo video on my website, I use the following code: <div class="fys-fp-content-wrapper"> <div id="fys-fp-video"> </div> </div> #fys-fp-video { position: relative; padding-bottom: 56.25%; padding-top: ...

htmlcssvideovimeo

What is the best way to center text vertically within an image?

How can I vertically align a blog entry title on an entry thumbnail image? The image size changes with the window size and the title varies in length for each entry. After finding a website that successfully achieved this effect, I tried replicating it us ...

htmlcss

An error has been detected by Internet Explorer 8 at line number 373402504

Internet Explorer 8 is throwing an error message that seems to be from a different galaxy ("Expected identifier, string or number") at a line number that makes no sense. Surprisingly, the code functions perfectly on FireFox. Checking the source code, I se ...

javascriptinternet-explorer-8

A guide to eliminating TextRow and inserting a string into JSON using NodeJs

To remove TextRow and add the string true to JSON in NodeJs, I have included the following code: NodeJs Code: function groupBy(objectArray, property) { return objectArray.reduce(function (acc, obj) { let key = obj[property] if (!acc[key]) { ...

javascriptnode.jsarraysjson

Identifying when a browser is closed with multiple tabs open in Internet Explorer

I need to detect when a browser tab is closed in order to trigger a Struts action. I have successfully implemented this for a single tab using the following JavaScript code: <script type="text/javascript> function loadOut() { if ((window.event.c ...

javajavascriptjqueryajaxstruts

"Utilizing jQuery to Send POST Requests on Rails - Dealing

Currently, I am running a JavaScript game from file:// and attempting to send a post request to a localhost Rails server in order to add a new high score. In my JavaScript: highScoresEntryView.keyHandlers = function() { var that = this; this.pa ...

javascriptjqueryruby-on-railsajax

How can I effectively display personalized information from an MSAccess database on a WordPress website?

I am seeking advice from experienced Wordpress developers. My organization possesses an internal MS Access database that comprises various tables, reports, and input forms. The structure of the database is relatively straightforward, encompassing informati ...

javascriptwordpressms-accessinternet-exploreractivex

Is there a way to initiate a jquery function upon loading the page, while ensuring its continued user interaction?

On my webpage, there is a JavaScript function using jQuery that I want to automatically start when the page loads. At the same time, I want to ensure that users can still interact with this function. This particular function involves selecting a link tha ...

javascriptjqueryhtmlcss