UIKit React Native v3
UIKit React Native
UIKit
React Native
Home
/
UIKit
/
React Native

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.

List of fragments

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

Key functionFragmentCreate fragment method

GroupChannelList

GroupChannelListFragment

createGroupChannelListFragment

GroupChannel

GroupChannelFragment

createGroupChannelFragment

GroupChannelCreate

GroupChannelCreateFragment

createGroupChannelCreateFragment

GroupChannelSettings

GroupChannelSettingsFragment

createGroupChannelSettingsFragment

GroupChannelInvite

GroupChannelInviteFragment

createGroupChannelInviteFragment

GroupChannelMembers

GroupChannelMembersFragment

createGroupChannelMembersFragment

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


Set up navigation in a fragment

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 },
                    },
                });
            }}
        />
    );
};

Integrate navigation library

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.