This is a React Native project that includes React Navigation and Redux.
I have two scenes, the first one contains a ListView and a Button to add a new element to the list. This buttons navigates to a new Scene where I fill up a little form to create a new record that will appear on the list of the first scene.
When hitting the save button and going back to the first scene (list view), mapStateToProps reflects the change but no other life cycle method is called (componentWillReceiveProps, shouldComponentUpdate, etc), none of them.
Now, both Scenes use connect from redux and I'm going back from Scene 2 to Scene 1 with the goBack() method from React Navigation. I'm wondering if redux get's "disconnected" from a view when showing a new one and how can I connect it back? Again, the mapStateToProps from the ListView scene is showing the data updated but it seems no props are being mapped.
It just seem the props don't refresh if the redux state value hasn't really change. Copying the list array before modifying it and then assigning it to the payload seems to fix the issue.
Related
Using react navigation I am forwarding an array and a function to update the array as params to a new screen. The new screen successfully updates this array, but the changes aren't seen on that screen. The changes are only seen when you return to the previous screen. What is the reason for this behavior and is there a way to go around it?
Im trying to build a mobile app where we have a constant header bar throughout the app. I have the body where I have buttons.. Each button navigates to a screen. I need the header bar in every screen but I dont wish to repeat the code in all screens. I dont intend to use TabNavigator either. Is there any alternative??
in image1 and image 2 the bar with the search,cart and offerzone tag remains same. The rest changes..I need this behaviour without repeating the header code in both screens.
You can separate the code of headerBar into a independent component, and use redux store to manage this component's props.
After you do this, you just need to import the component in each screen, the component will get its props from redux store automatically. Each screen can contact headerBar with redux actions
I am building an app where I am using Redux and the React-Navigation library. I have a list of workouts in a FlatList:
<FlatList
style={{ backgroundColor: colors.background }}
data={this.props.workoutsList}
renderItem={({ item }) =>
<ListItem workout={item} onPress={() => this.props.navigation.navigate('Workout', item)} />
}
keyExtractor={(item) => item.id}
/>
This shows my list properly, and I can navigate to the specific Workout page for each row I click on, and am provided the attached workout on each click. On this specific workout page, I have an Edit Workout form where users can, for example, update the name and time of the workout.
All of this is no problem...the issue I have comes when I press the back button on the menu that takes me back to the main list of all workouts. The FlatList is still showing the old data and is a source of my problem. It is caching this data so my new saves are not being shown, and as a consequence when I click on the list item again, it attaches the old workout information rather than the newest one I just saved. (hope that makes sense)
I have seen a somewhat similar question: React Navigation: How to update navigation title for parent, when value comes from redux and gets updated in child? but it does not quite encapsulate my main question:
Is it possible where a FlatList can update a specific row from a redux setup, while also maintaining it's scroll position?
I see this working extremely nicely on the Facebook app....as someone is scrolling down their Wall, let's say they click on the item saying "xx Comments". This will navigate the app to a page showing only this post. You can Like/Comment and when you press the back arrow, you are brought back exactly in the scroll position of the Wall you were before AND the number of likes/comments has been update to show your contribution. Is this possible in React Native?
If this is not possible...does anybody know how to at least refresh a page when navigating from a back button in React-Navigation?
EDIT I am open to using another navigation library if there is a better setup somewhere else!
UPDATE
I have attempted several ways to solve this problem, one way I tried was this:
When I made a successful save of the form, I dispatched an action of 'NEEDS_REFRESHING'. This set a redux prop that I picked up on the main FlatList page. In the render of that page, I had an:
if (this.props.needsRefreshing) {
console.log('Needs Refreshing');
this.props.getWorkouts();
}
I was seeing the console, and my FlatList page was properly refreshing (it wasn't bringing me back to the correct scroll position as it just refreshed the main list). but I always got a warning from React Native saying:
Cannot update during an existing state transition (such as within
`render` or another component's constructor). Render methods should be
a pure function of props and state; constructor side-effects are an
anti-pattern, but can be moved to `componentWillMount`.
When I moved this to componentWillMount, the proper refreshing changes were then never getting called and even a console.log in componentWillMount would not show up.
Have you try scrollToIndex(params: object) method? https://facebook.github.io/react-native/docs/flatlist.html#scrolltoindex
And also if you want to update your data inside flatList you should add extraData in Props
https://facebook.github.io/react-native/docs/flatlist.html#extradata
If you use react-navigation goBack() to a screen, that screen will never trigger componentWillMount because this screen never unmount, so please use redux instead.
I'm using React Navigation (https://reactnavigation.org) to handle navigation in my React Native app. The app structure consists of a StackNavigator with a bunch of nested menus. All the menus use the same MenuScreen component.
When I navigate through 2+ menus, then press the back button, the navigation bar title doesn't change back. It gets stuck on the title set by the "furthest" menu reached.
This makes sense, since I set the static navigationOptions property in the constructor of each successive MenuScreen, but never change it back. What is the best practice for fixing this?
One direction is to call the setState of the NavigatorIOS and so to make it rerender with new title/leftButton/right. However, in the context of the scene, it's not naturally ok to touch the NavigatorIOS, since in the props there is no ref to it.
Another direction is to try some method such as put/replace/... on the props.navigator, to change the navigation stack. The replace method seems to be a right choice, but nothing happened when I call it.
You can look at the NavigatorIOSExample of React Native.
The component is replaced, but there is currently no way to change the right button or title of the current route.