@react-navigation/drawer#DrawerItem JavaScript Examples

The following examples show how to use @react-navigation/drawer#DrawerItem. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: CustomDrawerContent.js    From atendimento-e-agilidade-medica-AAMed with MIT License 5 votes vote down vote up 
export default function CustomDrawerContent(props) {
  const [, { logout }] = useAuth();
  const [user, setUser] = useState(null || '');

  // A função getUserLogged recupera os dados do usuário por meio de uma Promise
  // que é executada assim que o componente e montado
  useEffect(() => {
    function getUserLogged() {
      // O uso da Promise + setTmeout foi necessário pois leva um tempo até os dados do AsyncStorage sejam recuperados
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          // A função resolve() irá conter os dados do usuário após 2s definidos no setTimeout()
          resolve(AsyncStorage.getItem('store'));
        }, 2000);
      });
    }
    getUserLogged()
      .then(data => {
        // Para acessar os dados recuperados é usado o .then()
        // Como os dados armazenados estão em formato de string, é utilizado o JSON.parse() para tranforma-los em objeto
        const dataParse = JSON.parse(data);
        // Após esse processo teremos um objeto que terá dentro outro objeto "auth", nele está os dados do usuário além do token
        // Como só é necessário apenas o usuário, o estado é setado apenas com os dados do mesmo (id, nome, bio, etc.)
        setUser(dataParse.auth.user);
      })
      .catch(err => console.log(err)); // Por fim é usado um .catch() para tratar algum erro
  }, []);

  return (
    <DrawerContentScrollView {...props}>
      <View style={styles.topDrawer}>
        <View style={styles.viewAvatar}>
          <Avatar
            avatarStyle={styles.avatarStyle}
            containerStyle={styles.avatarContainerStyle}
            onPress={() => props.navigation.navigate('EditProfile')}
            activeOpacity={0.7}
            size="medium"
            rounded
            title={user ? JSON.stringify(user.name[0]) : 'a'}
          />
        </View>
        <View style={styles.viewDados}>
          <Text style={styles.nameUser}>{user.name}</Text>
          <Text style={styles.bioUser}>{user.bio}</Text>
        </View>
      </View>

      <DrawerItemList {...props} />
      <View style={styles.separator} />
      <DrawerItem
        onPress={logout}
        label="SAIR"
        style={styles.drawerItem}
        labelStyle={styles.drawerItemLabel}
        icon={() => <Feather name="log-out" size={20} color="#E53935" />}
      />
    </DrawerContentScrollView>
  );
}
Example #2
Source File: CustomDrawerContent.js    From spree-react-native with MIT License 5 votes vote down vote up 
function CustomDrawerContent({ dispatch, ...props }) {
  return (
    <DrawerContentScrollView {...props}>
      <View style={styles.jumbotron}>
        <LinearGradient
          // Background Linear Gradient
          start={[1, 0]}
          end={[1, 1]}
          colors={['#EE3168', '#C1236F']}
          style={styles.centeredContent}
        >
          <View style={styles.centeredContent}>
            <Image
              source={require('../../../assets/images/user-profile-photo/user-profile-photo.png')}
              style={styles.avatar}
            />
            <View style={styles.profileDetails}>
              <Text style={ styles.profileName }>Jane Pinto</Text>
              <ChevronRight size={20} style={{color: colors.white}} />
            </View>
          </View>
        </LinearGradient>
      </View>
      <DrawerItemList {...props} />
      <Divider />
      <DrawerItem
        label="Support & More"
        labelStyle={styles.menuTitle}
        icon={({ color, size }) => <Support size={size} style={{color, ...globalStyles.label}} />}
        onPress={() => {}}
      />
      <DrawerItem
        label="FAQs"
        labelStyle={styles.subMenuTitle}
        onPress={() => {}}
      />
      <DrawerItem
        label="Contact Us"
        labelStyle={styles.subMenuTitle}
        onPress={() => {}}
      />
      <DrawerItem
        label="Privacy Policy"
        labelStyle={styles.subMenuTitle}
        onPress={() => {}}
      />
      <Button
        title="Logout Account"
        type="outline"
        containerStyle={ styles.btnOutlineContainer }
        buttonStyle={ styles.btnOutline }
        titleStyle={ styles.titleStyle }
        onPress={() => dispatch(userLogout())}
      />
    </DrawerContentScrollView>
  );
}