Nessa aula vamos estar criando os arquivos a base da tela de profile. Nós vamos começar criando uma pasta chamada “UserProfile” dentro de “Screens”

Nessa pasta vamos criando os arquivos padrão, index e styled

import { View, Text } from "react-native";
import React from "react";

const UserProfile = () => {
  return (
    <View>
      <Text>UserProfile</Text>
    </View>
  );
};

export default UserProfile;

import styled from "styled-components/native";

Agora, nós vamos criar o nosso container padrão e vamos usar também o nosso navbar.

import styled from "styled-components/native";
import Constants from "expo-constants";

const statusBarHeight = Constants.statusBarHeight;

export const Container = styled.ScrollView`
  flex: 1;
  background-color: ${({ theme }) => theme.colors.backgroundLight};
  padding-top: ${statusBarHeight + 20}px;
`;

import { View, Text } from "react-native";
import React from "react";
import { Container } from "./styled";
import NavBar from "../../components/common/NavBar";

const UserProfile = () => {
  return (
    <>
      <Container>
        <Text>UserProfile</Text>
      </Container>
      <NavBar />
    </>
  );
};

export default UserProfile;

Vamos criar a sua rota para que a gente já possa visualizar.

export type PropsNavigationStack = {
  Home: undefined;
  Login: undefined;
  Register: undefined;
  Search: {
    query: string;
  };
  UserProfile: undefined;
};

const Stack = createNativeStackNavigator<PropsNavigationStack>();

export type PropsStack = NativeStackNavigationProp<PropsNavigationStack>;

const Routes = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}
      >
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Search" component={Search} />
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="Register" component={Register} />
        <Stack.Screen name="UserProfile" component={UserProfile} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default Routes;

Vamos agora para o navbar, e lá nós vamos usar essa rota criada no ícone de profile.

const NavBar = () => {
  const navigation = useNavigation<PropsStack>();

  return (
    <Container>
      <IconButton
        onPress={() => {
          navigation.navigate("Home");
        }}
      >
        <Icon source={home} />
      </IconButton>
      <IconButton
        onPress={() => {
          navigation.navigate("Home");
        }}
      >
        <Icon source={chat} />
      </IconButton>
      <IconButton
        onPress={() => {
          navigation.navigate("Home");
        }}
      >
        <Icon source={add} />
      </IconButton>
      <IconButton
        onPress={() => {
          navigation.navigate("Home");
        }}
      >
        <Icon source={categories} />
      </IconButton>
      <IconButton
        onPress={() => {
          navigation.navigate("UserProfile");
        }}
      >
        <Icon source={profile} />
      </IconButton>
    </Container>
  );
};

Podemos agora visitar a tela de profile e verificar se está tudo OK com ela.