Two column layout in react native using reactnavigation

Question

I am trying to achieve two column layout if i click something inside tab (for example list of Chats) chat should show in right, now its appears inside left column

can you point me to correct way?

Answer 1

if someone needs this is how I make this

/* eslint-disable react-native/no-inline-styles */
import * as React from 'react';
import {Button, Text, View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

function ContactScreen({route}) {
  const {contactId} = route.params;
  return (
    <View style={{flexDirection: 'row', flex: 1}}>
      <Tab.Navigator
        initialRouteName="Contacts"
        style={{flex: 1}}>
        <Tab.Screen name="Chats" component={ChatsTab} />
        <Tab.Screen name="Contacts" component={ContactsTab} />
      </Tab.Navigator>
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Contact {contactId}</Text>
      </View>
    </View>
  );
}

function ChatScreen({route}) {
  const {chatId} = route.params;
  return (
    <View style={{flexDirection: 'row', flex: 1}}>
      <Tab.Navigator
        initialRouteName="Chats"
        style={{flex: 1}}>
        <Tab.Screen name="Chats" component={ChatsTab} />
        <Tab.Screen name="Contacts" component={ContactsTab} />
      </Tab.Navigator>

      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Chat {chatId}</Text>
      </View>
    </View>
  );
}

function ChatsTab({navigation}) {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>chats tab</Text>
      <Button
        title="open chat 1"
        onPress={() =>
          navigation.navigate('Chat', {
            screen: 'Chats',
            chatId: 1,
          })
        }
      />
      <Button
        title="open chat 2"
        onPress={() =>
          navigation.navigate('Chat', {
            screen: 'Chats',
            chatId: 2,
          })
        }
      />
      <Button
        title="open chat 5"
        onPress={() =>
          navigation.navigate('Chat', {
            screen: 'Chats',
            chatId: 5,
          })
        }
      />
    </View>
  );
}

function ContactsTab({navigation}) {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>contacts tab</Text>
      <Button
        title="open contact 4"
        onPress={() =>
          navigation.navigate('Contact', {
            screen: 'Contacts',
            contactId: 4,
          })
        }
      />
      <Button
        title="open contact 3"
        onPress={() =>
          navigation.navigate('Contact', {
            screen: 'Contacts',
            contactId: 3,
          })
        }
      />
    </View>
  );
}

const HomeStack = createStackNavigator();
const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <HomeStack.Navigator screenOptions={{headerShown: false}}>
        <HomeStack.Screen
          initialParams={{chatId: 0}}
          name="Chat"
          options={{animationEnabled: false}}
          component={ChatScreen}
        />
        <HomeStack.Screen
          initialParams={{contactId: 0}}
          options={{animationEnabled: false}}
          name="Contact"
          component={ContactScreen}
        />
      </HomeStack.Navigator>
    </NavigationContainer>
  );
}