App bar issues, header overlaping with phone top bar / header

[Tobi DEGNON]

I'm not sure how this happened, I don't even know what is an app bar really (I'm not into mobile dev), but it seems hyperview rendered app have no app bar or something like that ? What I'm I missing, can styling solve the issue ?
I'm running the demo app btw

[Adam Stepinski]

Hi @Tobi-De , I see you are testing on Android. Are you using a physical device, or emulator? Thanks.

[Tobi DEGNON]

Hi @Tobi-De , I see you are testing on Android. Are you using a physical device, or emulator? Thanks.

Physical device, I tried with two different devices, same thing

[Adam Stepinski]

Thanks for reporting. I believe this is an issue with not properly accounting for the safe area view (which includes the status bar rendered by Android). One more question: is this happening on every screen in the demo app, or just "Case Studies" ?

[Tobi DEGNON]

Thanks for reporting. I believe this is an issue with not properly accounting for the safe area view (which includes the status bar rendered by Android). One more question: is this happening on every screen in the demo app, or just "Case Studies" ?

every screen

[Jamie Thom]

The problem will occur on any Android device with a notched camera and fixed top navigation bar. The following changes to Navigator.js adds in SafeAreaProvider and SafeAreaView to resolve the issue.

import * as Constants from './constants';
import HyperviewScreen from './HyperviewScreen';
import { NavigationContainer } from '@react-navigation/native';
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';

const Stack = createStackNavigator();

export default () => {
  return (
    <SafeAreaProvider>
      <NavigationContainer>
        <SafeAreaView style={{ flex: 1 }}>
          <Stack.Navigator screenOptions={{ headerShown: false }}>
            <Stack.Group>
              <Stack.Screen
                component={HyperviewScreen}
                initialParams={{ url: Constants.ENTRY_POINT_URL }}
                name={Constants.MAIN_STACK_NAME}
              />
            </Stack.Group>
            <Stack.Group screenOptions={{ presentation: 'modal' }}>
              <Stack.Screen
                component={HyperviewScreen}
                name={Constants.MODAL_STACK_NAME}
              />
            </Stack.Group>
          </Stack.Navigator>
        </SafeAreaView>
      </NavigationContainer>
    </SafeAreaProvider>
  );
};

Pull request with fix: #674