I have a modal where I want it to take the full screen of the device when oppened. But it's shifting to the right and not taking the full screen. Here how it look:
<Modal
animationType="slide"
transparent={true}
visible={isImageModalVisible}
onRequestClose={() => {
setIsImageModalVisible(false);
}}
>
<AvatarMediaSelection setModalVisible={setIsImageModalVisible}/>
</Modal>
Here is the modal and inside this modal I have a component with the following code:
<View style={styles.container}>
<ScrollView>
{ photos.length > 0 &&
<FlatList
data={photos}
numColumns={3}
keyExtractor={(item) => item.node.image.uri}
// onEndReached={() => setPhotosNum((prevState) => prevState + 50)}
onEndReached={({ distanceFromEnd }) => {
if (distanceFromEnd < 0) return;
return setPhotosNum((prevState) => prevState + 50)
}}
renderItem={({item}) => {
return(
<TouchableOpacity style={styles.imageContainer} onPress={() => handleImageChoosen(item.node.image)}>
<Image
style={styles.image}
source={{uri: item.node.image.uri}}
/>
</TouchableOpacity>
)
}}
/>
}
</ScrollView>
</View>
And have the following styling:
container: {
backgroundColor: 'white',
flex: 1,
width: wp(100),
height: hp(100),
},
image: {
width: wp(33),
height: hp(25),
}
try
width: wp("100%"),
height: hp("100%"),
And please try to place your code in a live example like snack or Stackblitz or Codesandbox and provide the URL
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.