I'm wondering how to default AsyncStorage values in React Native for a Detox test.
I have a welcome modal which shows when the user firsts login. We control whether to show the modal by storing an AsyncStorage value. Since our tests launch different instances of the apps (with different settings), I'm looking for a way to default a value before a test begins.
I shortly investigated using a jest mock but not sure that's the right approach because I don't want to mock all of .getItem, I just want to mock it for this specific value that is stored.
I do it by opening the app with a dynamic link like this:
myapp://example/?action=setAsyncStorage&key=someKey&value=someValue
The app has a dynamiclink handler that recognizes this dynamic link and sets a value into AsyncStorage.
Related
based on the following VueSchool tuto https://vueschool.io/courses/vue-router-for-everyone I'm trying to create a Vue app with a menu based on a list of applications found in an October server. I try to replace the static destinations[] by an applications[] filled from the database.
For that I use Axios and Vuex. I'm able to query the data, but I spent many hours trying to get it at the application loading, to create the menu, before the application is displayed...
I have a main.js an App.vue and a MenuApp.vue component for displaying the menu.
My problem is that my getter is always called before my mutation and that my application array is always empty when the menu is creating.
Is there a way to load and init properly all data before displaying my vue.js menu component ???
Or could I reload my menu component after the mutation ?
Thanks for help ;-)
You could use a "loading" layout, before load the main layout.
From "loading" layout, use async to load the applications list and all data you want to get before. At the end, just switch to main layout with applications list loaded.
From OctoberCMS side, I don't know how you are made the requests. But, try to use simple routes, calling router controllers, instead of using components. This will made a more direct request, and a better performance on your final project.
I'm building a Vue.js app that will be run on devices where I don't have access to a dev tools console, such as a game console. I've created a vue DebugPanel component that contains several tabs, one of them being a "log" to write to.
The UI is mostly working as I expect, but now I need to actually take what's in the console and have it output to the element in the component.
I'd like to use this solution of hijacking the consol.log function. This solution works great in a non-vue HTML page, but I'm having trouble with the best way to incorporate it into a Vue.js app.
The issue I'm having is that each tab section on my DebugPanel is hidden/shown based on a v-if attribute. The log element is only in the DOM when its tab element shown. So a call to document.getElementById errors.
Any thoughts on how to implement this in Vue.js?
You can just use Vuex store to pass data through all the app. And i think it would be better to use it in your app for global data.
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!
So my first screen, say ParentScreen has a FlatList of a component. When any component of the list is clicked, it opens another screen ChildScreen. Now what I'm trying to do is that when I perform an action on the ChildScreen, the ParentScreen's FlatList needs to be updated.
I'm using react-native-navigation, so my current approach is to send props via passProps property via this.props.navigator.push() but when I perform an action on the ChildScreen, it's unable to update that data because the ParentScreen is frozen at that time, hence it gives me the error:
You attempted to set the key count with the value 3 on an object
that is meant to be immutable and has been frozen.
How can I communicate this data OR do a workaround to allow the same.
You need to read about react-redux, with that you can manage your states and pass data from one componet to the other by mapping states to props, you will learn about reducers, combine reducers and actions.
this youtube link can help you alot https://www.youtube.com/watch?v=ucd5x3Ka3gw
On click of button in reactjs i want to increment one variable named counter and this increment happens through server side.
Once response comes from express server I want to set returned value in different react component.
How do two different react components communicate in such scenario.
I am using commonJs approach for each components so each component is in different file .
How can I achieve this functionality?
It is like clicking on button adds item to cart for which communication to server is required.
Basically it seems you need a modeln I see three possibilities:
Write a model manually inside a specific file/module, update it when the server send the information and bind it to your views with EventEmitter
https://github.com/Olical/EventEmitter
You could use backbone so you can have models,collections and native events on update/change...etc http://backbonejs.org/
Implement the Flux pattern for reactjs : https://facebook.github.io/react/docs/flux-overview.html
Depending on your needs you can choose one of them.