I am using a mapview with the markers of the restaurants. When clicked on the restaurant marker in the map , i display the actionsheet with input to write some notes. However the keyboard blocks the actionsheet completely. I cannot figure out how to solve the problem.
const styles = StyleSheet.create({
container: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
justifyContent: 'flex-end',
alignItems: 'center',
flex: 1,
},
map: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
flex: 1
},
});
return (
<View style={styles.container}>
{
showCamera &&
<React.Fragment>
<RNCamera
captureAudio={false}
ref={ref => {
this.camera = ref
}}
/>
<View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center' }}>
<TouchableOpacity onPress={()=>takePicture()}>
<Icon name="record-vinyl" size={25}/>
</TouchableOpacity>
</View>
</React.Fragment>
}
{
latitude && longitude &&
<MapView
provider={PROVIDER_GOOGLE}
initialRegion={{latitude:latitude,longitude:longitude, latitudeDelta: 0.5,longitudeDelta: 0.5}}
style={styles.map}
showsUserLocation={true}
>
{
deliveryAddresses.map((address,locationKey)=>{
return (
<MapView.Marker
coordinate={{latitude: address.location.lat,longitude: address.location.lng}}
title={address.customer}
description={address.delivery_address}
onPress={()=>onAddressPress(address)}
>
</MapView.Marker>
)
})
}
{
polyLines.map((points)=>{
const decodedPoints = Polyline.decode(points);
const coords = decodedPoints.map((point, index) => {
return {
latitude : point[0],
longitude : point[1]
}
});
return (
<MapView.Polyline
coordinates={coords}
strokeColor={'black'}
strokeWidth={4}
>
</MapView.Polyline>
)
})
}
</MapView>
}
<ActionSheet
ref={actionSheetRef}
>
<ScrollView>
{
selectedOrder &&
<Card>
<Content>
<CardItem header>
<Text>{'#SO-'+selectedOrder.sales_order_id}</Text>
</CardItem>
<CardItem>
<Body>
<Text>{selectedOrder.customer}</Text>
<Divider/>
<Text>{selectedOrder.delivery_address}</Text>
</Body>
</CardItem>
<CardItem>
<Input placeholder="Notes on delivery"/>
</CardItem>
<CardItem>
<Button iconLeft light onPress={()=>openCamera()}>
<Icon name='camera' size={20} style={{padding:5}}/>
<Text>Take Photo</Text>
</Button>
</CardItem>
<CardItem>
<Button iconLeft onPress={()=>markOrderAsDelivered(selectedOrder.sales_order_id)}
style={{backgroundColor:'#1AB394'}}
>
<Icon name="check" size={20} color={'#ffff'} style={{padding:5}}/>
<Text>Mark as Delivered</Text>
</Button>
</CardItem>
</Content>
</Card>
}
</ScrollView>
</ActionSheet>
</View>