I am using react-navigation in my project and I need to detect if the user is on the Dashboard/Graph/Posts page.
For example, if I am on Posts page, I need a param to write a conditional.
e.g. Make a request if I am only at Posts page
Is it possible to check on which screen the user is?
You can get it through navigation object, try it
this.props.navigation.state.routeName
You can try the following,
on componentDidMount
componentDidMount() {
this.subs = this.props.navigation.addListener("didFocus", payload => {
console.log("PAY_LOAD...", payload);
// Check the payload and your logic(you can get the current screen name like => payload.state.routeName)
});
}
on componentWillUnmount
componentWillUnmount() {
this.subs.remove();
}
Note: Don't forgot to remove listener on 'componentWillUnmount()'
Related
https://wix.github.io/react-native-navigation/docs/basic-navigation#navigating-in-a-stack
indicates that pushing a new screen to the stack requires the current screen's componentId. My use case is to allow navigating based on certain events emitted by a native module. As such, componentId won't be available to me, since the event listener would reside outside any React component screen. Is there any way to navigate to a screen from outside in RNN? Or even get the current componentId.
I ended up adding a command event listener to store the current componentId in closure.
let currentComponentId;
Navigation.events().registerCommandListener((name, params) => {
if (name === 'push') {
currentComponentId = params.componentId;
}
});
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setRoot(rootRouteConfig);
EventEmitter.addListener('navigate', (name) => {
Navigation.push(currentComponentId, {
component: {
name,
},
});
});
});
I have a basic tab navigation HOME-UPLOAD-PROFILE. 'HOME' screen has values which fetch with an api from a different web site. After user log in navigation system direct user to this home page and "fetch" working well. But when i upload something using 'UPLOAD' screen and then return 'HOME' screen datas not updating. Whereas 'componentDidMount' should works everytime and bring datas every clicking 'HOME' screen I could not find any solution or answere
export default class Home extends Component {
state = {
data: []
};
async componentDidMount() {
//Burada kullanıcı yoksa ülkeleri getireceğiz
const rest = await fetch(
'https://www.birdpx.com/mobile/fotografgetir/' + this.state.page,
{
method: 'POST',
headers: {
Accept: 'application/json',
'Content-type': 'application/json'
},
body: JSON.stringify(datam)
}
);
const gelenVeri = await rest.text();
let convertedVeri = JSON.parse(gelenVeri);
this.setState({
data: convertedVeri
});
}
}
You can check by logging if componentDidMount is triggered.
componentDidMount won't be triggered when you navigate between tabs in tabNavigator, except for the first time when tabNavigator is mounted.
You can choose one of the following 2 ways to implement what you need.
1. Use global redux state instead of component state. (Recommended)
You can implement redux to your project (if you aren't using). Use redux state in Home component instead of current component state.
On Upload screen, once uploading is done you can change the redux store by dispatching an action. This will instantly reflect on your Home component.
2. Fetch data on component focus event
If you want to catch the focus event for a specific tab component, you can use didFocus event listener of navigation lifecycle.
const didFocusSubscription = this.props.navigation.addListener(
'didFocus',
payload => {
console.debug('didFocus', payload);
}
);
// Remove the listener when you are done
didFocusSubscription.remove();
If you are using react-navigation, components do not unmount when you navigate from one screen to the next on a stack navigator.
You can listen to navigation lifecycle events in a component (https://reactnavigation.org/docs/4.x/navigation-prop/#addlistener---subscribe-to-updates-to-navigation-lifecycle)
or if you are using withNavigationFocus HOC for passing navigation prop to a component you can use the isFocused prop to know about the recent focus on you component.
In my react native (Expo) application the user has the possibility to select images for a group from the gallery to upload them to the server.
When the User selects the images in the Mediapicker Screen i store the list of the uris in the Asyncstorage and navigate back to the "group screen".
Here i read the data from the asyncstorage
_retrieveUpload = async () => {
try {
const value = await AsyncStorage.getItem("upload_que");
if (value !== null) {
this.setState({ uploadQueue: JSON.parse(value) });
}
} catch (error) {
console.log(error);
}
};
in the next step i created a component which takes this.state.uploadQueue as property, iterate over the values and upload them to the server.
This is working as long as the component is mounted and the user does not leave the screen.
I read that there is no possibility for a background-task in expo, but how can i start something like a service which runs independent from the actual mounted component?
First of all, can you post you Upload Component source code for more details.
Also please try in your upload code if you have await syntax, remove it and work with 'promise' and 'then' syntax if you need to do something after upload.
I am creating an app in React Native (create react native) and I am attempting to fetch data from an API every time a user transitions to a screen.
For navigation, I am using the React Navigation library with a combination of Drawer and Stack Navigators.
Typically, I have seen fetch handled via the ComponentDidMount() lifecycle. However, when navigating to a screen in a stack navigator, the ComponentDidMount() lifecycle doesn't appear to trigger and the fetch doesn't run.
Ex. user is on post index, then navigates to add post screen, submits and is redirected to view screen (for that post), then clicks back to return to index. Returning to index does not trigger ComponentDidMount() and fetch isn't run again, so results are not updated.
Additionally, sometimes I need to access navigation params to alter a fetch request when navigation between screens.
I originally was attempting to determine screen transition (when navigation params were passed) via componentWillReceiveProps() method, however, this seemed a bit unreliable.
I did more reading and it sounds like I should be subscribing to listeners (via react navigation). I am having a hard time finding recent examples.
Current process (example)
On the desired screen I would subscribe to listener(s) in the componentDidMount() method:
async componentDidMount() {
this.subs = [this.props.navigation.addListener('willFocus', payload => this.setup(payload))];
}
Based of an example, it sounds like its good practice to remove all subs when unmounting the screen, so I also add:
componentWillUnmount() {
this.subs.forEach((sub) => {
sub.remove();
});
}
then I add a setup() callback method that calls whatever fetch methods I require:
setup = (payload) => {
this.getExampleDataFromApi();
};
Additionally, sometimes I need to access Navigation params that will be used in API queries.
I am setting these params via methods in other screens like so:
goToProfile = (id) => {
this.props.navigation.navigate('Profile', {
exampleParam: 'some value',
});
};
It seems like I cannot access the navigation prop via the provided getParam() method when within callback method from a navigation listener.
For example, this returns undefined.
setup = (payload) => {
console.log(navigation.getParam('exampleParam', []));
};
Instead I am having to do
componentDidFocus = (payload) => {
console.log(payload.action.params.exampleParam);
};
Question
I wanted to ask if my approach for handling fetch when navigating seems appropriate, and if not, what is a better way to tackle handling API requests when navigating between screens?
Thanks, I really appreciate the help!
I am using redux and react native in my mobile application.
I want to redirect to another screen based on API response. I don't know how to do that.
I have used action, reducer and store in my application.
Can you please help me to find standard solution?
Thank you in advance.
One approach to handle user navigation, for instance registering a user is to first define three actions : register, registerSuccess, registerError.
The one responsible for handling navigation will be registerSuccess that will only return a type 'REGISTER_SUCCESS'.
Then you're reducer will look like this (i'm using immutable.js https://facebook.github.io/immutable-js/docs/#/)
const initialState = fromJS({
submitSuccess: false,
});
function reducer(state = initialState, action) {
case REGISTER_SUCCESS:
return state.update('submitSuccess', (v) => !v));
default:
return state;
Then in your container you can use componentWillReceiveProps to redirect your user
componentWillReceiveProps(nextProps) {
if (nextProps.submitSuccess) {
// redirect your user
}
}
See doc how to connect navigation to Redux -> https://reactnavigation.org/docs/guides/redux