Creating TextInputs in a single row in React Native: A step-by-step guide

I'm having trouble creating 3 TextInputs in a single row. Despite setting flexDirection to 'row', the text inputs are not appearing on the device.

var SampleApp = React.createClass({
render: function() {
return (
  <View style={styles.container}>
    <View style={styles.textInputWrapper}>
      <TextInput style={styles.textInput}
      placeholder='Month'
      placeholderTextColor="#d3d3d3"
      />
    </View>
    <View style={styles.textInputWrapper}>
      <TextInput style={styles.textInput}
      placeholder='Day'
      placeholderTextColor="#d3d3d3"
      />
    </View>
    <View style={styles.textInputWrapper}>
      <TextInput style={styles.textInput}
      placeholder='Year'
      placeholderTextColor="#d3d3d3"
      />
    </View>
  </View>
  );
  }
 });

var styles = StyleSheet.create({
 container: {
 flex: 1,
 flexDirection: 'row'
}
});

Answer №1

To properly style every component, it is essential to add specific styles for each one. I hope this information proves helpful.

 var customStyles = StyleSheet.create({
 container: {
    flex: 1,
    flexDirection: 'column'
 },
 inputWrapper: {
     flex: 1,
     height: 60,
     borderColor: 'blue',
     borderWidth: 1,
 },
 inputField:{
  flex: 1
 }

});

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

What is the most effective method for populating data within a browser window?

I have a list of files stored in $scope.data that I retrieved from the searchFactory. Now, my goal is to display these files in the browser window. How can I accomplish this task? ctrl.js $scope.displayFiles = function (){ $window.open($scope.dat ...

Using JWPlayer 6 and JWPlayer 7 simultaneously in one project - how is it done?

Trying to incorporate both JWPlayer 6 and JWPlayer 7 into my expressJS, AngularJS project has been a challenge. While they each work independently without issue, bringing them together has proven to be tricky. In my index.html file, I include them separat ...

divide a single item into several items depending on its attribute

data = {1-inputWidth : '30px' , 1-inputHeight: '30px', 1-color : 'red', 2-inputWidth : '20px' , 2-inputHeight: '10px', 2-color : 'blue', 3-inputWidth : '60px' , 3-inputHe ...

Creating a Mongoose schema to store an array of objects, where updates will automatically add new objects

const mongoose = require('mongoose'); module.exports = mongoose.model('GridModel', { Request_Id : { type : Number, required : true }, viewStudents : { type : Array , default : [] } }); The mongoose model above needs to b ...

Error in retrieving information from the worldweatheronline API

I have been attempting to retrieve weather information from 'worldweatheronline' by making an $http call in an angular factory: this.testApi = function(coords) { var deferred = $q.defer(); $http.jsonp(API_ROOTS + '?key=9834 ...

Utilize the Material UI SelectField component as a reference for handling onChange events

I'm facing a challenge with my form that contains over 15 SelectField components. I want to avoid creating multiple change handler functions, but I can't figure out how to identify the specific select field that triggered the change event in orde ...

How to Retrieve LineCount of Android Edittext in onCreate() Method of an Activity

Is there a way to determine the line count of an EditText in the onCreate() method of an activity, after changing the text of the EditText? Here is an example code snippet: @Override public void onCreate(Bundle savedInstanceState){ myEditT ...

Variables in a for loop can be given unique and descriptive names

I am exploring the world of JS and HTML as a newcomer. I recently discovered that variables can be dynamically named in code. Excited to try it out, I implemented some basic variable naming code. However, to my disappointment, nothing is being displayed on ...

Angular Weather API for Yahoo

I am encountering an issue with the Yahoo Weather API. What is the best approach to send a request for data using the Yahoo Weather API? import { Injectable } from '@angular/core'; import {Observable} from 'rxjs'; import {HttpClient} f ...

Encountering a dependency tree error while attempting to install generic-ui with npm

While attempting to add generic-ui to my Angular project using the command: npm i @generic-ui/ngx-grid @generic-ui/fabric @generic-ui/hermes I encountered the following error : $ npm i @generic-ui/ngx-grid @generic-ui/fabric @generic-ui/hermes npm ERR! co ...

Steps for creating a two-dimensional arc

I want to input some pre-determined acr values from another program and replicate them in three.js Currently, I'm using code I found on this site to draw the arc, although it might not be the most optimal solution. function DRAWarc(){ ...

Processing hover attributes in Tailwind-styled-components

I'm currently working on a website that features a dark mode, and I want to utilize the dark prop in tailwind-styled-components. The props work fine in all instances except for actions like hover, active, focus, etc. When attempting to use hover and t ...

The method this.$refs.myProperty.refresh cannot be invoked as it is not a valid

I have added a reference value 'callingTable' to a vue-data-table (using vuetify) like so: <v-data-table :headers="callingTableHeaders" :items="getCallingDetails" class="elevation-1" ref="callingTable&quo ...

Using Node.js and React to dynamically render a different HTML file in response to a request

We are currently working on implementing AMP pages for our project. Our current solution involves detecting a query in the URL, such as: myurl.com?amp=1, and completely redrawing the page with the necessary markup. However, our server is set up to choose ...

Encountering an issue with a MEAN application using Angular 2: The error message states "Cannot read property

As a first-time application developer, I am working on creating a system to manage Client profiles. Utilizing the Angular tour of heroes for the basic structure, I integrated mongodb and express components sourced from various online platforms. However, I ...

What is the best way to save geolocation coordinates in a Javascript array?

I am attempting to utilize HTML5 geolocation to determine a user's location and then store the latitude and longitude coordinates in an array for future use with Google Maps and SQL statements. However, when I attempt to add these coordinates to the a ...

What steps can I take to resolve the error message "unable to establish a chain to self-signed root for signer"?

It's truly remarkable to see the sheer number of individuals who have shared questions regarding this common issue. I have thoroughly read through them here and on Apple's developer forum, and I have gone through the process of downloading, inst ...

What is the best way to show a <div> element when the ID is present in the URL?

I am in need of a solution to display specific content on the document based on the presence of a particular ID in the URL. In the current process, users go through a series of security checks and receive a cookie at the end to avoid repeating the check fo ...

Enhance your JSON formatting with dynamic fields

I am currently working on creating a form with dynamic fields in order to generate a JSON format for posting. The challenge lies in the structure of the JSON, particularly with the "envname" and "value" fields which need to be dynamically added based on us ...

Utilizing Typescript for parsing large JSON files

I have encountered an issue while trying to parse/process a large 25 MB JSON file using Typescript. It seems that the code I have written is taking too long (and sometimes even timing out). I am not sure why this is happening or if there is a more efficien ...