I have a react native app which uses react navigation (V6.x for sure). My app has a main navigator which is a bottom-tabs navigator and contains three screens (tabs). Every one of these screens are stack navigators themselves. Let's say one of my tabs is named Wallet (others are Settings and Transactions). Inside this Wallet screen (which is a stack navigator), i have a HomePage screen, a Receive screen and a Send screen. I want to achieve the following behavior (like below screenshot from designs):
Whenever the user goes to one of Send or Receive screens, i want all the tab bar buttons become unfocused (tab bar is still visibe though). And whenever the user gets back to HomePage screen (or going to Settings or Transactions tab by pressing the corresponding tab button), I want the relevant tab button to get focused again. How can i achieve that with react navigation itself?
(My project is managed by redux, but i prefer not to use state management tools and use react navigation itself)
You can do that, but checking child navigation state inside your TabNavigator's screenOptions.
screenOptions={({ route, navigation }) => {
// get wallet stack route
const walletStack = navigation.getState().routes.find((route) => route.name === 'Wallet');
// get current wallet stack focused screen
const walletRouteName = getFocusedRouteNameFromRoute(walletStack);
const shouldBeUnfocused =
walletRouteName === 'Send' || walletRouteName === 'Receive';
{...}
}
Based on shouldBeUnfocused you can render proper icons and colors. Here is the snack with example code. You can red here about customizing tab bar's appearance.
Related
Lets say the app has two tabs, the first one has 10 buttons, each button commands the second tab to show a different screen. And I want the new screen to replace the old one when the button is pressed; I don't want the new screen to stack on top of the old one.
So far I've achieved this by rendering all ten screens with a boolean state for each that determines whether it returns anything or not, but rendering them all at the same time has slowed the app down.
To replace a route in the navigation state you can use :
import { StackActions } from '#react-navigation/native';
navigation.dispatch(
StackActions.replace('Profile', {
user: 'jane',
})
);
source : https://reactnavigation.org/docs/stack-actions/#replace
When navigating between screens using the StackNavigator with a fade transition, a user is able to click during the transition animation and possibly hit a TouchableOpacity on the screen that is being navigated away from. The TouchableOpacity registers the hit and thus the app responds accordingly. This is causing issues for "fast clicking" users where they click a button to navigate to a new screen and immediately click where they think a new button will be, but in reality is clicking a button on the previous screen.
Is there a way to prevent any user interaction during these transition animations? I have tried setting the transition duration to 0 like so:
transitionConfig: () => ({
transitionSpec: {
duration: 0
}
})
but the issue still occurs.
I do not want to disable the animation completely, because it is quick enough for most users and they like the animation.
So in your case you can do several things
You can use React Native Activity Indicator -> View
You can use Overlay Library -> react-native-loading-spinner-overlay -> View GitHub
If you like to make loading like facebook / instagram -> then use react-native-easy-content-loader -> View GitHub
you need to flag screen before navigating away; disabling all touchs.
an easy way would be to have a reusable hook that return a transparent absolute positioned View that cover entier page and a callback to enable it;
so you flow will be; enable this which will overlap whole screen and capture any clicks basically disabling them;
something more like:
function useOverlay(){
const [isVisible, toggle] = React.useState(false);
const Component = React.memo(()=><View style={styles.transparentAbsolute} />,[])
return [toggle, isVisible ? Component : null];
}
then inside your Screen before you call navigate just call toggle
and include Component at top of you screen;
export default function TabOneScreen({ navigation }: RootTabScreenProps<'TabOne'>) {
const [ toggle, component ] = useOverlay();
return (
<View style={styles.container}>
{component}
<Button onPress={()=>{toggle(true); navigation.navigate('Home');} title="go home" />
</View>
);
}
I am using react navigation ("#react-navigation/native": "^5.1.3") and I have the following setup:
BottomNavigation
-stack1
-stack2
It looks like goBack() is local to the stack. What that means is that if I navigate from a page in stack1 to a page in stack2, I am unable to go the the page I came up from.
Solutions (or rather hacks) that didn't work for me:
pass the source screen as param and then navigate. That isn't a real back button and does not play well with android back button.
Put all pages in bottom navigation. Bottom navigation does not have animations it seems, so I can not achieve the right transitions
Put all pages in stack navigation. In this case I lose the fixed bottom navigation. I can add it to each page, but when transitioning it will go away with the old screen and come again with the new one, which is undesirable.
So I am wondering if I am missing something big here, like a globalBack() that I overlooked?!
And also, I am looking for a solution to this problem which remains.
Naturally if you have bottoms tabs with each tab having its own stack navigator, calling navigation.goBack() will go back from one screen inside stack navigator to previous screen inside that same stack navigator. That's how navigation works in pretty much every app. Pressing back button or swiping back does not change tab for you, tabs are more like separate small apps by itself. If you want to specifically jump from one tab to another instead of going back in stack, use navigation.dispatch(TabActions.jumpTo('Profile')). If pressing something inside tab#1 makes you go to to tab#2 then this screen most likely also belongs to tab#1
also, take a look at backBehavior prop of Tab.Navigator, it might be doing what you want depending on what exactly it is you want https://reactnavigation.org/docs/bottom-tab-navigator/#backbehavior
I'm using bottom tab navigator with 2 stacks as well. I faced similar issue and agree with #Max explanation. Due to my Notification screen is in Stack 1, I have to goBack to Notification after navigating away to Detail screen. After searching for the fix, I'm using this workaround (for v6).
Tab 1 - Stack 1 (Home > Notification screen)
Tab 2 - Stack 2 (Reward Home > Reward Detail screen)
I passed a param when navigating from Notification to RewardDetail. Then I override the headerLeft and use BackHandler to handle Android back function.
Notification.js
navigation.navigate('RewardStack', {
screen: 'RewardDetail',
initial: false,
params:{notification: notification_data_source}
})
RewardDetail.js
const payload = route.params.notification
//1. override headerLeft button
useLayoutEffect(() => {
if(payload)
navigation.setOptions({
headerLeft: () => (
<Button
TouchableComponent={TouchableOpacity}
buttonStyle={{paddingTop:4, paddingLeft:0}}
type='clear'
icon={<Icon name={'chevron-left'} size={30} style={{color:'#FFF'}} />}
onPress={()=>{
navigation.goBack()
navigation.navigate('Notification') //can use this only
}}
/>
)
})
}, [navigation]);
//2. Add BackHandler
useEffect(() => {
const onBackPress = () => {
if (payload) {
navigation.goBack()
navigation.navigate('Notification') //can use this only
return true
} else {
return false
}
}
BackHandler.addEventListener('hardwareBackPress', onBackPress)
return () => BackHandler.removeEventListener('hardwareBackPress', onBackPress)
}, [navigation]);
I can just use navigation.navigate('Notification') to return to Notification but this will cause Detail screen to stay mounted in Stack 2. I want the Stack 2 to return to RewardHome after go back to Notification. Hence I used:
navigation.goBack() //pop screen to RewardHome
navigation.navigate('Notification') //jump to Notification
I'm developing my first react native app. I've an issue with the nested navigations in the app.
I've the following navigations:
Main App Navigator : createStackNavigator
Authentication Navigator : createStackNavigator
Bottom Bar Navigator : createBottomTabNavigator
Top Tab Navigator : createMaterialTopTabNavigator
My too nested Navigator : createStackNavigator
What i want ?
I'm trying to hide the BottomBar & TopTab Navigators headers form a screen in the last nested navigator.
What I did?
Ive tried to set the header as null in my nested nav, but thats hides the nested header not the parents headers.
I also tried to set the parents headers as nulls, but thats hide them from all screen.
I need to only hide them in this nested screen. Can I change the parents headers property from my nested React Class?
Unfortunately, I didn't figure how to do that without using redux.
So I had to do a workaround.
I declared my Nested Navigator directly in the Main Navigator. "in the same level as Authentication & Bottom Bar Navigations" and set the header as null for this specific nav.
And then, navigate to that nested whenever i want.
Also, I had to add my custom icon to navigate the user back. because in our case there is no history in the new navigator in order to navigate back to.
so, i did like this:
static navigationOptions = ({ navigation }) => ({
headerLeft: (
<Icon
name="chevron-left"
color="#fff"
underlayColor="#4BA6F8"
onPress={() => {
const backAction = NavigationActions.back();
navigation.dispatch(backAction);
}}
/>
),
});
I know this is not the real answer for my question, but at least it solved my issue.
I have a nested navigator in my react native App
cost Main = createTabNavigator({
Home:Home,
Challenge:Challenge,
Products:Products,
Options:Options
})
const Options = createStackNavigator({
OptionsScree:OptionsScreen,
Details:Details,
Profile:Profile
})
I can navigate from Home screen to Details by simply doing this.props.navigationnavigate('Details')
but when I'm doing this.props.navigation.pop()
it is supposed to take me to last focused screen which was Home screen but it takes me to OptionsScreen
is there a way to go back to Home ?
Try moving Main tab navigator component into stack navigator as below.
const Options = createStackNavigator({
Main:Main,
OptionsScree:OptionsScreen,
Details:Details,
Profile:Profile
})
As Home screen is not present in stack, this.props.navigation.pop() can not pop that screen for you. It pops previous screen in the stack, if none pops the first screen which is in your case is OptionsScreen.