@react-navigation/native#DrawerActions JavaScript Examples

The following examples show how to use @react-navigation/native#DrawerActions. 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: profileTab.js    From Baku with GNU General Public License v3.0 4 votes vote down vote up 
export default function ProfileTab({navigation}) {
  const db = firebase.firestore().collection('users');
  const uid = firebase.auth().currentUser.uid;
  const [data, setData] = React.useState('');
  const [username, setUsername] = React.useState('');
  const [profilePic, setProfilePic] = React.useState('');
  const [name, setName] = React.useState('');
  const [refreshing, setRefreshing] = React.useState(false);
  const [bio, setBio] = React.useState('');

  React.useEffect(() => {
    db.doc(uid).get()
        .then((doc) => {
          setData(doc.data()),
          setName(data.name),
          setBio(doc.data().bio),
          setUsername(data.username),
          setProfilePic(data.photo);
        });
  });
  const wait = (timeout) => {
    return new Promise((resolve) => {
      setTimeout(resolve, timeout);
    });
  };

  const onRefresh = React.useCallback(() => {
    setRefreshing(true);

    wait(2000).then(() => setRefreshing(false));
  }, [refreshing]);


  return (
    <View style={Styles.container}>
      <Header headerTitle={username} />
      <ScrollView refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
      }>
        <View style={styles2.thumbnailSection}>
          <View>
            <Image
              source={{
                uri:
                  profilePic
              }}
              style={styles2.thumbnail}
            />
            {/* Displays Name as well as Username in feed */}
            {/* <Text style={styles2.username}>  {data.name} </Text> */}
          </View>
          <View style={styles2.postCardCont}>
            <Text style={styles2.postCount}> 100 </Text>
            <Text style={styles2.postCards}> PostCards </Text>
          </View>
          <View style={styles2.followerCont}>
            <Text style={styles2.followerCount}> 1000 </Text>
            <Text style={styles2.follower}> Followers </Text>
          </View>
          <Icon
            style={styles2.hambuger}
            name="bars"
            size={25}
            testID='profile-hamburger'
            onPress={() =>
              navigation.dispatch(DrawerActions.openDrawer(Drawer))
            }
          />
        </View>
        <View style={styles2.thumbnailName}>
          <Text style={{
            fontSize: 12.5,
            fontWeight: 'bold',
            color: '#FFFF'
          }}> {name} </Text>
        </View>

        <Text style={{
          fontSize: 12.5,
          fontWeight: 'bold',
          color: '#000000'
        }}> {bio} </Text>

        <View style={{alignItems: 'center', padding: 24}}>
          <AwesomeButton
            backgroundColor={'#ffbc26'}
            width={340}
            height={40}
            onPress={() => navigation.navigate('EditProfile')}
          >
            Edit Profile
          </AwesomeButton>
        </View>
        <View>
          {/* Tab to switch between profile posts and favorites */}
          <TopTab.Navigator
            tabBarOptions={{
              labelStyle: {fontWeight: 'bold', fontSize: 12},
              indicatorStyle: {backgroundColor: Colors.warning},
              style: {backgroundColor: Colors.info},
              inactiveBackgroundColor: Colors.info,
              activeBackgroundColor: Colors.warning,
              inactiveTintColor: Colors.background,
              activeTintColor: 'white'
            }}
          >
            <TopTab.Screen name="Post Cards" component={ProfilePosts} />
            <TopTab.Screen name="Favs" component={Favorites} />
          </TopTab.Navigator>
        </View>

      </ScrollView>
    </View>
  );
}