How to fix issue with KeyboardAwareScrollView? - react-native

Question

Screenshot
Screenshot2
import React from 'react';
import { View, SafeAreaView, StyleSheet, TextInput, Text, TouchableOpacity, Platform } from 'react-native';
import MapView, { UrlTile } from 'react-native-maps';
import tw from 'tailwind-react-native-classnames';
import { Card } from 'react-native-shadow-cards';
import { useNavigation } from '#react-navigation/native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
const MapScreen = () => {
const navigation = useNavigation();
let location = {
latitude: 5.354846154402075,
longitude: 100.30152659738222,
latitudeDelta: 0.001,
longitudeDelta: 0.002
}
return (
<SafeAreaView style={tw`bg-white h-full`}>
<View style={tw`h-2/3`}>
<MapView
style={styles.map}
mapType='standard'
region={location}>
<UrlTile
urlTemplate='https://api.maptiler.com/maps/openstreetmap/256/{z}/{x}/{y}.jpg?key=2fFGEOiBVDCSMRNfaU70'
shouldReplaceMapContent={true}>
</UrlTile>
</MapView>
</View>
<KeyboardAwareScrollView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
bounces={false}
enableOnAndroid={true}
scrollEnabled={true}
enableAutomaticScroll={true}
contentContainerStyle={{ flex: 1 }}>
<View style={styles.cardContainer}>
<Card style={styles.cardView}>
<Text style={{ fontSize: 11, paddingTop: 10, paddingLeft: 10 }}>From</Text>
<View style={styles.inputBox}>
<TextInput
style={{ paddingVertical: 0, paddingLeft: 10 }}
placeholder='Current Location'
keyboardType='current-location'>
</TextInput>
</View>
<Text style={{ fontSize: 11, paddingTop: 10, paddingLeft: 10 }}>To</Text>
<View style={styles.inputBox}>
<TextInput
style={{ paddingVertical: 0, paddingLeft: 10 }}
placeholder='Destination'
keyboardType='destination'>
</TextInput>
</View>
<View>
<TouchableOpacity
onPress={() => navigation.navigate('ShowResultScreen')}
style={styles.button}>
<Text
style={{
textAlign: 'center',
fontWeight: '700',
fontSize: 17,
color: '#fff'
}}>
Search
</Text>
</TouchableOpacity>
</View>
</Card>
</View>
</KeyboardAwareScrollView>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
map: {
width: '100%',
height: '100%',
},
cardContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 25,
shadowOpacity: 0.8
},
cardView: {
width: '97%',
height: '95%',
paddingLeft: 10,
paddingTop: 3
},
button: {
backgroundColor: '#5AA9E6',
padding: 10,
borderRadius: 10,
marginTop: 15,
marginRight: 10
},
inputBox: {
borderRadius: 10,
width: '97%',
height: '15%',
backgroundColor: '#F5F3F4',
marginTop: 10
}
});
export default MapScreen;
I want to make the input section below is scrollable and not covered by the keyboard when the keyboard is pop up so that the Search button can be pressed after typing the required input.
Update: I have used KeyboardAwareScrollView instead of using KeyboardAvoidingView and ScrollView. However, the result is like the Screenshot2.

Answer 1

The easiest way is to use the package react-native-keyboard-aware-scroll-view.