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.js
import * 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 this
I am a begginer dev
Please 🙁 🙁 🙁
3
Answers
Instead of relying on getting the navigation object as a prop, import useNavigation from react-navigation/core
It seems that you did not import useNavigation. Add this to your code:
then declare a const within your login function:
then try it again. Also ensure you are calling the correct component name within the navigation.navigate(”)
You should define names to your screens.
For example:
Then you can navigate them with their names like
navigation.navigate("HomeScreen")You should name them carefully.
For detailed information and examples you can check:
https://reactnative.dev/docs/navigation
Have a good day!