react-native modal not taking the full screen of the device

Question

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),
}

Please post the live example through Stackblitz or Codesandbox so that people can debug it. Even using Browserstack. — m4n0, Jul 06 '21 at 15:32
@Rohit wp is widthPercentageToDP from the `@common-styles/responsiveSize.js` library and hp for height — SDB_1998, Jul 07 '21 at 08:53

score 0 · Answer 1 · answered Jul 06 '21 at 17:47

0

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

answered Jul 06 '21 at 17:47

mainak

1,886
2
9
19

react-native modal not taking the full screen of the device

1 Answers1