TabNavigator Custom Transition
complete
satya164
complete
Added in React Navigation 7 https://reactnavigation.org/docs/7.x/bottom-tab-navigator#animations
satya164
in progress
C
C.T. Bell
Could we please have a just a few default options. e.g: Opacity, slide, opacity and slide
K
Kenny Wood
any news on this or any potential work arounds?
Khalil Néchi
I've tried another solution, you can use createMaterialTopTabNavigator() instead and change the tabBarPosition prop to "bottom",here is an example:
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
const Tab = createMaterialTopTabNavigator();
const app= ()=>{
return(
<Tab.Navigator tabBarPosition="bottom">
<Tab.Screen name="Home" component={HomeScreen}/>
<Tab.Screen name="AddProposition" component={AddProposition}/>
</Tab.Navigator>
)
}
Khalil Néchi
is there any news about adding transition feature with the createBottomTabNavigator in v5
satya164
Can you share some examples for what kind of transitions you want?
Gregory Orton
satya164: I did. See below....
Mustafa Talib
satya164: in bottom tab navigation any transition can be useful like fade in fade out or sliding left and right
Fernando Rojo
satya164: The Netflix iOS app has smooth transitions from tab to tab. It animates its opacity and transforms on the x axis based on the direction you went in.
Dhriti Dhall
Gregory Orton: please provide the example of the code
Gregory Orton
Or simple add a default transitions. I feel like android or ios, this should be an opacity fade in / fade out transitions for tabs. There needs to be feedback that the tab is changing.
Harshul Sharma
We could also make custom tansitioner to get such functionality it has great control over this stuff.