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);
};
I needed to set the margin
of the modal
element to 0
<Modal style={{margin: 0}} isVisible={true}>
...
</Modal>