App.js (Login)import * as React from 'react';import {useState} from 'react';import { Text, StyleSheet, KeyboardAvoidingView, ScrollView, Image,TextInput, TouchableOpacity, View } from 'react-native';import { CheckBox } from 'react-native-elements';import {Ionicons} from '@expo/vector-icons'import {statusBar01} from './src/statusBar';const Login = ({navigation}) => {const [input, setInput] = useState('');const [hidePass, setHidePass] = useState(true);const [ischecked1, setIschecked1] = useState(true)//const navigation = useNavigation(); return (<KeyboardAvoidingView style={styles.container}><ScrollView><Image source={require('./assets/logo.png')} style={styles.logo} /><Text style={styles.helloText}> Olá de novo !</Text><Text style={styles.welcomeText}> Bem-vindo(a) de volta, sentimos sua falta! </Text><TextInput style={styles.inputArea} placeholder="Digite o e-mail" /><TextInput style={styles.inputArea} placeholder="Senha" value={input} onChangeText={ (texto) => setInput(texto)} secureTextEntry={hidePass} /><TouchableOpacity style={styles.eye} onPress={ () => setHidePass(!hidePass) }><Ionicons name={hidePass ? 'eye' : 'eye-off'} color="#A0D800" size={25} /></TouchableOpacity><View style={styles.checkBoxStyle}><CheckBox left size={18} checkedColor='#A0D800' value={ischecked1} checked={ischecked1} onPress={() => setIschecked1(!ischecked1)} containerStyle={{ backgroundColor: "transparent", borderColor: "transparent", marginRight: 0}} /><TouchableOpacity><Text style={styles.Connected}> Manter-se conectado</Text></TouchableOpacity><TouchableOpacity><Text style={styles.forgotPassword}> Esqueci minha senha</Text></TouchableOpacity></View><TouchableOpacity style={styles.botao} onPress={() => navigation.navigate('HomeScreen')}><Text style={styles.botaoText}>Entrar</Text></TouchableOpacity></ScrollView></KeyboardAvoidingView>);}const styles = StyleSheet.create({container: { flex: 2, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff'},logo: { marginTop:50, marginBottom: 80, width: 150, height: 40,},inputArea:{ marginTop: 30, padding: 15, height: 60, width: 370, borderColor: '#808080', borderWidth: 1, backgroundColor: '#fff', fontSize: 16, fontWeight: 'bold', borderRadius: 15},botao: { width: 350, height: 60, backgroundColor: '#000000', marginTop: 35, marginLeft: 8, borderRadius: 15, alignItems: 'center', justifyContent: 'center',},botaoText: { fontSize: 15, fontWeight: 'bold', color: '#fff'},helloText: { fontSize: 40, fontWeight: 'bold', marginTop: 15, color: '#000000', marginEnd: 120, marginTop: 8},welcomeText: { fontSize: 16, marginTop: 10, marginEnd: 35, marginVertical: 10, color: '#808080',},forgotPassword: { textDecorationLine: 'underline', fontWeight: 'bold', marginTop: 15, marginBottom: 15, marginLeft: 30, fontSize: 12},Connected:{ textDecorationLine: 'underline', fontWeight: 'bold', marginTop: 15, fontSize: 12, marginRight: 55, marginLeft: -5},checkBoxStyle:{ marginTop: 15, flexDirection: 'row', marginStart: -10},eye:{alignSelf: 'flex-end',bottom: 42,right: 40}})export default Login;HomeScreen.jsimport * as React from 'react';import { useState } from 'react';import { Text, View, ScrollView, KeyboardAvoidingView, Image, TouchableOpacity} from 'react-native';import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';import { Entypo, Feather } from 'react-native-vector-icons';import SwitchSelector from "react-native-switch-selector";import {Card} from 'react-native-shadow-cards';import * as Progress from 'react-native-progress';import { NavigationContainer } from '@react-navigation/native';import statusBar01 from './src/statusBar';import 'react-native-gesture-handler';import {createStackNavigator} from 'react-navigation/stack'import Login from '../../App';//import { HomeScreen } from './src/screens/HomeScreen';//import { TasksScreen } from './src/screens/TasksScreen';//import { SettingsScreen } from './src/screens/SettingsScreen';function TasksScreen() { return (<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text>Tasks!</Text></View> );}function HomeScreen() { const options = [ { label: "Active", value: "a" }, { label: "New", value: "n" }, ]; const [showHide, setShowHide] = useState(false); return (<KeyboardAvoidingView style={{ flex: 2, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff' }}><ScrollView ><Text style={{textAlign:'left', fontSize: 33, fontWeight:'bold', paddingTop: 100, paddingLeft: 20, bottom: 55}}> {'Olá, \nUsuário!'}</Text><Text style={{paddingLeft: 20, color: '#808080', bottom: 80, fontSize: 20 , paddingTop: 50}}> Minhas tasks</Text><Image source={require('./assets/images/user.jpeg')} style={{marginTop:50, width: 55, height: 55, borderRadius: 10, top: -250, left: 300, borderColor: '#ECECEC', borderWidth: 1 } } /><SwitchSelector style={{width:390,paddingLeft: 15, bottom: 160}} textColor={'#FFFFFF'} selectedColor={'#000000'} fontSize={15} height={60} bold backgroundColor={'#000000'} valuePadding={-1} hasPadding borderRadius={15} options={options} initial={0} //onPress={value => console.log(`Call onPress with value: ${value}`)} /><Card style={{ margin: 19, height: 170, marginTop: -125}}><Feather name={'file-text'} color={'#F2CB1D'} size={20} style={{paddingLeft: 20, top: 20,}}/><Text style={{paddingLeft: 50}}>Task 59788</Text><Entypo name={'controller-record'} style={{paddingLeft: 270, bottom: 14 }} color={'#007ACC'} size={10} /><Text style={{paddingLeft: 290, bottom: 30}}>Active</Text><Text style={{fontSize: 12, paddingLeft: 20, bottom: 15 }}>App corporativo OnlineTeam</Text><Text style={{paddingLeft: 20, fontSize: 20, bottom: 10}}>Criar telas no Figma</Text><Text style={{paddingLeft: 20, fontSize: 12}}>Original Estimate: 4h</Text><Text style={{paddingLeft: 250, bottom: 17, fontSize: 12}}>Completed: 2h</Text><Text style={{textAlign: 'left', bottom: 10, fontSize: 10, paddingLeft: 55}}> 0%</Text> <Progress.Bar progress={0.1} width={200} color={'#A0D800'} backgroundColor={'#ECECEC'} borderColor={'transparent'} height={10} borderRadius={10} style={{alignSelf: 'center'}} bottom={20} /><Text style={{textAlign: 'right', fontSize: 10,bottom: 35, paddingRight: 40}}> 100%</Text></Card><Card style={{ margin: 19, height: 170, marginTop: -125, marginTop: 5}}><Entypo name={'bug'} color={'#FF0000'} size={20} style={{paddingLeft: 20, top: 20,}}/><Text style={{paddingLeft: 50}}>Bug 59352</Text><Entypo name={'controller-record'} style={{paddingLeft: 270, bottom: 14 }} color={'#FF0000'} size={10} /><Text style={{paddingLeft: 290, bottom: 30}}>Issue</Text><Text style={{fontSize: 12, paddingLeft: 20, bottom: 15 }}>Cargo Online Team</Text><Text style={{paddingLeft: 20, fontSize: 20, bottom: 10}}> Acusando duplicidade de contrato...</Text><Text style={{paddingLeft: 20, fontSize: 12}}>Original Estimate: 4h</Text><Text style={{paddingLeft: 250, bottom: 17, fontSize: 12}}>Completed: 2h</Text><Text style={{textAlign: 'left', bottom: 10, fontSize: 10, paddingLeft: 55}}> 0%</Text> <Progress.Bar progress={0.1} width={200} color={'#A0D800'} backgroundColor={'#ECECEC'} borderColor={'transparent'} height={10} borderRadius={10} style={{alignSelf: 'center'}} bottom={20} /><Text style={{textAlign: 'right', fontSize: 10,bottom: 35, paddingRight: 40}}> 100%</Text></Card></ScrollView></KeyboardAvoidingView> );} function SettingsScreen() { return (<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text>Settings!</Text></View> ); }export default function App() { const Tab = createBottomTabNavigator(); return (<NavigationContainer><Tab.Navigator screenOptions={{ tabBarActiveTintColor: "#A0D800", tabBarInactiveTintColor: "#FFFFFF", //tabBarActiveBackgroundColor: "#FFFFFF", //tabBarInactiveBackgroundColor: "#000000", backgroundColor: "#FFFFFF", headerShown: false, tabBarSelectedItemStyle: { borderBottomWidth: 2, borderBottomColor: 'red', }, tabBarStyle: [ { display: "flex", backgroundColor: "#000000", borderTopLeftRadius: 20, borderTopRightRadius: 20, height: 70, overflow: 'hidden', alignItems: 'center', justifyContent: 'center', }, null, ], tabBarHideOnKeyboard: true, tabBarLabelStyle:{ //fontSize: 20, //fontWeight: 'bold', backgroundColor: "#000000", width: 60, flex: 0.000004, }, }}><Tab.Screen name=" " component={TasksScreen} options={{ tabBarIcon: ({ color}) => (<Entypo name="add-to-list" size={30} color={color} /> ) }} /><Tab.Screen name=" " component={HomeScreen} options={{ tabBarIcon: ({ color}) => (<Feather name="home" size={30} color={color} /> ) }} /><Tab.Screen name=" " component={SettingsScreen} options={{ tabBarIcon: ({ color}) => (<Feather name="settings" size={30} color={color} /> ) }} /></Tab.Navigator></NavigationContainer>);}
I'm not managing to organize the code or implement a navigation on the login button for the home screen, someone helps me please???I tried to create a Login.js and export it and the HomeScreen to the App.js but it also failed.Could someone help me with the resolution so I can proceed with my code?I need help whit thisI am a begginer devPlease :( :( :(