I have a Screen for Main then it's push to Next for selection and passes parameters to next pushed screen and when you select something in that screen I need to pop(2) and send selected details to the main screen.
But pop didn't accept parameters. How to accomplish this.
I don't use Redux or MobX.
You need to do this
Screen A:
this.props.navigation.navigate('ScreenB', {
onPressScreenAFun: (params) => {
this.screenAFun(params)
},
})
screenAFun = (params) => {
console.log(params)
}
Screen B:
this.props.navigation.navigate('ScreenC', {
onPressScreenBFun: (params) => {
this.screenBFun(params)
},
})
screenBFun = (params) => {
const { onPressScreenAFun } = this.props.navigation.navigate.state.params
onPressScreenAFun(params)
this.props.navigation.goBack()
}
Screen C:
moveBack = (params) => {
const { onPressScreenBFun } = this.props.navigation.navigate.state.params
onPressScreenBFun(params)
this.props.navigation.goBack()
}
this is how you can pass params from Screen C to Screen A with two pop()
Related
I am trying to pass params to a detail screen for a blog post but the first time i navigate to the detail screen, the params don't get passed (shows null). then i back to original screen and click on a new blog post and it'll show params from the first blog post..
This is my function to navigate to detail screen with params:
const [blogSelected, setBlogSelected] = useState(null);
const onBlogDetail = (item) => {
setBlogSelected(item.id)
navigation.navigate( 'BlogDetail', { blog_id: blogSelected });
};
This is how i am receiving them in the detail screen:
const BlogDetailScreen = ({route}) => {
const blogID = route.params.blog_id
//Using the param in a url for an API call
const getBlogData = () => {
try{
axios.get('http://blog/'+blogID+/').then(res => {
console.log(res.data)
});
} catch (error) {
console.error(error);
}
};
}
Not sure why this is happening. Appreciate any help!! can provide more info too
try this,
const onBlogDetail = (item) => {
setBlogSelected(item.id)
navigation.navigate( 'BlogDetail', { blog_id: item.id }); // pass item.id here
};
I use react-navigation 5 and having issues because the params shows older values.
ScreenList.js
const handleFirstUser = () => {
const userDetail = {'name': 'First User'};
navigation.navigate('Details', { detail: userDetail});
}
const handleSecondUser = () => {
const userDetail = {'name': 'Second User'};
navigation.navigate('Details', { detail: userDetail});
}
The methods are called from a button and do go to Details Screen but the value is whichever was loaded initially:
ScreenDetails.js
const DetailsScreen = (props) =>{
const { navigation, route } = props;
const { params } = route;
const userDetail = params.name;
}
First time the app the loads, first user is loaded and correctly shows name. Then go back to the list screen, click user two. Still the first user is shown. I tried to clean up with useEffect but it doesnt have any effect:
useEffect(()=>{
return(()=>{
navigation.setParams({name: undefined});
});
}, [])
how can I reset setParams each it laods and use the values passed to it currently?
I am having 2 screens in a react native app, both the screens are functional components.
A button on screen 1 leads to screen 2, I select a few checkboxes on screen 2 and click on a button to navigate to screen 1 with adding navigation params.
coming back on screen 1 runs didFocus listener, but param values are undefined, when I hit ctrl+s on in code editor, useEffect runs and values become accessible.
After this, going back to screen 1 from screen 2 runs didfocus listener (as expected) but the param values do not update.
below is useEffect code in screen 1.
useEffect(() => {
navigation.getParam('from') == 'TagFiltersScreen' ? getAllQuestions('mostInsightful', navigation.getParam('tagsFilter')) : getAllQuestions();
const listener = navigation.addListener('didFocus', () => {
navigation.getParam('from') == 'TagFiltersScreen' ? getAllQuestions('mostInsightful', navigation.getParam('tagsFilter')) : getAllQuestions();
});
return () => {
listener.remove();
}
}, []);
I faced the same issue, and here is how I am doing it.
useEffect(() => {
const isFocused = props.navigation.isFocused();
if (isFocused) {
const { params } = props.navigation.state;
navigationFocus(params);
}
const navigationFocusListener = props.navigation.addListener('willFocus', (payload) => {
const params = payload.state.params;
navigationFocus(params);
});
return () => {
navigationFocusListener.remove();
};
}, []);
const navigationFocus = (params) => {
if (params) {
}
}
I'll be curios to know if there is a better way of doing this.
how to pass parameters in pop method.
Requirement: There are two screens, screen 1 has two tabs like this: Address and Billing. There are two button on each tab layout. On click button go to screen 2 after functionality back to screen 1 but now which tab is active. If go to address tab so back to address tab same as billing tab.
Tell me how to do it?
You can pass callback while pushing screen like
Navigation.push(this.props.componentId, {
component: {
name: "Your.ScreenName",
options: {
callback:this.yourCallBackFun
}
}
});
Now while pop you can call that function like
this.props.callback();
Navigation.pop(this.props.componentId);
I think it will help you.
Screen A:
this.props.navigation.navigate('ScreenB', {func: this.func});
...
func = value => {
console.log(value);
}
Screen B:
this.props.navigation.getParam('func')();
You can call ScreenA function like this.
Screen1:
Write your navigation function and callback function in your first screen.
Pass callback function as a navigation parameter white pushing the screen.
const cbFunction = () => new Promise((resolve) => {
resolve();
});
const navigation = () => {
const { componentId } = this.props;
Navigation.push(componentId, {
component: {
name: `SCREEN_NAME`,
options: {
cbFunction: this.cbFunction
}
}
});
}
Screen2:
Write a function to go back to first screen. And call callback function from navigation parameter.
const goBack = async () => {
const { cbFunction, componentId } = this.props;
await cbFunction();
Navigation.pop(componentId);
}
I'm using react navigation to navigate between my screens. I have a main screen (Main.js) and a screen called (Favorites.js).
I use this function to go to my favorites screen.
_btnFavoritos = async () => {
const movies = this.state.myFavorites;
console.log("Abrir Favoritos");
console.log(movies);
this.props.navigation.navigate('screenFavoritos', { movies: movies });
};
how is it possible to have a callback function so that when I exit my favorites screen and return to my main screen I trigger a function capable of updating my main?
Out of topic but I would remove the async keyword from _btnFavoritos unless your function has more code that requires it and you simply didn't add it here
The solution:
_btnFavoritos = () => {
const movies = this.state.myFavorites;
console.log("Abrir Favoritos");
console.log(movies);
this.props.navigation.navigate('screenFavoritos',
{
movies: movies,
updateMain: () => this.updateMain()
});
};
updateMain = () => {
// Sample update logic
fetch('https://someEndpoint.com')
.then(res => res.json())
.then(json => this.setState({ movies: json })
.catch(err => console.warn(err.message)
}
Favorites.js
componentWillUnmount(){
const { params } = this.props.navigation.state
params && params.updateMain && params.updateMain() // Checking that the function was passed down
// as a navigation prop before executing
}