Two column layout in react native using reactnavigation - react-navigation-v5

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>
);
}