I have submitted a fix here: https://github.com/ntdiary/react-navigation/commit/b43b386f30f5eaf84c07100dc233c81b8eaa92e2 we couldn't know exactly when the transition will end, because InteractionManager.runAfterInteractions() is not working properly on the web platform. I'm not quite sure if this is an issue or a feature. Hope we can improve it. And I temporarily changed the example demo to demonstrate. Glad to contribute if posible 🙂

On tablet in portrait mode it should be awesome to have a tab bar at the bottom and a 1/3 pane left with a list container and at the right side of this pane a 2/3 pane with the detail view of the selection of the list item from the 1/3 part. On tablet in landscape mode, the tab bar should be better aligned at the left of the screen, and still having the 1/3 + 2/3 screen pane ratio. Actually, to be more clear it is a master(list) + detail layout.

There seems no object-based generating react-navigation. It would be good to build react-navigation based on object-based. We recently experimented with object-based like the below. import React from 'react'; import { Ionicons } from '@expo/vector-icons'; import { createStackNavigator } from '@react-navigation/stack'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { NavigationContainer } from '@react-navigation/native'; import { RootAppNavigators, resolveRootRoute } from '../../react-navigation'; import { Dashboard, Hello, Settings, PersonalInfo } from '../../pages'; export const Navigation = () => { const rootRoutes: RootAppNavigators = { MainStack: { container: createStackNavigator(), props: { initialRouteName: 'Guest', screenOptions: { headerShown: false, }, }, children: { Guest: { container: createBottomTabNavigator(), props: { initialRouteName: 'Home', screenOptions: { headerShown: false, tabBarLabel: 'About', tabBarIcon: ({ color }) => <Ionicons name="person" size={24} color={color} />, }, }, children: { Home: { props: { initialParams: {}, component: Dashboard, options: { headerShown: true, tabBarLabel: 'Home', headerTitle: 'Home', tabBarIcon: ({ color }) => <Ionicons name="home" size={24} color={color} />, }, }, }, About: { container: createStackNavigator(), props: { initialRouteName: 'Hello', }, children: { Hello: { props: { initialParams: {}, component: Hello, options: { headerTitle: 'About', }, }, }, PersonalInfo: { props: { initialParams: { name: 'Test' }, component: PersonalInfo, options: { headerTitle: 'Personal Info', }, }, }, }, }, }, }, Setting: { props: { initialParams: {}, component: Settings, options: { headerShown: true, headerTitle: 'Settings', headerBackTitle: 'Back', }, }, }, }, }, }; const MainStack = resolveRootRoute(rootRoutes.MainStack, 'MainStack'); return <NavigationContainer>{MainStack}</NavigationContainer>; }; And the Wrapper which builds is here import React from 'react'; import { NavigatorItem, isStackOrTab } from './types'; const childrenToRoutes = ( children: { [name: string]: NavigatorItem }, parentNavigator: NavigatorItem, parentRouteName: string, ) => Object.entries(children).map(([key, child]: any) => resolveRoute(key, child, parentNavigator, parentRouteName)); const resolveRoute = ( routeName: string | null, route: any, // parentNavigator: NavigatorItem, parentNavigator: any, parentRouteName: string, ) => { if (isStackOrTab(route)) { const navigatorRouteName = parentRouteName + (routeName === null ? '' : '.' + routeName); const navigator = ( <route.container.Navigator {...route.props} key={navigatorRouteName} children={childrenToRoutes(route.children, route, navigatorRouteName)} /> ); if (!parentNavigator) { return navigator; } else { return ( <parentNavigator.container.Screen key={navigatorRouteName} name={navigatorRouteName} children={() => navigator} /> ); } } else { const { component: C, ...rest } = route.props; const screenName = parentRouteName + '.' + routeName; return <parentNavigator.container.Screen {...rest} key={screenName} name={screenName} children={() => <C />} />; } }; const resolveRootRoute = (rootRoute: NavigatorItem, rootRouteName: string) => resolveRoute(null, rootRoute, null, rootRouteName); export default resolveRootRoute; Please let me know if anyone has any thoughts on improving it. Can we create this feature in the react-navigation repo itself?

We should be able to create custom animation by switching from a tab to another

Currently, all navigation events are emitted after the destination screens first renders. (including 'blur' event from the previous screen) We would love an event that gets emitted as soon as a navigation call is made. e.g. navigate/pop/push etc

Option to switch between tabs with no animation between screens, but keeping the indicator animation tough. In my case I need it for createMaterialTopTabNavigator 5.x I'm opening a new request in case this is something easier to implement than https://react-navigation.canny.io/feature-requests/p/tabnavigator-custom-transition

Update the community module so that Theming takes in ColorValue instead of a string hex value to allow for using the RN PlatformColor API. Using a string hex value makes it more challenging to get a native look and feel for each platform without forking code.

In CommonActions.tsx the type "ResetState" is defined but not exported

It would be useful to have something similar to createMaterialTopTabNavigator's "tabBarPosition" (react-native-tab-view.), so that the bar can be positioned at the top (looks like it requires a minor change to BottomTabView https://github.com/react-navigation/react-navigation/blob/master/packages/bottom-tabs/src/views/BottomTabView.tsx#L125 ).

Hi, I have some very anxious user that won't wait the navigation to finish to start tapping the screen. I get lots of bug reports where buttons are being touched while the navigation is transitioning. For example, a modal opens in another view.