Search code examples
react-nativestack-navigatorreact-native-ui-kitten

How can Top Navigation component from UI Kitten can be used in React Native Stack Navigator as a custom header


I Have a custom header component designed using UI Kitten "Top Navigation" component (link below to examples) i would like to use that as a header on main page instead of the header Stack Navigator provides

https://akveo.github.io/react-native-ui-kitten/docs/components/top-navigation/overview#topnavigationaction

lets say use custom "Top Navigation" component called AppHeader in NotificationScreen

import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';

import routes from './routes';
import AppHeader from '../components/AppHeader';
import NotificationScreen from '../screens/notification/NotificationScreen';
import UserProfileScreen from '../screens/userProfile/UserProfileScreen';

const {Navigator, Screen} = createStackNavigator();

const StackNavigatorPage = () => (
  <Navigator>
    <Screen name={routes.NOTIFICATION_SCREEN} component={NotificationScreen} />
    <Screen name={routes.USER_PROFILE_SCREEN} component={UserProfileScreen} />
  </Navigator>
);

export default StackNavigatorPage;


Solution

  • import React from 'react';
    import {createStackNavigator} from '@react-navigation/stack';
    
    import routes from './routes';
    import AppHeader from '../components/AppHeader';
    import NotificationScreen from '../screens/notification/NotificationScreen';
    import UserProfileScreen from '../screens/userProfile/UserProfileScreen';
    import HomeScreen from '../screens/dashboard/HomeScreen';
    
    const {Navigator, Screen} = createStackNavigator();
    
    const StackNavigatorPage = () => (
      <Navigator>
        <Screen
          name={routes.HOME_SCREEN}
          component={HomeScreen}
          options={({navigation}) => {
            return {
              header: () => <AppHeader navigation={navigation} />,
            };
          }}
        />
        <Screen name={routes.NOTIFICATION_SCREEN} component={NotificationScreen} />
        <Screen name={routes.USER_PROFILE_SCREEN} component={UserProfileScreen} />
      </Navigator>
    );
    
    export default StackNavigatorPage;