moduleContext for GroupChannel providing safeFallback value instead of the current channels context value

1

So, we want to customize the GroupChannelFragment, wherein we want to replace the default header component for GroupChannelModule with our CustomHeader component.

We want to pass headerTitle to our CustomHeader, and therefore accessing it’s value from sendbird GroupChannelModule’s context ( GroupChannelContextsProvider ). The code that we have implemented to achieve our use-case so for is described below:

const GroupChannelScreen = () => {
  const { params } = useRoute();
  const { sdk } = useSendbirdChat();
  const navigation = useNavigation();
  const { channel } = useGroupChannel(sdk, params.channelUrl);

  const CustomGroupChannelFragment = ({
    channel,
    onChannelDeleted = NOOP,
    onPressHeaderLeft = NOOP,
    onPressHeaderRight = NOOP,
  }) => {
    if (!channel) return null;
    const { headerTitle } = useContext(GroupChannelContexts.Fragment);
    console.log("title value", headerTitle); // "title value" ""
    const CustomGroupChannelModule = createGroupChannelModule({
      Header: CustomHeader,
    });

    return (
      <CustomGroupChannelModule.Provider
        channel={channel}
        enableTypingIndicator={true}
        keyboardAvoidOffset={20}
      >
        <CustomGroupChannelModule.Header
          title={headerTitle}
          onLeftArrowPress={onPressHeaderLeft}
        />
      </CustomGroupChannelModule.Provider>
    );
  };

  return (
    <CustomGroupChannelFragment
      channel={channel}
      onChannelDeleted={() => {
        // Navigate to GroupChannelList function.
        navigation.navigate("GroupChannelList");
      }}
      onPressHeaderLeft={() => {
        // Go back to the previous screen.
        navigation.goBack();
      }}
      onPressHeaderRight={() => {
        // Navigate to GroupChannelSettings function.
        navigation.navigate("GroupChannelSettings", {
          channelUrl: params.channelUrl,
        });
      }}
    />
  );
};

As you can see, headerTitle console’s empty string. When we checked sendbird moduleContext file ( moduleContext.tsx ) for GroupChannel, we got to know that the value we are getting is the safeFallback value for the GroupChannelContextsProvider.

Screenshot 2023-04-14 at 1.53.39 PM
Screenshot 2023-04-14 at 1.53.39 PM1356×764 94.5 KB

What are we missing here? Why are we getting the safeFallback value for the context we are using? We want the headerTitle value for current groupChannel we are in.

PS: we have checked our imports, seems to be correct.

import { GroupChannelContexts } from "@sendbird/uikit-react-native";
2

Update: above query is resolved

3

Hello @Namrata_Jain!

I’m happy to hear that you were able to resolve the issue. Could you please share some details about what happened and how you resolved it?

4

We were not able to access the headerTitle value from moduleContext and was getting a safe fallback value. We get a safe fallback value of a context in a case when we forget to wrap our components (components in within which we are trying to access the context value) with a Provider.

In our case, we were wrapping our components with a Provider, but we were trying to access the context value outside Provider (in a component which is not subscribed to Context changes) and therefore was giving a safefallback value i.e. an empty string for header title.

So we removed our context from the place we placed it earlier and moved it to the component which has a subscription to context changes, which can access context value, which is a child component of the Provider.

And that’s how we were able to resolve our issue.

Since a Provider allows its child components to subscribe to context changes and access it values