Screen navigation

Screen navigation is an integral part of building an app that lets users transition between multiple screens. After creating a fragment, you need to set up the navigation props in your screen and register the screen to a navigation library. In React Native, there are several different types of navigation libraries you can use to create a navigation structure. For this reason, Sendbird UIKit is built so that there isn't a dependency on one specific library.

The following table shows a list of fragments and the create fragment methods for each corresponding key function.

Note: To learn more about fragments, go to the fragment page under Architecture.

Once you create a new fragment using the create fragment method, you need to set up the navigation props in the fragment's properties such as onPressCreateChannel and onPressChannel. The navigation props act as an event delegate to execute custom navigation operations when an event occurs on the screen such as tapping on the create channel button.

import { Navigation } from 'react-native-navigation';
import { createGroupChannelListFragment } from '@sendbird/uikit-react-native';

const GroupChannelListFragment = createGroupChannelListFragment();

const GroupChannelListScreen = (props: { componentId: string }) => {
    return (
        <GroupChannelListFragment
            onPressCreateChannel={() => {
                // Navigate to create group channel screen.
            }}
            onPressChannel={(channel) => {
                // Navigate to group channel screen.
                Navigation.push(props.componentId, {
                    component: {
                        name: 'GroupChannel',
                        passProps: { channel },
                    },
                });
            }}
        />
    );
};

Once a fragment is created and the navigation props are set, you need to register the screen to a navigation library. This allows users to switch between the different screens.

import { Navigation } from 'react-native-navigation';

Navigation.registerComponent('GroupChannel', () => GroupChannelScreen);
Navigation.registerComponent('GroupChannelList', () => GroupChannelListScreen);

Note: While the example in the code above used React Native navigation, you can use other navigation libraries such as React navigation or React Native router flux.