Модальный элемент React не закрывает левую часть экрана

Question

У меня есть элемент Modal, который я хочу на весь экран, для этого я создал функции widthPercentageToDP и heightPercentageToDP, которые получают ширину и высоту от устройства и заполняют его в соответствии с установленным процентом, высота покрыта полностью, но с шириной слева есть небольшой зазор, который не покрыт.

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

Это скриншот моего симулятора

Answer 1

Почему бы не использовать css? Дайте вашему Модальному компоненту модальный css -класс и определите последний как:

.modal {
  background:white;
  box-shadow:0 2px 8px rgba(0,0,0, 0.26)
  width:90%;
  position: fixed;
  top:20vh;
  left:5%;
}
media (min-width:768px) {
  .modal {
    width: 50rem;
    left:calc((100%-50rem) / 2)
  }
}

Это еще не законченный, но рабочий кодов и ящиков

Answer 2

Мне нужно было установить margin элемента modal на 0

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

Answer 3

Вам не нужно указывать значения высоты и ширины для покрытия экрана. Простое flex: 1 подойдет.

const styles = StyleSheet.create({
    contract: {
        backgroundColor: 'white',
        flex: 1, // <---
    }
});