Reputation: 647
So I have component in my React Native app
This component 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
Upvotes: 0
Views: 12867
Reputation: 3384
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 :)
Upvotes: 1