Usage with react-navigation

[eidermaen]

In my react-native project I'm using react-navigation for navigating through my various screens. However, I would like to customize their header and use for example a parallax header.
According to the react-navigation documentation it is possible to customize the header like following:

import {createStackNavigator} from '@react-navigation/stack';
const Stack = createStackNavigator<RootStackParamList>();

const Navigator = () => {
    return (
        <Stack.Navigator screenOptions={{header: props => <MyCustomHeader {...props} />}}>
            <Stack.Screen name="Screen1" component={ScreenOne} />
            <Stack.Screen name="Screen2" component={ScreenTwo} />
            <Stack.Screen name="Screen3" component={ScreenThree} />
        </Stack.Navigator>
    )
}

So in this case MyCustomHeader should be the component to render the sticky parallax header. However, this is not working because the header is fixed and won't change on scroll.

Do you know, if there is any other possibility to use these both libraries?
For sure, one workaround would be to implement the sticky header separatly on each of the screens but maybe there is also another way I didn't think of?!
Thanks!

EDIT: I had something like this in mind:

parallax-header.mp4

[mateusz1913]

Hi @eidermaen, unfortunately it's not possible to integrate this library into react-navigation header setup. Sticky Parallax Header library provides scroll components with sticky header support. If you want to render one of those scroll components inside react-navigation screen, the only way is to render them "fullscreen" and disable default react-navigation header (passing header: () => null as one of navigation options).