React Native - Increase view height as per text increases when keyboard open - reactjs

Question

I have created a view which has title and body. Everything works fine but when I add body and keyboard opens then text goes out of the view. Please help me as how can I increase the view height or scroll the view fully so that text must not be out of view.
Code for view
<KeyboardAvoidingView
style={{
display: 'flex',
height: Dimensions.get('window').height,
width: Dimensions.get('window').width,
}}
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<SafeAreaView
style={{
flex: 1,
backgroundColor: !darkTheme
? Colors.light.f2Color
: Colors.dark.backgrounColor,
}}>
{/* header */}
{/* Post Section */}
<View
style={{
width: width * 0.96,
borderRadius: 16,
alignSelf: 'center',
marginTop: height * 0.01,
flex: 0.7,
}}>
<View
style={{
backfaceVisibility: 'hidden',
backgroundColor: !darkTheme
? Colors.light.backgrounColor
: Colors.dark.cardColor,
borderRadius: 16,
flex: 1,
paddingHorizontal: width * 0.02,
}}>
<TextInput
style={{
fontWeight: '300',
fontStyle: 'normal',
fontSize: 20,
fontFamily: 'OpenSans-Regular',
paddingHorizontal: width * 0.015,
color: !darkTheme ? Colors.light.black : Colors.dark.white,
width: '100%',
marginTop: height * 0.02,
flexWrap: 'wrap',
}}
value={postTitle}
onChangeText={value => {
setPostTitle(value);
}}
maxLength={150}
clearButtonMode="never"
multiline={true}
placeholder="Add a title"
placeholderTextColor={Colors.light.darkgrey}
/>
<TextInput
style={{
fontWeight: '300',
fontStyle: 'normal',
fontSize: 14,
fontFamily: 'OpenSans-Regular',
paddingHorizontal: width * 0.015,
color: !darkTheme ? Colors.light.black : Colors.dark.white,
width: '100%',
marginTop: height * 0.03,
}}
value={postBody}
onChangeText={value => {
setPostBody(value);
}}
maxLength={1000}
clearButtonMode="always"
multiline={true}
placeholder="Body text"
placeholderTextColor={Colors.light.darkgrey}
/>
{contentType === 'Add Question' && (
<View>
<FlatList
data={choiceArray}
scrollEnabled={true}
renderItem={({item, index}) => (
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<TextInput
style={{
fontWeight: '300',
fontStyle: 'normal',
fontSize: 14,
fontFamily: 'OpenSans-Regular',
paddingHorizontal: width * 0.015,
marginTop: height * 0.025,
color: !darkTheme
? Colors.light.black
: Colors.dark.white,
width: '90%',
}}
value={postChoices[index]}
onChangeText={value => {
addOptionValue(index, value);
}}
// onEndEditing={(value) => addOptionValue(index, value)}
maxLength={150}
clearButtonMode="never"
multiline={false}
placeholder={
'Option ' +
String.fromCharCode(97 + index).toUpperCase()
}
placeholderTextColor={Colors.light.cardOuterShadow}
/>
{index > 1 ? (
<TouchableOpacity onPress={() => optionCdelete(index)}>
<Image
source={require('../assets/images/red-slash.png')}
/>
</TouchableOpacity>
) : null}
</View>
)}
numColumns={1}
keyExtractor={(item, index) => index}
contentContainerStyle={{
backgroundColor: '#fff',
marginTop: height * 0.02,
}}
showsVerticalScrollIndicator={false}
onEndReachedThreshold={0}
showsHorizontalScrollIndicator={false}
bounces={false}
keyboardShouldPersistTaps="handled"
/>
{choiceArray.length < 4 ? (
<TouchableOpacity
onPress={addNextOption}
style={{
flexDirection: 'row',
marginTop: height * 0.03,
alignItems: 'center',
}}>
<Image source={require('../assets/images/plus.png')} />
<Text
style={{
color: Colors.light.darkgrey,
fontSize: 14,
fontFamily: 'OpenSans-Regular',
marginLeft: width * 0.01,
}}>
Add Option
</Text>
</TouchableOpacity>
) : null}
</View>
)}
{/* {contentType === 'Add Question' && (
<View style={{marginTop: height * 0.02}}>
<View style={{flexDirection: 'row'}}>
<TextInput
style={{
fontWeight: '300',
fontStyle: 'normal',
fontSize: 14,
fontFamily: 'OpenSans-Regular',
paddingHorizontal: width * 0.015,
color: !darkTheme
? Colors.light.black
: Colors.dark.white,
width: '99%',
marginTop: height * 0.015,
}}
value={optionA}
onChangeText={value => {
setOptionA(value);
}}
onEndEditing={() => addChoices(optionA)}
maxLength={150}
clearButtonMode="never"
multiline={false}
placeholder="Option A"
placeholderTextColor={Colors.light.cardOuterShadow}
/>
</View>
<TextInput
style={{
fontWeight: '300',
fontStyle: 'normal',
fontSize: 14,
fontFamily: 'OpenSans-Regular',
paddingHorizontal: width * 0.015,
color: !darkTheme ? Colors.light.black : Colors.dark.white,
width: '99%',
marginTop: height * 0.025,
}}
value={optionB}
onChangeText={value => {
setOptionB(value);
}}
onEndEditing={() => addChoices(optionB)}
maxLength={150}
clearButtonMode="never"
multiline={false}
placeholder="Option B"
placeholderTextColor={Colors.light.cardOuterShadow}
/>
{surveyCount > 0 && (
<View style={{flexDirection: 'row'}}>
<TextInput
style={{
fontWeight: '300',
fontStyle: 'normal',
fontSize: 14,
fontFamily: 'OpenSans-Regular',
paddingHorizontal: width * 0.015,
marginTop: height * 0.025,
color: !darkTheme
? Colors.light.black
: Colors.dark.white,
width: '90%',
}}
value={optionC}
onChangeText={value => {
setOptionC(value);
}}
onEndEditing={() => addChoices(optionC)}
maxLength={150}
clearButtonMode="never"
multiline={false}
placeholder="Option C"
placeholderTextColor={Colors.light.cardOuterShadow}
/>
{optionC.length > 0 && (
<TouchableOpacity onPress={optionCdelete}>
<Image
source={require('../assets/images/red-slash.png')}
/>
</TouchableOpacity>
)}
</View>
)}
{surveyCount == 2 && (
<View style={{flexDirection: 'row'}}>
<TextInput
style={{
fontWeight: '300',
fontStyle: 'normal',
fontSize: 14,
fontFamily: 'OpenSans-Regular',
paddingHorizontal: width * 0.015,
color: !darkTheme
? Colors.light.black
: Colors.dark.white,
width: '90%',
marginTop: height * 0.025,
}}
value={optionD}
onChangeText={value => {
setOptionD(value);
}}
onEndEditing={() => addChoices(optionD)}
maxLength={150}
clearButtonMode="never"
multiline={false}
placeholder="Option D"
placeholderTextColor={Colors.light.cardOuterShadow}
/>
{optionD.length > 0 && (
<TouchableOpacity onPress={optionDdelete}>
<Image
source={require('../assets/images/red-slash.png')}
/>
</TouchableOpacity>
)}
</View>
)}
{surveyCount < 2 && (
<TouchableOpacity
onPress={() => setSurveyCount(surveyCount + 1)}
style={{
flexDirection: 'row',
marginTop: height * 0.03,
alignItems: 'center',
}}>
<Image source={require('../assets/images/plus.png')} />
<Text
style={{
color: Colors.light.darkgrey,
fontSize: 14,
fontFamily: 'OpenSans-Regular',
marginLeft: width * 0.01,
}}>
Add Option
</Text>
</TouchableOpacity>
)}
</View>
)} */}
</View>
</View>
</SafeAreaView>
</KeyboardAvoidingView>
Images of issue
This is the issue when I am trying to add more data.Please help!