Android has extra size(Navigation Bar height) out of screen,iOS is right.

huiqun922 commented 1 year ago

Current behavior

I was layout column with flex-end

iOS display right, but Android has extra size(Navigation Bar height) out of screen.

Android has enable Fabric

newArchEnabled=true

import * as React from 'react';
import {View, Text} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {useHeaderHeight} from '@react-navigation/elements';
import {SafeAreaProvider} from 'react-native-safe-area-context';

function HomeScreen() {
  const headerHeight = useHeaderHeight();
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'flex-end'}}>
      <Text>Home Screen</Text>
      <View
        style={{
          width: '100%',
          height: headerHeight,
          backgroundColor: 'red',
        }}
      />
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <SafeAreaProvider>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={HomeScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  );
}

export default App;

WX20230728-193603@2x

Expected behavior

display right in iOS/Android.

Reproduction

https://github.com/huiqun922/rn_nav.git

Platform

[X] Android
[ ] iOS
[ ] Web
[ ] Windows
[ ] MacOS

Packages

[ ] @react-navigation/bottom-tabs
[ ] @react-navigation/drawer
[ ] @react-navigation/material-top-tabs
[X] @react-navigation/stack
[X] @react-navigation/native-stack
[ ] react-native-tab-view

Environment

"@react-navigation/native": "^6.1.7", "@react-navigation/native-stack": "^6.9.13", "react": "18.2.0", "react-native": "0.72.1", "react-native-safe-area-context": "^4.7.1", "react-native-screens": "^3.23.0", "react-native-gesture-handler": "^2.12.0"

github-actions[bot] commented 1 year ago

Couldn't find version numbers for the following packages in the issue:

@react-navigation/stack

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

migueldaipre commented 1 year ago

The behavior is correct. The useHeaderHeight() hook on Android will return 0, so your red screen doesn't show up.

huiqun922 commented 1 year ago

The behavior is correct. The useHeaderHeight() hook on Android will return 0, so your red screen doesn't show up.

thanks for your reply. The useHeaderHeight() hook on Android return 56.

function HomeScreen() {
  const headerHeight = useHeaderHeight();
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'flex-end'}}>
      <Text>{`Home Screen headerHeight : ${headerHeight}`}</Text>
      <View
        style={{
          width: '100%',
          height: headerHeight,
          backgroundColor: 'red',
        }}
      />
    </View>
  );
}

WX20230802-102715@2x

karimelsaidy commented 1 year ago

the same issue "react-native": "0.72.3", "@react-navigation/bottom-tabs": "^6.5.8", "@react-navigation/material-top-tabs": "^6.6.3", "@react-navigation/native": "^6.1.7", "@react-navigation/native-stack": "^6.9.13", "@react-navigation/stack": "^6.3.17",

android api 29 but on 30 or higher android api it's good

github-actions[bot] commented 9 months ago

Couldn't find version numbers for the following packages in the issue:

@react-navigation/stack

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

@react-navigation/native (found: 6.1.7, latest: 6.1.9)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

github-actions[bot] commented 9 months ago

Couldn't find version numbers for the following packages in the issue:

@react-navigation/bottom-tabs
@react-navigation/stack

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

@react-navigation/native (found: 6.1.7, latest: 6.1.9)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

react-navigation / react-navigation