I'm using react-router-native to navigate between the "pages" of my app. The problem here is that I want to change the app-bar visibility depending on the user location.
So, I need a way to watch and detect the route, so I can manipulate-it
Solved!
To solve the problem I created a callback function inside my components, that returns whenever it loads. So with that I could just check a variable like
isAtLogin ? (<Appbar />) : (<View />) to show and hide the appbar.
Related
I am trying to use 'react-native-popup-dialog' to include pop ups in my react-native app.
I have a component 'HeaderView' which I am including in all other components for example 'Home' as
<HeaderView/>.
For 'HeaderView' component I have set flex to 0.5 and there is a button whose onpress event I want to capture in 'Home' component.
onPress={() => {
this.popupDialog.show();
}}
And PopupDialog exists in 'Home' Component.
If I include PopupDialog in HeaderView, I get popup only in 0.5 (flex) part of screen.
Is there any way to achieve this or will I have to discard my HeaderView component and add its logic in all components?
You can do that in so many ways.
As one of those you can use this:
Add some listener in the root of your app (e.g: App.js) and render popup dialog there, and finally show modal with emitting the listener. (react-native-event-listeners)
Another simple way is using ContextApi
But you should know that the best way is rendering your main modal in root and call the functionalities about that with some tools like the above examples or even something like redux.
I'm building a react native application and found out the react-native-multiple-select library which i emplemented following the documentation https://www.npmjs.com/package/react-native-multiple-select . The view is being displayed but the selected items are not showing up, only the counter of selected items works. I think it's because I don't have the control over how its function getSelectedItemsExt() works and from my researchs on internet like React-native-multiple-select: Cannot read the property 'getSelectedItemsExt' of undefined I only found that I should be doing
<View>
{ this.multiselect
?
this.multiselect.getSelectedItemsExt()
:
null}
</View>
.
Though it helped get rid of the red screen, it doesn't display the items.
So can you please tell me how I can manage
this.multiselect.getSelectedItemsExt()
and get my items displayed.
Any help is much appreciated. Thanks in advance.
I can guess throughout the question that you are passing the hideTags props to the MultiSelect component i.e you are having inside the component <MultiSelect hideTags>. This hideTags was your problem because It does what it's name sounds, i.e it doesn't display the values you set in your FlatList or whatever component. If you want the values to be displayed then remove hideTags from inside the component and you should have your items displayed. Well you want also to customize the output of this library, it's colors and InputField style then head up to the root of your react native application, then go to node-module -> react-native-multiple-select -> Library there you will find the core file that you can customize at your leisure.
I'm using code like this it is not working for me
componentWillRecieveProps(nextProps,nextState){
if(nextProps.navigation.state != this.state){
//here calling api
}
}
I think the question should be more elaborative to help to solve your issue. Based on your questions, you may be asking for either -
How to reload page if data changes
How to reload page if navigation state changes
How to reload page if data changes
In this case, you no need to add 'componentWillRecieveProps'. You can simply check for a value in render method like this
{data.items.length && <ItemLIstCustomComponent />}
or
{data.items.length ? <ItemLIstCustomComponent /> : <EmptyMessageComponent />}
You can look into conditional rendering in react-native.
If the re-render is not happening still? Then your way of updating state/data is not correct. Make sure you make copy of object and update the existing one.
To understand this, read about mutable objects and react shallow-check for re-rendering. Or may be this will help
How to reload page if navigation state changes
I don't think it is good practice to call another API or do any state change related thing in componentWillRecieveProps. You can create a new Screen on which you navigate and call API in componentDidMount.
You can try React navigation if you are not using any navigation library.
In my Vue 2 app, I have a menu bar whose menu items use router-link. One of these menu items is 'Customers', which takes the user to a customer editor. Now, if the user clicks on this same 'Customers' menu item while they're in the customer editor, nothing happens. I presume this is because of this behaviour mentioned in the docs: "In HTML5 history mode, router-link will intercept the click event so that the browser doesn't try to reload the page."
Now, that's perfectly understandable and for the majority of the time it would be the behaviour I want. But actually here I want the component to be reloaded, to go back to a clean slate. Or perhaps more accurately, for some event to occur which I can handle within the customer editor to set things how I want them to be. I assumed this would be the case, in fact, but when I set up a watch, thus
watch: {
'$route' (to, from) {
console.log("Route changed");
}
},
I don't see anything logged to the console. It may be that some event is occurring which I'm not handling and that Vue is simply reusing the component. But how can I stop it from doing so?
According to this issue, you can add a #click.native binding to the current router-link and reinitialize your component data in there.
But a quick and dirty solution would be to append a unique parameter to your route, like a date. Check this fiddle
The intended method of accomplishing this seems to be to implement a beforeRouteUpdate function to reset the properties of the route component. See this issue on vue-router's GitHub: Routing the same component, the component is not reload, but be reused? #1490.
This is expected behaviour, Vue re-uses components where possible.
You can use the beforeRouteUpdate hook to react to a route switch that
uses the same component.
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.