My aplication has a login and it gets from the api a apikey when the user logged in that saves in the this.state. I need to be able to acces the apikey from every screen of the app. How can i do it? Thanks.
You have to use AsyncStorage
AsyncStorage is a simple, asynchronous, persistent, key-value
storage system that is global to the app. It should be used instead of
LocalStorage.
Related
So I am working on my first React Native project and I am curious as to what the proper way to handle user data is. I have 3 different pages that are: HomePage, ProfilePage, ChatPage. When a user logs in it navigates them to the HomePage.
As of now, I have it to where when the HomePage loads it makes a backend call that retrieves all of the user data and sets it to some states.
Now when the user navigates to a new page like the ProfilePage none of the data is there anymore of course so do I have to make another backend call? So one backend call for each page? Im sure there has to be some way to only make the backend call once. Could I possibly set a global state of some sort? Should I save all the user data to AsyncStorage?
My current File structure is as follows:
App.js -> Contains my React Navigation stack
HomePage.js
ProfilePage.js
ChatPage.js
Thanks for the help!
You can use Redux plus React-Redux.
To say in short redux is a state management library for react. The states will be global to your app accessible across various components inside app. also there will be reactivity.
For more info visit this link
https://react-redux.js.org/
You should use React-Redux and manage your states globally.
I'm new to Nuxt, but I have a bootstrap header with the standard v-if="authenticated" kinda state for login\logout buttons.
The auth provider is firebase which has a onAuthStateChanged method that I use to set (or reset) the user property in the state store.
So page loads, I see the login button, onAuthStateChanged runs, sets the user, then login disappears and logout button shows up (can see the Vuex events from base->set as well).
Question is, what am I doing fundamentally wrong such that I'm getting this flashing state. Is the only way to handle this to work with localStorage? ...should I NOT be storing the user in the state.store?
You need to save it in the store. But make no mistake because when reloading you have to set the token value using localstorage.
These are very good explanations
I have a webapp built on Laravel that is to be displayed on a mobile app (both android and ios, which are being built using React Native) via WebView.
I managed to use evollu/react-native-fcm to generate the token.
My question is: what is the proper way to send this token to the WebView, so my webapp can relate it to a user and store it on the database?
My first idea was to pass it along to the URL being called by the WebView as a GET parameter, but the parameter always come blank on the other side, probably because the token is requested asynchronously and when the webview is called it didn't come yet.
What can I do?
Either as a url parameter or via postMessage. In both ways you have to wait until the token is available. So load the page or render the webview when the token is available. Or you pass the token via postMessage immediately after the token was received.
The postMessage method is the recommended way, because you can load the page and wait for the token at the same time.
I managed to delay the rendering until the token was ready by using an if on the render method that would not return the webview if a state "loading" is true; then in the function that gets the token I used setState to change the value of loading to false.
As i'm trying to develop an app in react native , i want to implement logout functionality.Now i found a problem that for every user who is logging, the name,and details appearing in their profile is same for each user.I'm using asyncstorage for setting unique id.Now i'm trying to unset this session using
Asyncstorage.removeItem('key_uuid').Do i need to write this in a separate js file?I don't know actually where to give this code in my project.Sorry can anybody help me to figure this out?
It is simple implementation, on login you need to save some logged in user information as to check weather a user is logged in or not.
You canprovide logout button anywhere in the app, and on clk of that you can clear your asyncStorage or remove only user info from storage.
And when user opens your app you can check user in asyncstorage.
I am using redux-persist in my React Native app.
What I am going to do is to clean redux store when logout from the app.
persistStore(
store,
{
whitelist: compact([
'appInfo'
]),
storage: AsyncStorage
},
);
I know redux persists only the states in whitelist.
Therefore, I want to call this function when I logout from the app to clean the previous users details from redux store.
Does anyone know how to do this?
Many thanks,
Can you add userDetails to whitelist key?
You don't need to call persistStore everytime you want to persist store locally. It is meant as one time setup call ideally right after you createStore using redux.
On logout you can trigger an action USER_LOGGED_OUT, handle that in your reducer to clear out userDetails key. It will automatically be persisted then.