reactjs - How to use the same component in different screens in a navigator with typescript?

Question

In my React Native (Expo) app I want to have a FriendsScreen and a OthersScreen in a MaterialTopTabNavigator. It's kind of a social media app. All of the user's friends are displayed in a list on the FriendsScreen. The OthersScreen shows users who have not yet been added as friends. However, since the two screens look almost the same, I wanted to use the same component for both screens (To reuse code and not have to copy and paste code when making changes).

That's why my navigator looks like this:

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const TopTab = createMaterialTopTabNavigator<TopTabParamList>();

export default function TopTabNavigator() {
    return (
        <TopTab.Navigator>
            <TopTab.Screen name="Friends" component={UsersScreen} /> // Friends: UsersScreen
            <TopTab.Screen name="Others" component={UsersScreen} /> // Others: UsersScreen
        </TopTab.Navigator>
    );
}

In order to be able to display small differences between the two screens, I wanted to give the UserScreen a route param named type.

export type TopTabParamList = {
  Friends: { type: 'Friends' | 'Others' };
  Others: { type: 'Friends' | 'Others' };
};

In the UsersScreen I want to use the type param to determine whether the UsersScreen should fetch the friends of the user or strangers from my server. But since I'm using Typescript, I don't know how to type the route prop.

interface Props {
  route: RouteProp<TopTabParamList, /*'Friends' or 'Others'?*/>;
}

Somehow I have the feeling that my problem should be solved differently...

Final question:

How can I have 2 tabs (screens) in a MaterialTopTabNavigator that use the same component in which I can determine which screen this component now represents, while everything is correctly typed with Typescript?

question from:https://stackoverflow.com/questions/65642335/how-to-use-the-same-component-in-different-screens-in-a-navigator-with-typescrip

Answer 1

You can just pass the current screen name ('Friends' or 'Others') to the component in the properties and then check what the current screen is in the component render() function. A bit like so:

render() {
    if (this.props.type === 'Friends') {
        return (componentForFriends);
    }

    return (componentForOthers);
}

You can also just include the screen name check when getting data like which people to display etc.

EDIT if your problem is with passing the properties to the components through the navigator I think you can also use it like this:

<TopTab.Navigator>
        <TopTab.Screen name="Friends">
            <UsersScreen type="Friends" />
        </TopTab.Screen>
        <TopTab.Screen name="Others">
            <UsersScreen type="Others" />
        </TopTab.Screen>
</TopTab.Navigator>