Reading users in Expo React

Question

Ok this one is hard.

I need to read the token of a user so depending on which user logs in the app, the first page that shows up changes. And I do not know how to start.

I have a Welcome page where you choose your role, there I guess you get the token and read it, don't really know:

import React from 'react'
import { View, StyleSheet, TouchableOpacity, Image } from "react-native";
import { Layout, SimpleHeader, Text } from '../../elements/index';
import { useNavigation } from '@react-navigation/native';
import { Card } from 'components/elements';


const WelcomeComponent = (props) => {

  const navigation = useNavigation();

  return (
    <Layout style={styles.wrapper}>



      <View style={styles.header}>
        <Image source={require("../../elements/assets/LogoIcon.png")} style={styles.logo} />

        <SimpleHeader
          title="Bienvenido a Telelavo" />


      </View>

      <View style={ styles.main}>

        <Text style={styles.rol}>
          Selecciona tu rol
        </Text>

        <Card style={styles.card}>

          <TouchableOpacity onPress={() => navigation.navigate("Login" )}>
            <View style={styles.navigator}>
              <View style={styles.Franquiciado}>
                <Image source={require("../../elements/assets/Franquiciado.png")} style={styles.image}></Image>
              </View>
              <View style={ styles.relleno}>
                <Text style={styles.subtitle}>Franquiciado</Text>
                <Text style={styles.texto}>Inicia sesión como Franquiciado</Text>
              </View>
            </View>
          </TouchableOpacity>

        </Card>

        <Card style={styles.card}>

          <TouchableOpacity onPress={() => navigation.navigate("Login")}>
            <View style={styles.navigator}>
              <View style={styles.Employee}>
                <Image source={require("../../elements/assets/Employee.png")} style={styles.image}></Image>
              </View>
              <View style={ styles.relleno}>
                <Text style={styles.subtitle}>Empleado</Text>
                <Text style={styles.texto}>Inicia sesión como Empleado</Text>
              </View>
            </View>
          </TouchableOpacity>

        </Card>

        <Card style={styles.card}>

          <TouchableOpacity onPress={() => navigation.navigate( "Login", {client:true} )}> 
            <View style={styles.navigator}>
              <View style={styles.User}>
                <Image source={require("../../elements/assets/Users.png")} style={styles.image}></Image>
              </View>
              <View style={ styles.relleno}>
                <Text style={styles.subtitle}>Cliente</Text>
                <Text style={styles.texto}>Inicia sesión como Cliente</Text>
              </View>
            </View>
          </TouchableOpacity>

        </Card>

      </View>

    </Layout>
  )
}
const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
    backgroundColor: '#fff',
  },
  main: {
    margin: 5,
    display: "flex",
    bottom: 15,
  },
  header: {
    display: "flex",
    alignItems: "flex-start",
    flexDirection: "column",
    justifyContent: "flex-start",
    marginVertical: 10,
    top: 20,
    fontSize: 30,
    
  },
  logo: {
    alignSelf: "center",
  },
  card: {
    display: "flex",
    margin: 10,
    marginHorizontal: 10,
    
  },
  navigator:{
    display: "flex",
    alignItems: "center",
    wrapper: "wrap",
    flexDirection: "row",
    alignitems:"center",
    margin: 10
  },
  Franquiciado: {
    backgroundColor: "black",
    height: 40,
    width: 40,
    display: "flex",
  },
  Employee: {
    backgroundColor: "#F2F2F2",
    height: 40,
    width: 40,
    display: "flex",
  },
  User: {
    backgroundColor: "#F5BF0D",
    height: 40,
    width: 40,
    display: "flex",
  },
  image: {
    height: 30,
    width: 30,
    display: "flex",
    alignSelf: "center",
    top: 5,
  },
  rol: {
    fontSize: 16,
    marginTop:10,
    left: 10,
  },
  subtitle:{
    fontWeight: "bold",
  },
  relleno:{

    left: 20,
  },
})

export default WelcomeComponent;

Then it gets into a the login, which doesn't really matter, the thing is I want a different page showed to the user depending on the userToken...

Where do I start, into the navigation? In the props sended by the WelcomeComponent as I do to choose the login? Where do I take the token and read it?

I'm very lost, and would like to have some idea or at least tutorials to read about it, though I haven't found any with my specifications, (login redirection expo react native, or some short)

Thanks for any help.

Answer 1

After the users select a role you can decide which screen to navigate to or which props to pass to that screen.

If you need to do that after login, then you can read the response from the login function and based on it you can decide where to guide your users, both approaches you suggested work, if you have an entirely different UI then I suggest that you use navigation and a totally different scree, but if the differences are minimal you can just pass the role in the navigation params and read them inside the screen to decide what to show.

If you wanna save your user info somewhere to be accessed by your other components easily, you can use React context or one of the many state management libraries (redux toolkit, zustand, etc...)