javascript - React Native: How to styling the TextInput? - Stack Overflow|Programmer puzzle solving

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

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

Share Improve this question edited Jun 6, 2017 at 6:34 asked Jun 6, 2017 at 6:28 yogieputra 6572 gold badges14 silver badges28 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 :)

Programmer puzzle solving

javascript - React Native: How to styling the TextInput? - Stack Overflow

1 Answer 1

Articles related to this article

comment list (0)