I want to embed a stack navigator inside a Custom Modal component. Is there a way to do that with react navigation v4?
Basically I have a ModalCustomComponent, which is a filter Modal, and inside that I want to use a stack navigator to show different filter stages. I don't want to use the default react navigation modal mode but my own custom component only.
I don't know, is it possible to use stack navigator inside modal.
but for filter stages inside modal, I use this code
const [indexStage, setIndexStage] = useState(0)
const stages = [<FirstStage/>,<SecondStage/>,<ThirdStage/>]
return <Modal>{stages[indexStage]}</Modal>
Related
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.
I would like to know if it's possible to set the state to the initial state values whenever we press back the button in the tabBar ? At the moment, when I leave the tabBar and come back after a few navigation in the app, the infos that the user enter in TextField persist.
Thanks !
You could use React hooks to achieve similar results to lifecycle methods in class functions.
The useEffect method runs on component render. You can set the state in there.
const [currentState, setCurrentState] = useState(null);
useEffect(()=>{
// This will run after 1st render
setCurrentState("");
},[]);
I have a button on my header right that open up a drop down component. The component allow user to make some selection and apply it after the user hit the 'apply' button.
After the apply button pressed, it should be able to pass the value back to the 'main screen' component. How do I pass the value back to the 'main screen' ?
This is my interface , if you're wondering what I'm trying to do.
edit
I tried to pass in the useState function to the header component to update the state after the apply button pressed by passing it using the setParam from react navigation props. Is there any other better way to get the value ??
You can do it simply like:
props.navigation('Home', { state: SOME_VALUE });
Here is the react navigation doc to do this.
React navigation passing params to previous screen
Or you can use redux store.
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 am using the Navigator component for React Native and so far so good, but ...
I can't seem to push() to the navigator from within the same component. Here is an example:
updateNav(){
navigator.push({page: 'newPage'});
}
render(){
return (
<Navigator initialRoute={{page: INITIAL_TAB}} />
)
}
When I call
updateNav()
I get an error saying that 'navigator' is undefined.
Also, I can pass the navigator to children and update the Navigator from the children via 'props' with no problem. But I have a case where I need to update the push to the Navigator from within the same component that has the Navigator component.
The navigator is a property that you pass down to your scenes, so it won't be available in the same component you're rendering Navigator. I ran into this issue too and just moved up the Navigator to a higher component and made the current one the initial route.
I think navigator should be on your props
this.props.navigator