I am using react-native, nested react-navigation, SectionLists, ActionSheet, etc and I am having hard times setting up a decent way of refreshing components / screens. As I have a few different cases, I have also tried different approaches with no luck.
Examples:
- Sending a callback function as a param in the navigator when transitioning from one screen to another for state change.
- Assigning AsyncStorage.getItem straight to a state variable (e.g: used on a ListView) and expect it to refresh.
I've seen many questions in the react-navigation git repo (mainly on how to refresh a screen), and recent suggestion to the project on the best approach for future releases, that got me asking if this is something that is in place already.
I can say though, that I've successfully used redux to check the connection state (NetInfo), that although I couldn't yet port the same idea to a different schenario, I think that it is my best approach.
At the moment I have one schenario, that if solved, I believe will answer a few questions I have. For example:
I have a list of news in my Home screen and a few options in my Drawer navigator that I would like to, when clicked, to sort the Home list, without having to call navigate('screen_name') as I would like to, to still keep the Drawer opened after clicked.
What would be the best approach for this ?
Thanks in advance!
One approach you could follow is:
On click on a DrawerNavigator item, you can dispatch an action which would intern change the state by a value. Eg: filterBy: . This store value can be passed as a prop to your home screen, which would intern contain a logic to filter based on that value.
I havent worked with DrawerNavigator but i feel onPress on each item in drawer navigation can be prevented and a action can be invoked at the same place.
Related
I have an application with drawer navigation that uses buttons to navigate to different screens.
In terms of accessibility, should I use accessibilityRole='button' or accessibilityRole='link' for the buttons.?
React Native AccessibilityRole docs say
link Used when the element should be treated as a link.
For external links accessibilityRole='link' is clearly the best option. But should I use it for internal navigation, too?
Note: I do not use deep links in my application.
Thank you for your help.
The Link component
renders a component that can navigate to a screen on press.
The Button component is a component that performs a certain action if the user presses it. A Button could be considered a Link if its onPress function navigates to a screen, by definition of the Link component. The Link could be styled to look exactly like a Button and vice versa. There would be no difference.
If we refer to general URL linking which includes deep linking, then we notice that the link functionality needs a UI component as well in order to function. This could be Markdown, the Link component or again the Button.
I personally would use accessibilityRole='button' for every UI component that is the actual Button component or functions (and 'looks') like a button in my application (TouchableOpacity, Pressable, ...), since this is what a user whose disability prevents him from noticing needs to know or wants to visualize. This includes the Drawer buttons.
I would use accessibilityRole='link' for text which is styled too look like a link (text with some highlighting) and navigates somewhere (this could be a website as well).
In general, I would keep in mind that the user wants to visualize the component. While a button, that navigates to a screen, is technically a link by definition of its functionality, it is not a 'typical link' when speaking of visual appereance (but again, we could style our button exactly like that...).
What is generally more important is the accessibilityHint which
helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
The 'what will happen if I click' is certainly more important than 'what the component looks like'.
I have two independent screen
Login Screen
DashBoard
Now on the login screen i store the requested API data inside the state (this.state.data) and that stored data I want to show on the dashboard screen for example the name or the age or the country or whatever. Now how do I sync both of these screens, I am using React Navigation 2.0
On success of a login request you need to change your current component to the Dashboard component, which -
Can be done in two ways
If you are replacing the component then you can call <Dashboard data={this.state.data} /> and fetch it in your Dashboard screen as this.props.data
If you are navigating to the component, you can do it via this.props.navigation.navigate('Dashboard', { data: this.state.data }); and then in your Dashboard component you can fetch it via this.props.navigation.state.params.data
Hope it helps :)
If you are doing a small project, you can do this via props, as explained by #Aseem Upadhyay
But note that this method becomes ineffective as your project grows. Imagine that you have multiple screens, distributed in a hierarchy, in which one daughter screen needs to pass data to another, which is on a different node. To do this via props, it would be necessary for the parent component to pass these values to both screens. This form is very difficult to manage.
The ideal way to do this is through redux. With it, you create a shared store of variables, so you can access them anywhere in the application. The following link demonstrates how to configure redux in your project.
https://blog.cloudboost.io/getting-started-with-react-native-and-redux-6cd4addeb29
It is recommended to use redux for variables that need to be shared. If you have only local component variables, then you do not need to use it.
I hope this can help you in your projects.
Hugs!
I have started to build apps with vuejs recently and have one small issue that I can't get around:
I am using vue-router to jump between pages and lets say I have a huge list where additional items may be injected with ajax, user has to scroll, he click on item, see the details (is in new route) and when gets back list is reinitialized and has to scroll again to be at the point he was previously. Do I have some possibility to keep the state of given component (and view like scroll position) while using vue-router or do I have to keep some cache-instance in main app component and then map it on init?
Thank you.
Essentially, the issue is that your component stores state internally. Navigating away clears the state. There are two ways I see this could be handled.
1) (quickfix) instead of redirecting use another way of displaying the item details (modal, or expand come to mind). This way the state of the component is not lost
2) (the "proper way") store the state. Inevitably, you'll come up against this sooner or later and the best way to deal with storing a state is vuex. https://vuex.vuejs.org/en/intro.html Initially, this will require a bit of learning and add some complexity, but it is a worthwhile investment
I'm building an app in React native, and basically, I need a modal(which will have the same content every time) to be available globally (in all components of app), so that I can be able to open it from anywhere in my app.
Obviously copy/pasting the same modal in all the components is not a good solution
Right now I'm having tons of trouble implementing it, so I would like to know what would be the best way to accomplish something like that
Use a Navigator and place your modal below it. Make it visible only when the state changes. The state can be changed from each component inside the Navigator via props.navigator.
You can see the full code with explanation here http://browniefed.com/blog/react-native-easy-overlay-modal-with-navigator/
It's easy to get a reference to navigator in the renderScene function, so calling navigator.push(newRoute) is simple when responding to an event that happens from within the JSX tree.
In my case, though, I want to call navigator.push(newRoute) from an external event. My app signs the user in with Google and fires an event when the sign-in is complete, and I want to navigate to a new route in that case.
How can I get a reference to the navigator? Is there any way to get it besides as a parameter to renderScene?
You can get the navigator through refs property: https://facebook.github.io/react/docs/more-about-refs.html. It's part of react (not specific to react native). It's not obvious from the react-native docs that there is a number of 'react' features that can be used in react-native, so i'd really advise to take a close look at react in general.
Note however, there is a good reason Facebook does not mention refs explicitly and loudly. Refs is really not a "go-to" way of accessing component. Your case might be of course different, but it's likely that the Google sign-up is not in-fact "external". It might actually be part of one of the components in the hierarchy tree above the navigator (in which case you can pass the state change down the tree).
Quoting from the summary of the "More about refs" document above:
If you have not programmed several apps with React, your first
inclination is usually going to be to try to use refs to "make things
happen" in your app. If this is the case, take a moment and think more
critically about where state should be owned in the component
hierarchy. Often, it becomes clear that the proper place to "own" that
state is at a higher level in the hierarchy. Placing the state there
often eliminates any desire to use refs to "make things happen" –
instead, the data flow will usually accomplish your goal.
Again - your case might be different and using refs might be perfectly justified, but if you are tempted (for example) to separate out all the Google-related stuff to separate object and if that makes the sign-up "external" - think twice. React really encourages putting all things related to a "component" logic in one place (the component) - even if that includes various technologies and external APIs.