Current User

7 min

get current user for react native introduction after implementing user registration and login to your, you need to retrieve the currently logged user data to perform different actions and requests since react native uses \asyncstorage\ as the local storage, this data can be retrieved using \parse currentasync\ inside your app’s component prerequisites to complete this tutorial, you will need a react native app created and connected to back4app https //www back4app com/docs/react native/parse sdk/react native sdk complete the previous guides so you can have a better understanding of the parse user class https //www back4app com/docs/react native/parse sdk/working with users/react native login goal get the current user data fetching using parse for a react native app 1 retrieving current user the method \parse currentasync\ can be used anywhere on your code, after properly configuring your app to use parse and asyncstorage its response will be your current user’s object ( \parse user\ ) or null if there is no logged in user currently javascript 1 const getcurrentuser = async function () { 2 const currentuser = await parse user currentasync(); 3 if (currentuser !== null) { 4 alert alert( 5 'success!', 6 `${currentuser get('username')} is the current user!`, 7 ); 8 } 9 return currentuser; 10 };1 const getcurrentuser = async function () promise\<parse user> { 2 const currentuser parse user = await parse user currentasync(); 3 if (currentuser !== null) { 4 alert alert( 5 'success!', 6 `${currentuser get('username')} is the current user!`, 7 ); 8 } 9 return currentuser; 10 }; this method is essential in situations where you don’t have access to your application state or your user data, making it possible to perform relevant parse requests in any component of your app 2 using current user in a react native component in our previous guides, \parse currentasync\ was already used for testing and inside the \hellouser\ component here is the complete component again hellouser js 1 import react, {fc, reactelement, useeffect, usestate} from 'react'; 2 import {text, view} from 'react native'; 3 import parse from 'parse/react native'; 4 import styles from ' /styles'; 5	 6 export const hellouser = () => { 7 // state variable that will hold username value 8 const \[username, setusername] = usestate(''); 9	 10 // useeffect is called after the component is initially rendered and 11 // after every other render 12 useeffect(() => { 13 // since the async method parse user currentasync is needed to 14 // retrieve the current user data, you need to declare an async 15 // function here and call it afterwards 16 async function getcurrentuser() { 17 // this condition ensures that username is updated only if needed 18 if (username === '') { 19 const currentuser = await parse user currentasync(); 20 if (currentuser !== null) { 21 setusername(currentuser getusername()); 22 } 23 } 24 } 25 getcurrentuser(); 26 }, \[username]); 27	 28 // note the conditional operator here, so the "hello" text is only 29 // rendered if there is an username value 30 return ( 31 \<view style={styles login wrapper}> 32 \<view style={styles form}> 33 {username !== '' && \<text>{`hello ${username}!`}\</text>} 34 \</view> 35 \</view> 36 ); 37 }; hellouser tsx 1 import react, {fc, reactelement, useeffect, usestate} from 'react'; 2 import {text, view} from 'react native'; 3 import parse from 'parse/react native'; 4 import styles from ' /styles'; 5	 6 export const hellouser fc<{}> = ({}) reactelement => { 7 // state variable that will hold username value 8 const \[username, setusername] = usestate(''); 9	 10 // useeffect is called after the component is initially rendered and 11 // after every other render 12 useeffect(() => { 13 // since the async method parse user currentasync is needed to 14 // retrieve the current user data, you need to declare an async 15 // function here and call it afterwards 16 async function getcurrentuser() { 17 // this condition ensures that username is updated only if needed 18 if (username === '') { 19 const currentuser = await parse user currentasync(); 20 if (currentuser !== null) { 21 setusername(currentuser getusername()); 22 } 23 } 24 } 25 getcurrentuser(); 26 }, \[username]); 27	 28 // note the conditional operator here, so the "hello" text is only 29 // rendered if there is an username value 30 return ( 31 \<view style={styles login wrapper}> 32 \<view style={styles form}> 33 {username !== '' && \<text>{`hello ${username}!`}\</text>} 34 \</view> 35 \</view> 36 ); 37 }; in this case, the \parse currentasync\ method retrieves the username and updates the state variable that is rendered inside the component jsx conclusion at the end of this guide, you learned how to retrieve the current parse user data from local storage on react native in the next guide, we will show you how to allow your user to reset his password