So I have ponent in my React Native app
This ponent should render the TextInput at the bottom.
When the keyboard is showing, the container (includes TextInput and Send Button) should move above the keyboard.
Also, I want to make the input height change everytime user click the enter in keyboard, just like this:

But all I've got is like these:

Below is my codes:
test_page2.js

import React from 'react'
import { View, Text, TouchableHighlight, TextInput, Dimensions, StyleSheet } from 'react-native'
import { StackNavigator } from 'react-navigation'
import { colors } from '../styles/colors'

let windowSize = Dimensions.get('window')



export default class TestScreen extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      message:'',
    }
  }

    static navigationOptions = {
        title: 'Test Page 2',
    };


    onBackPress(){
      console.log("thesauhduiahduisahd") 
    }

    onSendPress() {
      console.log("send message");
      // this.setState({message: ''});
    }


    render() {
        return ( 
          <View style={styles.container}> 
            <View style={styles.chatContainer}> 
              <Text style={{color: '#000'}}>Others Component</Text> 
            </View> 
            <View style={styles.inputContainer }>
              <View style={styles.textContainer}> 
                <TextInput
                  multiline={true}  
                  value={this.state.message} 
                  style={styles.input} 
                  placeholder="Tulis pesan"
                  onChangeText={(text) => this.setState({message: text})}
                  underlineColorAndroid='rgba(0,0,0,0)' />
              </View>
              <View style={styles.sendContainer}>
                <TouchableHighlight
                  underlayColor={'#4e4273'}
                  onPress={() => this.onSendPress()}
                  >
                  <Text style={styles.sendLabel}>SEND</Text>
                </TouchableHighlight>
              </View>
            </View>
          </View>
        );
    }
}


var styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'stretch',
      backgroundColor: '#ffffff'
    },
    topContainer: {
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'flex-start',
      alignItems: 'center',
      backgroundColor: '#6E5BAA',
      paddingTop: 20,
    },
    chatContainer: {
      flex: 11,
      justifyContent: 'center',
      alignItems: 'stretch'
    },
    inputContainer: {
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'space-around',
      alignItems: 'center',
      backgroundColor: '#6E5BAA'
    },
    textContainer: {
      flex: 1,
      justifyContent: 'center'
    },
    sendContainer: {
      justifyContent: 'flex-end',
      paddingRight: 10
    },
    sendLabel: {
      color: '#ffffff',
      fontSize: 15
    },
    input: {
      width: windowSize.width - 70,
      color: '#555555',
      paddingRight: 10,
      paddingLeft: 10,
      paddingTop: 5,
      height: '100%', 
      borderColor: '#6E5BAA',
      borderWidth: 1,
      borderRadius: 2,
      alignSelf: 'center',
      backgroundColor: '#ffffff'
    },
  });

How can I achieved the design just like my example?
Thanks in advance

So I have ponent in my React Native app
This ponent should render the TextInput at the bottom.
When the keyboard is showing, the container (includes TextInput and Send Button) should move above the keyboard.
Also, I want to make the input height change everytime user click the enter in keyboard, just like this:

But all I've got is like these:

Below is my codes:
test_page2.js

import React from 'react'
import { View, Text, TouchableHighlight, TextInput, Dimensions, StyleSheet } from 'react-native'
import { StackNavigator } from 'react-navigation'
import { colors } from '../styles/colors'

let windowSize = Dimensions.get('window')



export default class TestScreen extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      message:'',
    }
  }

    static navigationOptions = {
        title: 'Test Page 2',
    };


    onBackPress(){
      console.log("thesauhduiahduisahd") 
    }

    onSendPress() {
      console.log("send message");
      // this.setState({message: ''});
    }


    render() {
        return ( 
          <View style={styles.container}> 
            <View style={styles.chatContainer}> 
              <Text style={{color: '#000'}}>Others Component</Text> 
            </View> 
            <View style={styles.inputContainer }>
              <View style={styles.textContainer}> 
                <TextInput
                  multiline={true}  
                  value={this.state.message} 
                  style={styles.input} 
                  placeholder="Tulis pesan"
                  onChangeText={(text) => this.setState({message: text})}
                  underlineColorAndroid='rgba(0,0,0,0)' />
              </View>
              <View style={styles.sendContainer}>
                <TouchableHighlight
                  underlayColor={'#4e4273'}
                  onPress={() => this.onSendPress()}
                  >
                  <Text style={styles.sendLabel}>SEND</Text>
                </TouchableHighlight>
              </View>
            </View>
          </View>
        );
    }
}


var styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'stretch',
      backgroundColor: '#ffffff'
    },
    topContainer: {
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'flex-start',
      alignItems: 'center',
      backgroundColor: '#6E5BAA',
      paddingTop: 20,
    },
    chatContainer: {
      flex: 11,
      justifyContent: 'center',
      alignItems: 'stretch'
    },
    inputContainer: {
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'space-around',
      alignItems: 'center',
      backgroundColor: '#6E5BAA'
    },
    textContainer: {
      flex: 1,
      justifyContent: 'center'
    },
    sendContainer: {
      justifyContent: 'flex-end',
      paddingRight: 10
    },
    sendLabel: {
      color: '#ffffff',
      fontSize: 15
    },
    input: {
      width: windowSize.width - 70,
      color: '#555555',
      paddingRight: 10,
      paddingLeft: 10,
      paddingTop: 5,
      height: '100%', 
      borderColor: '#6E5BAA',
      borderWidth: 1,
      borderRadius: 2,
      alignSelf: 'center',
      backgroundColor: '#ffffff'
    },
  });

How can I achieved the design just like my example?
Thanks in advance

• javascript
• react-native
• flexbox
• react-native-flexbox

Share Improve this question Follow edited Jun 6, 2017 at 6:34 yogieputra asked Jun 6, 2017 at 6:28 yogieputrayogieputra 65722 gold badges1414 silver badges2828 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

What i do in my application to tackle these type of situation is as follows:

1) Install a node module -

npm install react-native-keyboard-aware-scroll-view --save or yarn add react-native-keyboard-aware-scroll-view --save 

2) Import the project into your project:

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'

3) Encapsulate everything inside the <keyboardAwareScrollView> </keyboardAwareScrollView> like this:

render(){
    return (
      <KeyboardAwareScrollView  contentContainerStyle={{flex: 1,
      justifyContent: 'space-around',
      alignItems: 'center',
      width: null,
      height: null,}}>
       <View>
       ....
       </View>
      </KeyboardAwareScrollView>
     )
} 

everything seems pretty good.

Cheers :)