How to align text input correctly in react native?

javascript ios reactjs react-native
Vikramaditya picture Vikramaditya · Apr 10, 2015 · Viewed 98.3k times · Source

The Text input is center aligned, how to fix this text input so that it takes input from top left corner

The Text input is center aligned, how to fix this text input so that it takes input from top left corner

Here is my css for text input:

 /* The Text input is center aligned, how to fix this text input so that it takes input from top left corner */

input: {
    flex: 1,
    padding: 4,
    marginRight: 1,
    marginTop: 5,
    fontSize: 18,
    borderWidth: 1,
    borderRadius: 4,
    borderColor: '#E6E5ED',
    backgroundColor: '#F8F8F9',
    justifyContent: 'flex-start',
    height: 150
}

Answer

user657199 picture user657199 · Mar 15, 2016

I had the same issue, but the above notes didn't solve it. There's an android-only style property textAlignVertical that fixes this issue on multiline inputs.

i.e. textAlignVertical: 'top'

Related questions

React Native: Getting the position of an element

I am styling an Image component with flexbox to be in the center of the screen which works pretty well. Now I want a second Image component to be displayed directly on the top of the first one. The second …

Read More
Error Running React Native App From Terminal (iOS)

I am following the tutorial on the official React Native website. Using the following to build my project: react-native run-ios I get the error: Found Xcode project TestProject.xcodeproj xcrun: error: unable to find utility "instruments", not a developer tool …

Read More
How to change text Value upon Button press in React Native?

I'm an iOS developer currently working on an experimental React Native app. I have the following code which shows a button and sample text on the screen. import React from 'react'; import { StyleSheet, Text, View , Button } from 'react-native'; export default …

Read More