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("");
},[]);
Related
First-of-all I apologise because I'm new to this concept of redux haha so bare with me here :)
I have implemented a very simple redux in my app
I have one screen here ListAnItem
Here there is a button.
Add size when pressing this they get navigated to another screen called SizeSelector
SizeSelector
here there is a button called dispatch size when they press this button it runs the following.
dispatch({type: "ADD_SIZE", payload: size })
this works perfectly with useSelector.
once this dispatch has been run I use navigation.goBack() to send the user back to the ListAnItem screen.
but once they come to this screen I want to add this useSelector redux state value to a useState hook something like this;
const [sizeState, setSizeState] = React.useState(null)
how can I change this state the minute something has been added to useSelector value of ADD_SIZE.
if that makes sense 😂.
Thanks,
Arnav.
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.
There is some way to rerender a component after closing the drawer navigation (from
React-Navigation library)? Like an event or something like that?
Let me explain my problem: I'm not using a drawer navigation only for navigation purposes but also for settings in my app. For that reason, I want to change, for exemple, the language in my app and rerender the component behind the drawer (check the image). How can I achieve this?
Hope you can help me, thank you!
1) - Connect drawer to redux
2) - Dispatch and event when a setting is changed.
3) - Connect the component that needs re-rendering to redux settings state.
If the state is changed the component will automatically be re-rendered.
If you are not using redux you could try MobX or other alternatives:
https://medium.com/#machnicki/why-redux-is-not-so-easy-some-alternatives-24816d5ad22d
Without a proper state management what you want to achieve would probably add many ugly workarounds in the code.
I have done what you want to do with Redux, and I think that it is a good idea to use it.
Having said that, here is some code to know when the drawer is closed:
const defaultGetStateForAction = DrawerStack.router.getStateForAction;
DrawerStack.router.getStateForAction = (action, state) => {
switch (action.type) {
case "Navigation/DRAWER_CLOSED":
// Drawer is closing code goes here...
break;
}
return defaultGetStateForAction(action, state);
};
I am getting an object undefined exception during a transition from one screen to another. I have a pretty good idea what is happening, I am just not sure if there is a clean way of handling it without just checking for undefined everywhere.
Here is my scenario:
Source screen references a user object in a Redux store
Navigation is initiated from the source screen to the destination screen.
The destination screen componentDidMount() is called where I clear the user object from the Redux store.
The source screen render() gets called again and the undefined error occurs because I cleared user from the store.
I am assuming that the source and destination screens have some overlap due to the transition. I have tried adding listeners with no luck. I can only get listener handlers to fire for type = action,
I am probably making this more complicated than it is, but I would like to find out if there is a standard way of dealing with this or if I am going about it in a completely wrong way.
Also, my react-navigation is integrated with Redux as per the instructions on React Navigation's website and the Redux React Navigation sample code.
Here is the basic code.
Screen 1
componentDidMount() {
// This is a Redux action that sets an object called user to null
clearUser();
{
Screen 2
render() {
return (
// Other code here
// user is null here because render gets called after Screen1#componentDidMount() gets called
<Text>{user.firstName + ' ' + user.lastName}</Text>
<TouchableOpacity
onPress={() => navigation.dispatch({ type:'NAV_SCREEN_1' })}
>
// button code here
</TouchableOpacity>
// Other code here
)
}
The type of error is "TypeError: Cannot read property 'firstName' of null"
I understand the error and why I am getting it. The user object has been set to null by my Redux action in componentDidMount() of Screen 1 and then Redux causes render of Screen 2 to get called which is referencing a user object which is null.
My question is, is there a special way to accommodate this behavior without having to check if the user object is null every place I need to use it ? Should I call clearUser() somewhere else ?
For the newest version of react-navigation, you can use either addListener, withNavigationFocus or isFocused to detect transition state of the screens.
Another unofficial way is to catch action type NavigationActions.COMPLETE_TRANSITION, in case of using middleware like redux-saga.
As an alternative, you can simply make your Redux-connected screen handle undefined or null state. I had a similar problem and I ended up rendering a loader instead of the screen content when user state is undefined. When I log out, the screen shows a loader for a fraction of a second, then the app navigates away.
I am new in React Native ...just want ask nub question, my App wont triggered componentWillMount and componentDidMount when navigate back to other page,
I use react-native-router-flux for navigator
componentWillMount() {
this.props.searchRequest();
}
exp: I have homescreen and categories, from home I want go to categories: on categories I have that code, but sometime when I back to previouse page (homescreen) and back again on categories componentWillMount not triggered sometime,
I think my categories scene not unmounted
We can detect props change with
componentWillReceiveProps()
but we need set state to accommodate new props value,