Animacja renderowania ekranu z safe area

Cześć,

próbuje zrobić na dole ekranu menu nawigacyjne pomiędzy ekranami.

Problem który mam polega na tym, że jak renderuje jakiś ekran nazwijmy go A i w obrębie tego ekranu nawiguje się do innego ekranu z efektem ..TransitionPresets.ModalTransition
to na dole ekranu widzę zaokrąglone krawędzie podczas animacji przejścia z jednego ekranu do drugi.

Problem ten nie występuje jeżeli opakuje widok ekranu A w <SafeAreaView style={{flex: 1, backgroundColor: 'yellow'}} edges={['bottom']}>

wtedy wszystko działa dobrze.

Tak to wygląda ma zdjęciu -> owrapowany widok ekranu A w wspomniany SafeArea

screenshot-20230730203131.png

Czyli żółte to jest to safeArea co dodałem i jak klikam dodaj to nawiguje mnie do innego widoku z tym efektem co wspomniałem.

To jest otwarty nowy widok.

screenshot-20230730203237.png

Problem pojawia się jeżeli zamykam ten widok - w tym przypadku jest git na emualtorze bo jak robie screena to pokazuje zle.

screenshot-20230730203938

Tak to wygląda bez tabs i bez safeArea. No dziwnie to wychodzi na screenach bo na emulatorze problemu nie ma. Na dole ekran jest tez zaokraglony tak jak na górze wiec jakis bug poderzewam z emulatorem.

screenshot-20230730204442.png

Jeżeli jednak dodam te bottom tabs to zaczynają się problemy. Zwróćcie uwagę na to co zaznaczyłem.

Takjakby widok nie wie o tym, że jest to safe area i renderuje inny widok tak jakby go nie było.

screenshot-20230730203649.png

Nie wiem jak powinienem te bottom tabs wyświetlać żeby pokazywały się ponad safe area na dole. No i jednocześnie żeby mi się nie psuło to przejście do widoku?

Wstawiam kod jaki mam, jest tego sporo więc uproszczony. Jest też burdel wiem.

Może ktoś podsunie jakiś pomysł bo próbowałem już wielu rzeczy i ta animacja jest zepsuta za każdym razem jak mam te bottom tabs.

App.tsx

  return (

    <AppProvider>
      <AuthProvider>
        <AxiosProvider>
          <AppContainer>
            <RootStackScreen userToken={token} />
          </AppContainer>
        </AxiosProvider>
      </AuthProvider>
    </AppProvider>

  )
}

AppContainer

export default function AppContainer(props: Props) {
    return (
        <NavigationContainer theme={navTheme}>
            <StatusBar barStyle="light-content" animated={true} backgroundColor="rgba(0,0,0,0)" translucent />
            <NativeBaseProvider theme={theme}>{props.children}</NativeBaseProvider>
        </NavigationContainer>
    )
}

RootStackScreen

            <RootStack.Navigator>

                {(() => {
                    switch (screenName) {
                        case 'APP':
                            return <RootStack.Screen name="App" component={DrawerScreen} options={{ headerShown: false, animationEnabled: false }} />
                        case 'LOGIN':
                            return <RootStack.Screen name='Auth' component={AuthStackScreen} options={{ animationEnabled: false, headerShown: false }} />
                        case 'SPINNER':
                            return <RootStack.Screen name='Auth' component={SpinnerScreen} options={{ animationEnabled: false, headerShown: false }} />
                        default:
                            null;
                    }
                })()}

            </RootStack.Navigator>

DrawerScreen

   <Tab.Navigator initialRouteName={screenName} screenOptions={{ headerShown: false, tabBarStyle: { backgroundColor: 'red', borderTopWidth: 0, height: 45 } }}>
                <Tab.Screen
                    name="Start"
                    component={StartScreen}
                    options={{
                        tabBarShowLabel: false,
                        tabBarButton: CustomTabDayButton,
                        tabBarIcon: ({ color, size }) => (
                            <Icon as={Feather} name='play-circle' color={'gray'} size="md" opacity={0.8} />
                        ),
                    }}
                />

                ( ........... )
                
            </Tab.Navigator>

StartScreen

<View style={[styles.buttonContainer, { alignSelf: 'center' }]}>
                    <Button colorScheme="muted" style={styles.button} onPress={() => navigation.navigate("Add")}>
                        Dodaj
                    </Button>
                </View>

Stack

        <StartStack.Screen
            name="Add"
            component={AddItemScreen}
            options={{ ...TransitionPresets.ModalTransition, cardStyle: { backgroundColor: 'transparent'}, animationEnabled: true, headerShown: false, headerLeft: () => <></> }}
        />

`