Menu
The title says it all. I've edited the styles.xml file (/projectname/android/app/src/res/values/styles.xml) to contain the following:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">@null</item>
</style>
</resources>This code successfully makes the app fullscreen, removing the Android status bar. However, if I launch a React Native 'Modal' component the modal only extends as far to the top as where the edge of the status bar would have been, leaving a gap the size of a status bar. How would I modify the modal to extend all the way to the top?
Here's a screenshot of the open modal with the gap:
570
Adding the prop presentationStyle="pageSheet" does the trick.
Try giving {position: 'absolute'} in its style props!
Open screens/TabOneScreen . Change the code to look like the code block below: import * as React from "react"; import { Button, StyleSheet, Text, View } from "react-native"; import Modal from "react-native-modal"; export default function TabOneScreen() { const [isModalVisible, setIsModalVisible] = React.
You can use a useEffect to request fullscreen on the document body when it first loads.
you can apply statusBarTranslucent={true} to the react native <Modal> component like example below
<Modal statusBarTranslucent={true}>
//your modal content
<Modal />
knowing that, the statusBarTranslucent={true} only available for android
53
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
