Background and components stay behind bottom bar in React Native

Question

In react native, devices with virtual navigation keys do not have any problems, while on phones with manual keys (eg Samsung A5,) the background and components are behind the bottom bar. When I give flex:1 or height:heightPercentageToDP(100) to my View, I have the same problem. how can i solve it? I'll be happy if you can help me.

i want to components and background start from the top of the bottom bar

Answer 1

You should add your code so it's easier to help you, or even an example screenshot to show your issue... but I will try to answer.

React Native has the Dimensions API which you can import in with your Views and Texts like so:
import { View, Text, Dimensions } from "react-native";

If you grab the height like this: const deviceHeight = Dimensions.get("window").height; using window as the param will give you the height excluding the bar you mentioned. Using screen there would provide the entire height.

You could use the windows Dimension to calculate any margin or padding you might need based on your use case.