How to centered TextInput on page in react-native?

Question

When TextInput focused and android keyboard opened need to centered TextInput on screen above keyboard. Ho to make it?

Answer 1

For some reason justifyContent is not working for TextInput so just use margins. Here is example:

var styles = StyleSheet.create({
  textInput: {
    marginLeft: 50,
    marginRight: 50
  }
});

Just make sure to set styles to TextInput:

<TextInput style={styles.textInput} />

Almost forgot - do not set width, use margins to define size, or it won't work.

Answer 2

You'll need to use flexbox.

On the parent container you'll need something like:

var styles = StyleSheet.create({
    contaner: {
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'center
    }
});

Here is a good guide to flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/