How to implement a multiple group chat in react-na

Question

I am beginner to ReactNative.

I saw Chat in React Native and I have a similar question.

I want to have multiple group-chats with each group-chat having a complete different history of messages.

Standard way, as I get it, would be to re-use the same Chat component (e.g. GiftedChat) in the Apps render-function and pass the state with the messages of the current group-chat.

But this always takes a lot of time to re-render - how could I "store" the views of different group-chats to bypass the re-rendering?

Is there a way to dynamically add view components and just show/hide them?

Answer 1

I found a solution myself.

I tried around with the different navigators in ReactNative and noticed, that route-items of StackNavigator are instantiated every time you navigate there.

TabNavigators reuse the same instance.

Two steps to get the desired functionality:

1) disable the visibility of the TabBar:

const TabNav = TabNavigator({
    Home: { screen: HomePage},    
    Chat1: { screen: ChatScreen}  ,
    Chat2: { screen: ChatScreen}  ,
     // ...
    },
    {
        navigationOptions: ({ navigation }) => ({
            tabBarVisible: false,
        }),});

2) navigate manually - for example via a button:

<Button title="Chat1" onPress={() => this.props.navigation.navigate("Chat1") }/>

Have a look at a simple example:

https://github.com/chrisdie/AwesomeNavigation/blob/master/src/tabbar2/App.js