在键盘弹出窗口上扩展屏幕反应原生？

Question

I have a problem with my react-native app. At the bottom of the page, there are textboxes. After I click on some textbox, keyboard pop-up, so I can't see text boxes. Is there any way to extend screens height when a keyboard is opened, so I can normally see my text boxes? Pictures with issue:
Picture without opened keyboard
Picture with keyboard opened

And here is my code:

render() {
    return (
        <View style={styles.container}>
            <View style={styles.container1}>
                <Text style={styles.headerText}>Pivoznalac</Text>
                <Text style={styles.infoText2}>Dobrodošli u Jelenov kviz</Text>
                <View style={styles.container12}>
                    {/* <View style={styles.sociaContainer}> */}
                    <View style={styles.container12}>
                        <TouchableOpacity style={styles.socialIcon}
                            onPress={() => Linking.openURL('https://www.facebook.com/JelenPivoBiH/?brand_redir=28032575448')}>
                            <Icon name="facebook" size={50} color="#fff" />
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.socialIcon}
                            onPress={() => Linking.openURL('https://www.instagram.com/jelenpivo/')}>
                            <Icon name="instagram" size={50} color="#fff" />
                        </TouchableOpacity>
                    </View>
                    <Image style={styles.headerImage} source={require('../assets/images/Picture-app2.png')} />
                </View>
            </View>
             <View style={styles.container2}>
                 <Text style={styles.infoHeading}>
                    Upiši podatke i započni igru
                  </Text>
                  <Text style={styles.infoText}
                   onPress={this.toggleButtonStyle}>
                    Upišite korisničko ime ili se registrujte da bi ga dobili.
                  </Text>
                  <TextInput style={styles.inputBox}
                    onChangeText={text => this.onChangeUserToken(text)} 
                    placeholder='Unesite korisnički token'
                    placeholderTextColor = "#ccc"
                  />
                  <TextInput style={styles.inputBox}
                    onChangeText={text => this.onChangeGameToken(text)} 
                    placeholder='Unesite token za igru'
                    placeholderTextColor = "#ccc"
                  />
                  <TouchableHighlight style={styles.button}
                            onPress={this._proceedAsync}
                            underlayColor='#FEC424'>
                        <Text style={styles.buttonText}>
                            Započni igru
                        </Text>    
                  </TouchableHighlight>

              </View>
        </View>
      );
  }

And style:

//ProceedScreen
container1: {
    backgroundColor:'#FEC424',
    height: "45%",
},

socialIcon: { 
    alignItems: 'center',
    flexDirection:'row',
    marginLeft: 50,
},

container12: {
    flex: 1,
    flexDirection: 'row',
    marginTop: 20,
},    

headerImage: {
    flex: 1,
    height: 235,
    resizeMode: 'contain',
    marginRight: -30,
},

infoHeading: {
    fontSize: 25,
    fontFamily: 'robotoBold'
},

container2: {
    backgroundColor: '#fff',
    height: "55%",
    padding: 30,
    borderTopLeftRadius: 25,
    borderTopRightRadius: 25,
    zIndex: -1,
    justifyContent: 'flex-end',
},

button: {
    borderWidth: 2,
    borderRadius: 50,
    borderColor: '#FEC424',
},

buttonText: {
    textAlign: 'center',   
    textTransform: 'uppercase',
    fontSize: 16,
    padding: 10,
    color: '#FEC424',
}

Answer 1

You can use onFocus and onBlur events on TextInput elements to detect when the user wants to write something, and when user stopped writing. Using this you can, for example, hide upper beer photos, for time of writing, so inputs will be positioned higher and visible for user. Native mobile keyboards are tricky :)