I'm learning react-native with redux and I'm trying to make a kind of social network application.
My problem is: when I'm on a user-1 profile screen and I navigate to user-2 profile, so basically I navigate from Profile.js to Profile.js (same screen) with different props. The problem is when I press the 'back' button, I get the user-2 profile while I should see user-1 profile.
The profile informations are saved in the store with redux.
For navigation I use Actions.sceneKey() from react-native-router-flux.
I already tried :
this.props.navigation.navigate('profile', { key: someRandomKey });
I get "Promise returned from navigate is ignored".
T also tried to save every user profile informations that I visit in an array but I don't know how to manipulate this array when I press back button...
Related
In a react-native project, I want to navigate to my Dashboard after user successfully logs-in. But both screens are in different groups inside the same navigator (see screen below):
But navigating as usual does not work:--> (ERROR The action 'REPLACE' with payload {"name":"Dashboard"} was not handled by any navigator.)
Any idea how to achieve that?
I am working on a APP, where I created a button that navigates you to other page. I imported react native router and use history from react-router dom.
I created seperated folder with login routs (when user is on login screen he can move to sign-up)
Loginrouts.js :
than I created login.js where the button is, it uses useHistory.push() and it calls signup from loginroute.js
But when button is pressed it only shows blank screen, anyone knows why?
So basically here's what's going on, I have two navigation flows:
Products flow: I have a StackNavigator with two screens, the first rendering a list of all products in the stock, clicking on one product item would take you to the details screen as expected.
Admin flow: I have another StackNavigator where I'm rendering user products, basically the products that were added by the user (admin) into the stock, he can also add new products, delete, edit existing products. Any changes made by the user to his own products will be reflected in the products flow also since the global state will be updated.
Note: The two flows are conntected and accessible using a DrawerNavigator.
My issue
When the user opens the details screen after clicking on one of his own products and then navigates to the admin flow and deletes that product, I get an on error in the details screen because it's trying to render a javascript object that doesn't exist anymore which of course makes perfect sense.
My solution
So I figured since this error occurs only when the details screen has been already opened, meaning it's already in the navigation state's history, Im attempting to solve the problem by checking if the details screen is present in the routes array each time the delete button is clicked, if it's present, meaning the screen is loaded in memory, I try resetting the navigation state by keeping the previous state as it is and simply filtering out the details screen from the previous routes array and setting the new array as the new routes property.
Here's the code that attempts to reset the navigation state each time the delete button is clicked
navigation.dispatch(state => {
const routes = state.routes.filter(
route => route.name !== 'ProductDetail',
);
return CommonActions.reset({
...state,
routes: routes,
});
});
The problem is when I click on the delete button I get the following error
TypeError: undefined is not an object (evaluating 'action.target')
So where am I missing something? Any insight at all would be much apperciated.
I am trying to figure out displaying a screen with new information, which is already in stack.
The screen order is like
Profile A -> Followers List of Profile A (clicking on Profile B) -> Profile B -> Followers List of Profile B
Profile and Followers List are both screen files. When I switch screens, if the screen is already in stack, it goes to the previous one. For example, when I click on "Profile B" in "Followers list of Profile A", it goes back and shows "Profile A",because the profile screen is already in stack.
How can I generate a new screen which can be added to the stack?
Try navigate using push with adding extra key.
For example :
this.props.navigation.push('ProfileB', {
// others param,
key: maths.random().toString()
});
Note: do not use id of followers here, because if you click on same follower then it will match same idea, so it may be can go back. Which is not good. So used any random keys.
react-navigation-stack has 3 way of navigation between screens:
navigate: standard navigation, if you are navigating to a new screen not in stack, it pushes it in the so-said stack. If you navigate to a screen that's already been mounted, it will pop back to it.
replace: Takes thes current component and replaces it with the one you want to navigate
push: pushes a new component to the stack, creating a new instace of it.
Imaging a stack that's like:
screen 3
screen 2
screen 1
Using push you will be able to start another instace of screen 1.
this.props.navigation.push("screen 1")
Will leave the stack as:
screen 1
screen 3
screen 2
screen 1
The problem with this method is that, if navigating back, you'll be brought to the previous instances of the screen with the old data
I used react-native-navigation drawer. I have a sidemenu that displays the name of the logged-in user. Now I want this name changed whenever the user updates his profile. I really dont know how to go about this. On the profile page I imported the Sidemenu like below
import SideMenu from './SideMenu';
and I did
new SideMenu().updateState("new name");
UpdateState(name) is a method in sideMenu that sets state that displays name. Name is not getting changed