Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
KeyboardAvoidingViewSample
import Expo, { Constants } from 'expo';
import React from 'react';
import {
StyleSheet,
Text,
View,
KeyboardAvoidingView,
TextInput,
TouchableOpacity,
ScrollView
} from 'react-native';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedView: 'AVOID_NONE',
behavior: ''
};
}
render() {
const avoidNone = (
<View style={styles.innerContainer}>
<TextInput style={styles.input} />
<TouchableOpacity style={styles.button}>
<Text>Tap Here</Text>
</TouchableOpacity>
</View>
);
const avoidView = (
<View style={styles.innerContainer}>
<TextInput style={styles.input} />
<TouchableOpacity style={styles.button}>
<Text>Tap Here</Text>
</TouchableOpacity>
</View>
);
const avoidScroll = (
<View style={styles.innerContainer}>
<ScrollView style={{ flex: 1 }} contentContainerStyle={{flex: 1}}>
<TextInput style={styles.input} />
<TouchableOpacity style={styles.button}>
<Text>Tap Here</Text>
</TouchableOpacity>
</ScrollView>
</View>
);
const views = {
AVOID_NONE: avoidNone,
AVOID_VIEW: avoidView,
AVOID_WITH_SCROLL: avoidScroll
};
let positionStyle;
if (this.state.behavior === 'position') {
positionStyle = {flex: 1};
}
return (
<View style={styles.container}>
<KeyboardAvoidingView
behavior={this.state.behavior}
style={{ flex: 1 }}
contentContainerStyle={positionStyle}
>
<View style={{ flexDirection: 'row', flex: 1 }}>
<TouchableOpacity
style={styles.segmentButton}
onPress={() => {
this.setState({
selectedView: 'AVOID_NONE',
behavior: ''
});
}}
>
<Text>NONE</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.segmentButton}
onPress={() => {
this.setState({
selectedView: 'AVOID_VIEW',
behavior: 'padding'
});
}}
>
<Text>PADDING</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.segmentButton}
onPress={() => {
this.setState({
selectedView: 'AVOID_VIEW',
behavior: 'height'
});
}}
>
<Text>HEIGHT</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.segmentButton}
onPress={() => {
this.setState({
selectedView: 'AVOID_VIEW',
behavior: 'position'
});
}}
>
<Text>POSITION</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.segmentButton}
onPress={() => {
this.setState({
selectedView: 'AVOID_WITH_SCROLL',
behavior: 'padding'
});
}}
>
<Text>SCROLL</Text>
</TouchableOpacity>
</View>
{views[this.state.selectedView]}
</KeyboardAvoidingView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
marginTop: Constants.statusBarHeight
},
segmentButton: {
flex: 1,
padding: 10,
borderWidth: 1
},
button: {
padding: 10,
backgroundColor: '#009688',
borderWidth: 1,
flex: 1
},
input: {
flex: 10,
borderWidth: 1,
backgroundColor: 'gray',
padding: 15
},
innerContainer: {
flex: 10
}
});
Expo.registerRootComponent(App);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment