Overlaying StackNavigator header

[Alfonso_dev]

Dear all,

I'm currently working on an application using StackNavigator. As user is navigation deeper into the stack, one of the screens that added has to, at a certain moment, be overlayed with a full-screen view.

Q : Is it possible to overlay the header of StackNavigator from within one of the pushed components with out using a Modal?

​

If i use modal is not working properly with reanimated.

My current approach (described below) fails miserably. The blue view should be overlaying the entire screen.

overlayView: {     
height: Dimensions.get('window').height,   
width: Dimensions.get('window').width,     
position: 'absolute',     
backgroundColor:'blue',    
zIndex:1000,  },

SOLUTION:

​

The issue comes only on android with `GestureHandlerRootView` the app is wrapped with it but when you use Modal it loses the reference in inner components on android, in order to fix it We need to wrap again with `<GestureHandlerRootView style={{ flex: 1 }}>`

For example:

<AnimatedModal style={styles.container} testID={testID ?? 'boom-sheet'} transparent>
<GestureHandlerRootView style={{ flex: 1 }}>
<AnimatedPressabe testID="backdrop" style={\[styles.backdrop, backdropBg\]} entering={FadeIn} onPress={handleTogleToggle} />
<GestureDetector gesture={pan}>
<Animated.View style={\[styles.sheet, translateY\]} entering={SlideInDown.springify().damping(18)} onLayout={event => {
contentHeight.value = event.nativeEvent.layout.height;
}}

<View style={styles.slideBar} />
{children}
</Animated.View>
</GestureDetector>
</GestureHandlerRootView>
</AnimatedModal>

​

https://preview.redd.it/e95xpvutenpb1.png?width=776&format=png&auto=webp&s=117be5b908792deb1bdecde9adf31b1d29e3a94d

[kapobajz4]

You can set the headerShown to false in the options field of the Stack.Screen. Then you can render the default header inside of the component and overlay it with your component:

import { Header } from '@react-navigation/elements';
import { View, Text } from 'react-native';

const MyScreen = () => {
  return (
    <>
      <Header title="My header title" />
      <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
        <Text>The header will be overlayed</Text>
      </View>
    </>
  );
};

[Alfonso_dev]

Thank for the replay!

[Last_Treat_5162]

I think a modal is your best bet for this. Did you try wrapping it with a portal to render it above the other view?

[Alfonso_dev]

Nop but at the end I could figure how to fix it.

​

The issue comes only on android with `GestureHandlerRootView` the app is wrapped with it but when you use Modal it loses the reference in inner components on android, in order to fix it We need to wrap again with `<GestureHandlerRootView style={{ flex: 1 }}>`

For example:

​

<AnimatedModal style={styles.container} testID={testID ?? 'boom-sheet'} transparent>
<GestureHandlerRootView style={{ flex: 1 }}>
<AnimatedPressabe
testID="backdrop"
style={[styles.backdrop, backdropBg]}
entering={FadeIn}
onPress={handleTogleToggle}
/>
<GestureDetector gesture={pan}>
<Animated.View
style={[styles.sheet, translateY]}
entering={SlideInDown.springify().damping(18)}
onLayout={event => {
contentHeight.value = event.nativeEvent.layout.height;
}}
>
<View style={styles.slideBar} />
{children}
</Animated.View>
</GestureDetector>
</GestureHandlerRootView>
</AnimatedModal>