How to align text input correctly in react native?

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

  • Requiring Modules in react-native
  • React Native / Xcode Upgrade and now RCTConvert.h not found
  • Got “is not a recognized Objective-C method” when bridging Swift to React-Native
  • React Native: Getting the position of an element
  • React-Native - Custom navigation with Navigator component
  • How to rename react-native entry file (index.ios.js)
  • 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
    }
    

    2 Solutions Collect From Internet About “How to align text input correctly in react native?”

    I had the same issue, but the above notes (though spot on and useful when posted a year ago) didn’t solve it. There’s an android-only style property textAlignVertical that fixed this issue on multiline inputs for me.

    i.e. textAlignVertical: 'top'

    Update 2015-07-03: multiline text inputs have now been merged:

    https://github.com/facebook/react-native/pull/991

    The multiline examples that ship with React Native in the UI Explorer should work as documented.

    The problem you’ll have is that multiline TextInput aren’t working correctly yet, and the docs are misleading. Please see this Github issue:

    https://github.com/facebook/react-native/issues/279

    “We haven’t ported that functionality to open source yet.”

    There is some code in that issue that gives minimal multiline functionality, so you might be able to get it working with that.