Search code examples
react-nativereact-modal

React modal element doesn't cover the left part of the screen

I have a Modal element that I want on the whole screen, to do that I created the functions widthPercentageToDP and heightPercentageToDP that get the width and height from the device and fills it according to the percentage set, the height is covered completely but with the width there is a small gap to the left that is not covered.

import { StyleSheet, Dimensions, PixelRatio } from 'react-native';

                  <Modal isVisible={true}>
                        <View style={[s.contract]}                                 > 
                                <View >
                                    <Text>
                                        I want the modal on the whole screen
                                    </Text>
                                </View>
                                <View >
                                    {previousButton}{nextButton}
                                </View>
                        </View>
                    </Modal>

const styles = StyleSheet.create({
    contract: {
        backgroundColor: 'white',
        width: widthPercentageToDP('100%'),
        height: heightPercentageToDP('100%')
    }
});

const widthPercentageToDP = widthPercent => {
  const screenWidth = Dimensions.get('window').width;
  const elemWidth = parseFloat(widthPercent);
  return PixelRatio.roundToNearestPixel(screenWidth * elemWidth / 100);
};
const heightPercentageToDP = heightPercent => {
  const screenHeight = Dimensions.get('window').height;
  const elemHeight = parseFloat(heightPercent);
return PixelRatio.roundToNearestPixel(screenHeight * elemHeight / 100);
};

enter image description here This is the screenshot on my simulator

Solution

  • I needed to set the margin of the modal element to 0

             <Modal style={{margin: 0}} isVisible={true}>
                        ...
         </Modal>