Customize a fragment's title text?

Sendbird Chat UIKit React Native
,
1

I’m relatively new to UiKit V3, so I hope am mistaken on this one, but do I really need to customize the complete fragment header in order to accomplish something as simple as changing the title text?

(For context, the group channel list is the one I’m focusing on right now)

As developers we are usually in a time crunch and are expected to implement many features quickly, so spending time learning to use a customization API is a much bigger time commitment then just assigning a string to an exposed property.

I’m not sure why the choice was made (hopefully not) for fragments to hijack the screen navigation implementation without properly re-exposing at least the most common APIs for direct customization.

2

Hello @J_Arau
In the react-native ecosystem, navigation is not unified(react-navigation, react-native-navigation, expo-router, react-router, react-native-router-flux, navigation ), and some navigation libraries include their own headers. Therefore, it was not possible to implement the necessary header for constructing screens by relying on a specific navigation API, and the header had to be implemented as a separate component. :pray:

  • Basic text elements like the title of the fragment can be customized in StringSet.
import { SendbirdUIKitContainer, createBaseStringSet } from '@sendbird/uikit-react-native';
import dateLocale from 'date-fns/locale/en-US';

const myStringSet = createBaseStringSet({
  dateLocale,
  overrides: {
    GROUP_CHANNEL_LIST: {
      HEADER_TITLE: 'Group channels'
    },
  },
});

const App = () => {
  return <SendbirdUIKitContainer localization={{ stringSet: myStringSet }} />
}
  • If you want to use the navigation header instead of UIKit’s header, you can customize it through the Renderless pattern.
import { useNavigation } from '@react-navigation/native';

const RenderlessHeader = () => {
 const navigation = useNavigation();
 const fragment = useContext(GroupChannelListContexts.Fragment);
 const typeSelector = useContext(GroupChannelListContexts.TypeSelector);

 useLayoutEffect(() => {
   navigation.setOptions({
     headerShown: true,
     headerTitle: fragment.headerTitle,
     headerLeft: (
       <TouchableOpacity onPress={typeSelector.show}>
         <Text>{'Create a channel'}</Text>
       </TouchableOpacity>
     )
   })
 },[])

 return null;
}

const GroupChannelListFragment = createGroupChannelListFragment({ Header: RenderlessHeader });
  • To customize using the default header provided by UIKit, you can do the following when creating a Fragment. (However, in the props, only the minimum necessary data for header composition is passed.)
import { useHeaderStyle } from '@sendbird/uikit-react-native-foundation';

const GroupChannelFragment = createGroupChannelFragment({
  Header: (props) => {
    const { HeaderComponent } = useHeaderStyle();
    return (
      <HeaderComponent
        title={'Custom title'}
        titleAlign={'center'}
        left={'Back'}
        onPressLeft={props.onPressHeaderLeft}
        right={'Info'}
        onPressRight={props.onPressHeaderRight}
      />
    );
  },
});
  • While designing, there might be aspects that we overlooked from the DX perspective.
    If there are any areas that you think could be improved while using it, we would appreciate any feedback at any time!
1 Like