React Native - Moving up screen in TextInput with KeyboardAvoidingView - react-native

Question

I have a view with some TextInputs, and some of them are in the bottom part of the screen. The thing is I want the screen to move up when I click on them to that way I can see what I'm writing. I searched a lot but nothing works for me, I have my view nested in a KeyboardAvoidingView but nothing happens when I click on the TextInput. Here's my code:
<KeyboardAvoidingView
keyboardVerticalOffset={64}
style={{ flex: 1 }}
>
<View style={styles.screen}>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<TextInput
value={title}
onChangeText={text => setTitle(text)}
style={styles.singleLineTextInput}
placeholder="Title"
/>
<TextInput
value={keywords}
onChangeText={text => setKeywords(text)}
style={styles.singleLineTextInput}
placeholder="Keywords"
/>
<TextInput
value={description}
onChangeText={text => setDescription(text)}
style={{ ...styles.singleLineTextInput, ...styles.descriptionTextInput }}
placeholder="Description"
multiline={true}
autoFocus={true}
/>
</TouchableWithoutFeedback>
</View>
</KeyboardAvoidingView >
And my styles:
const styles = StyleSheet.create({
screen: {
flex: 1,
padding: 16,
alignItems: 'center'
},
singleLineTextInput: {
width: DEVICE_WIDTH * 0.8,
borderColor: 'black',
borderBottomWidth: 2,
fontSize: 16,
paddingHorizontal: 16
},
descriptionTextInput: {
maxHeight: DEVICE_HEIGHT / 4
}
});
I'm using React-Navigation and I tried changing keyboardVertialOffset and behavior to multiples values but nothing happens. Any ideas?
Thanks in advance

Answer 1

Import Content from native-base as
import { Content } from 'native-base';
And import platform from react-native
import { Platform } from 'react-native';
And use content and platform in your code like this:
<KeyboardAvoidingView
behavior={Platform.Os == "ios" ? "padding" : "height"}
style={{ flex: 1 }}
><Content>
<View style={styles.screen}>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<TextInput
value={title}
onChangeText={text => setTitle(text)}
style={styles.singleLineTextInput}
placeholder="Title"
/>
<TextInput
value={keywords}
onChangeText={text => setKeywords(text)}
style={styles.singleLineTextInput}
placeholder="Keywords"
/>
<TextInput
value={description}
onChangeText={text => setDescription(text)}
style={{ ...styles.singleLineTextInput, ...styles.descriptionTextInput }}
placeholder="Description"
multiline={true}
autoFocus={true}
/>
</TouchableWithoutFeedback>
</View>
</Content>
</KeyboardAvoidingView>
Hope this helps!