React Cli does not transfer from one page to another - javascript

I am building a mobile app using react-cli. For now I have only have two page called as App.js and SignUp.js. Both of those pages are in the same directory. But when I click on the text Sign Up from App.js it does not get transferred to SignUp.js page. However it changes the url from localhost:19006 to localhost:19006/SignUp when the Sign Up text is clicked.
App.js
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { Input, Button } from 'react-native-elements';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import SignUp from './SignUp';
const Stack = createStackNavigator();
export default function LoginPage() {
const [username, setUsername] = React.useState('');
const [password, setPassword] = React.useState('');
const handleLogin = () => {
// Code to handle login here, such as sending a request to a server to check credentials
}
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text style={{ fontSize: 24, marginBottom: 20 }}>Match Pass</Text>
<Input
containerStyle={{ width: '80%', marginBottom: 20 }}
inputContainerStyle={{ borderRadius: 10 }}
onChangeText={text => setUsername(text)}
value={username}
placeholder="Username"
leftIcon={{ type: 'font-awesome', name: 'user' }}
/>
<Input
containerStyle={{ width: '80%', marginBottom: 20 }}
inputContainerStyle={{ borderRadius: 10 }}
onChangeText={text => setPassword(text)}
value={password}
placeholder="Password"
secureTextEntry={true}
leftIcon={{ type: 'font-awesome', name: 'lock' }}
/>
<Button
title="Login"
onPress={handleLogin}
buttonStyle={{ backgroundColor: '#333', borderRadius: 10 }}
titleStyle={{ fontWeight: 'bold' }}
/>
<TouchableOpacity onPress={() => navigation.navigate('SignUp')}>
<Text>Create an account. Sign Up</Text>
</TouchableOpacity>
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="SignUp" component={SignUp} />
</Stack.Navigator>
</NavigationContainer>
</View>
);
}
SignUp.js
import React from 'react';
import { View, Text } from 'react-native';
export default function SignUp() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text style={{ fontSize: 24 }}>Sign Up</Text>
</View>
);
}
Both of those pages are in the same folder as well. It changes the URL but does not load the SignUp.js page when Sign Up text is clicked on App.js page.
How can I transfer the page from App.js to SignUp.js when clicked on Sign Up text from App.js?

Related

Components display perfectly on web view but aren't being displayed on android view in React Native

I'm building an instagram clone using React Native with Homescreen consisting of custom Header and Imagepost components,but it isn't showing up properly on android although it displays perfectly on web view(images below).
I only added the Text and the Test Button for testing purposes
HomeScreen.js:
import React, { useEffect, useState } from "react";
import { View, Text, TouchableOpacity, Button } from "react-native";
import axios from "axios";
import ImagePost from "../../components/ImagePost";
import Header from "../../components/Header";
import Ionicons from "react-native-vector-icons/Ionicons";
import useStore from "../../store";
const HomeScreen = ({ navigation }) => {
const [posts, setposts] = useState([]);
const [current, setcurrent] = useState(null);
const user = useStore((state) => state.currentUser);
const setcurrentUser = useStore((state) => state.setcurrentUser);
useEffect(() => {
axios.get("http://localhost:5000/posts").then((response) => {
console.log(response.data.posts);
setposts(response.data.posts);
});
}, []);
return (
<View>
<Header navigation={navigation} />
<Text>huidhoasodhiohdp</Text>
<Button title="test" />
{console.log("now user", user)}
{console.log("posts", posts)}
{posts &&
posts.map((post) => {
return (
<View key={post._id}>
<ImagePost post={post} navigation={navigation} />
{console.log("This post is", post)}
</View>
);
})}
</View>
);
};
export default HomeScreen;
Header.js:
import React from "react";
import { View, TouchableOpacity, Text } from "react-native";
import Ionicons from "react-native-vector-icons/Ionicons";
import useStore from "../store";
const Header = ({ navigation }) => {
console.log("header navigation", navigation);
const user = useStore((state) => state.currentUser);
return (
<View
style={{
flex: 1,
flexDirection: "row",
justifyContent: "space-between",
backgroundColor: "white",
}}
>
<TouchableOpacity
onPress={() => navigation.navigate("AddScreen")}
style={{ margin: "5%" }}
>
<Ionicons name="add-outline" size={25} color="black" />
</TouchableOpacity>
{user && <Text>{user.username}</Text>}
{user && console.log(user.username)}
<TouchableOpacity style={{ margin: "5%" }}>
<Ionicons name="chatbubble-ellipses-outline" size={25} color="black" />
</TouchableOpacity>
</View>
);
};
export default Header;
ImagePost.js :
import React from "react";
import { View, Text, Image, TouchableOpacity, Button } from "react-native";
import Ionicons from "react-native-vector-icons/Ionicons";
const ImagePost = ({ post, navigation }) => {
return (
<View>
<View style={{ flex: 1, flexDirection: "row", alignItems: "center" }}>
<Image
style={{
width: 50,
height: 50,
borderRadius: 50,
marginRight: "3%",
}}
source={post.creator.pic}
/>
<Text style={{ fontWeight: "bold" }}>User</Text>
</View>
<View style={{ width: "100%", height: 450 }}>
<Image
style={{ resizeMode: "cover", height: "100%" }}
source={post.file}
/>
<View style={{ flex: 1, flexDirection: "row", marginBottom: "6%" }}>
<TouchableOpacity style={{ marginRight: "1%" }}>
<Ionicons name="heart-outline" size={25} color="black" />
</TouchableOpacity>
<TouchableOpacity
style={{ marginRight: "1%" }}
onPress={() =>
navigation.navigate("CommentsScreen", { postId: post._id })
}
>
<Ionicons name="chatbubble-outline" size={25} color="black" />
</TouchableOpacity>
</View>
<Text>
<Text style={{ fontWeight: "bold", marginRight: "5%" }}>
{post.creator.userName}
</Text>
{post.description}
</Text>
</View>
</View>
);
};
export default ImagePost;
Android view
Web view

How to navigate to a screen in parent navigation in React native

I am very new to React Navigation and am trying to implement the following functionality in react-native:
I have a stack navigator as a parent and a bottom navigation bar as its child. From the home screen, when the user clicks the logout option, they should return to the Sign In screen which is a part of the parent navigation.
There are already a lot of questions regarding this, but I am not able to implement the previous solutions in my code.
Someone please help me out, the code is given below (This is an Expo managed project):
Navigation Components
import { NavigationContainer } from "#react-navigation/native";
import { createNativeStackNavigator } from "#react-navigation/native-stack";
import WelcomeScreen from "../screens/WelcomeScreen";
import Features from "../screens/Features";
import SignIn from "../screens/SignIn";
import Register from "../screens/Register";
import { createBottomTabNavigator } from "#react-navigation/bottom-tabs";
import { Icon } from "react-native-elements";
import Home from "../screens/Home";
import Reminders from "../screens/Reminders";
import Settings from "../screens/Settings";
const BottomNavbar = () => {
const Tab = createBottomTabNavigator();
return (
<Tab.Navigator
initialRouteName="Home"
screenOptions={({ route }) => ({
tabBarIcon: ({ focused }) => {
let iconName;
let rn = route.name;
if (rn === "Home") {
iconName = focused ? "home" : "home-outline";
} else if (rn === "Reminders") {
iconName = focused ? "list" : "list-outline";
} else if (rn === "Settings") {
iconName = focused ? "settings" : "settings-outline";
}
return (
<Icon
name={iconName}
size={25}
color="black"
type="ionicon"
/>
);
},
})}
showLabel
>
<Tab.Screen
name="Home"
component={Home}
options={{ headerShown: false }}
/>
<Tab.Screen
name="Reminders"
component={Reminders}
options={{ headerShown: false }}
/>
<Tab.Screen
name="Settings"
component={Settings}
options={{ headerShown: false }}
/>
</Tab.Navigator>
);
};
const Navigator = () => {
const Stack = createNativeStackNavigator();
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{ headerShown: false }}
initialRouteName="Welcome"
>
<Stack.Screen name="Welcome" component={WelcomeScreen} />
<Stack.Screen name="Features" component={Features} />
<Stack.Screen name="SignIn" component={SignIn} />
<Stack.Screen name="Register" component={Register} />
<Stack.Screen name="BottomNavbar" component={BottomNavbar} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default Navigator;
Home Screen Components
import {
View,
Text,
SafeAreaView,
StyleSheet,
TouchableOpacity,
ScrollView,
} from "react-native";
import React from "react";
import { Header, Image, Icon } from "react-native-elements";
import { useFonts } from "expo-font";
import ServiceCard from "../components/ServiceCard";
import PetCard from "../components/PetCard";
const SignOut = ({ navigation }) => {
return (
<TouchableOpacity
onPress={() => {
navigation.navigate("SignIn");
}}
>
<Icon name="logout" color="black" size={20} />
</TouchableOpacity>
);
};
const Home = () => {
const [loaded, error] = useFonts({
Montserrat: require("../assets/fonts/Montserrat-Regular.ttf"),
});
if (!loaded) {
return null;
}
const url1 =
"https://images.unsplash.com/photo-1530281700549-e82e7bf110d6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=388&q=80";
const url2 =
"https://images.unsplash.com/photo-1560807707-8cc77767d783?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=435&q=80";
const url3 =
"https://images.unsplash.com/photo-1543466835-00a7907e9de1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80";
return (
<View style={styles.screen}>
<Header
leftComponent={{
icon: "menu",
color: "black",
}}
rightComponent={<SignOut />}
centerComponent={{
text: "PetPapa",
color: "black",
style: {
fontFamily: "Montserrat",
fontSize: 20,
},
}}
barStyle="dark-content"
backgroundColor="white"
containerStyle={styles.header}
/>
<View style={styles.community}>
<View style={styles.commOffer}>
<View>
<Text style={styles.commOfferTitle}>Join our</Text>
<Text style={styles.commOfferTitle}>
community today!
</Text>
</View>
<TouchableOpacity style={styles.btn}>
<Text style={styles.commOfferJoin}>Join Now</Text>
</TouchableOpacity>
</View>
<Image
source={{
uri: "https://imgur.com/nB4Xm1Z.png",
}}
style={styles.commDog}
/>
</View>
<View style={styles.listView}>
<View style={styles.topText}>
<Text style={styles.title}>Services</Text>
<TouchableOpacity>
<Text style={styles.option}>See more</Text>
</TouchableOpacity>
</View>
<ServiceCard />
</View>
<View style={styles.listView}>
<View style={styles.topText}>
<Text style={styles.title}>My Pets</Text>
<TouchableOpacity>
<Text style={styles.option}>See all</Text>
</TouchableOpacity>
</View>
<ScrollView
style={styles.petView}
horizontal={true}
showsHorizontalScrollIndicator={true}
persistentScrollbar={true}
>
<PetCard name="Miles" Img={url1} />
<PetCard name="Jack" Img={url2} />
<PetCard name="Ellie" Img={url3} />
</ScrollView>
</View>
</View>
);
};
const styles = StyleSheet.create({
screen: {
height: "100%",
backgroundColor: "white",
alignItems: "center",
},
header: {
backgroundColor: "white",
height: 80,
},
community: {
backgroundColor: "#1976D2",
height: "15%",
width: "80%",
borderRadius: 20,
marginTop: 50,
flexDirection: "row",
justifyContent: "space-around",
},
commDog: {
marginTop: 10,
marginRight: 15,
height: 105,
width: 75,
},
commOffer: {
marginTop: 10,
flexDirection: "column",
justifyContent: "space-around",
},
commOfferTitle: {
color: "white",
fontFamily: "Montserrat",
fontSize: 16,
},
btn: {
backgroundColor: "#FFC107",
width: "50%",
borderRadius: 10,
},
commOfferJoin: {
color: "white",
margin: 5,
},
listView: {
marginTop: 50,
width: "80%",
},
topText: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
},
title: {
fontFamily: "Montserrat",
fontWeight: "600",
},
option: {
fontFamily: "Montserrat",
opacity: 0.4,
},
block: {
backgroundColor: "#FF5677",
width: 75,
height: 100,
justifyContent: "center",
alignItems: "center",
marginTop: 25,
borderRadius: 20,
},
petView: {
width: "100%",
backgroundColor: "white",
height: 250,
},
});
export default Home;
My Directory Structure:
First you need to add navigation prop to Home screen component
const Home = ({navigation}) => {
const [loaded, error] = useFonts({
Montserrat: require("../assets/fonts/Montserrat-Regular.ttf"),
});
...
then You need to pass navigation prop to the signout component
<Header
leftComponent={{
icon: "menu",
color: "black",
}}
rightComponent={<SignOut navigation={navigation} />}
...
You can also use useNavigation hook from react navigation
import { useNavigation } from '#react-navigation/native';
const SignOut = ({}) => {
const navigation = useNavigation()
return (
<TouchableOpacity
onPress={() => {
navigation.navigate("SignIn");
}}
>
<Icon name="logout" color="black" size={20} />
</TouchableOpacity>
);
};
If You want to create login flow then you should use Authentication flow which I think best prectice and recommended way
The problem in current flow if you logout and navigate to sign-in page once then if you navigate back from you app then as behaviour of stack navigation it just pop current screen and it will again navigate to home screen which is not what supposed to be correct.
You can learn it from react-navigation offical doc
https://reactnavigation.org/docs/auth-flow/
if you want a video tutorial how to implement Authentication flow using redux(state management lib) then I have video tutorial you can learn this video -> https://youtu.be/cm1oJ7JmW6c

Navigation, not working from Pulled functions

I will try to explain this as best I can, I'm still new and have a hard time understanding the terminology.
I am working on a react native project. I have created two files. One Header.js and one footer.js.
I have successfully pulled them in to my Home Screen. However the buttons, inside footer.js, no longer fires. I get; undefined is not an object (evaluating 'navigation.navigate') for the error.
How do I bring back the functionality?
Any help is very appreciated. Here is my project to help;
App.js
import React from 'react';
import TabNavigator from "./assets/component/TabNavigator";
import {StackNavigation} from "./assets/component/StackNavigation";
export default function App() {
return (
<StackNavigation/>
);
}
StackNavigation.js;
import React from 'react';
import { HomeScreen} from "../Screens/HomeScreen";
import LayoutProps from "../Screens/Layout Props";
import SampleViewProps from "../Screens/SampleViewProps";
import {NavigationContainer} from "#react-navigation/native";
import {createNativeStackNavigator} from "#react-navigation/native-stack";
// import ShareExample from "./assets/component/SBShare";
const Stack = createNativeStackNavigator();
export function StackNavigation() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen}/>
<Stack.Screen name="Layout Props" component={LayoutProps} />
<Stack.Screen name="View Props" component={SampleViewProps} />
</Stack.Navigator>
</NavigationContainer>
);
}
HomeScreen.js;
import React from 'react';
import {Button, View, SafeAreaView, StyleSheet} from 'react-native';
import HeaderSB from "../component/SBHeader";
import FooterSB from "../component/SBFooter";
// import ShareExample from "./assets/component/SBShare";
export function HomeScreen({navigation}) {
const receiveValue = (value) => {
console.log("value received from B", value)
}
return (
<>
<SafeAreaView style={styles.container}>
<View style={styles.headerContainer}>
<HeaderSB receiveValue={receiveValue}>
</HeaderSB>
</View>
<View style={styles.mainContent}>
<View style={styles.buttonBox}>
<Button onPress={() => navigation.navigate('Layout Props')} title="Layout Props"/>
<Button onPress={() => navigation.navigate('View Props')} title="View Style Props"/>
</View>
</View>
<View styles={styles.footerContainer}>
<FooterSB receiveValue={receiveValue}>
</FooterSB>
</View>
</SafeAreaView>
</>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "space-between",
},
headerContainer: {
},
mainContent: {
},
buttonBox: {}
,
footerContainer: {
},
});
Footer.js;
import * as React from "react";
import {StyleSheet, TouchableOpacity, View} from "react-native";
import {AntDesign, Feather} from "#expo/vector-icons";
import {StackNavigation} from "./StackNavigation";
const FooterSB = ({navigation}) => {
return (
<>
{/* Bottom App Navigation */}
<View style={footerStyle.navCon}>
<View style={footerStyle.navBar}>
{/* Home Button */}
<TouchableOpacity style={footerStyle.home} onPress={() =>
navigation.navigate('Home')}
>
{/* Icon */}
<AntDesign name="home" size={50} color="white"/>
</TouchableOpacity>
{/* Navigation Divider */}
<View style={footerStyle.navDivider}/>
{/* Setting Button */}
<TouchableOpacity style={footerStyle.settings} onPress={() =>
navigation.navigate('Layout Props')}
>
{/* Icon */}
<Feather name="settings" size={50} color="white"/>
</TouchableOpacity>
</View>
</View>
</>
);
}
const footerStyle = StyleSheet.create({
navCon: {
flex: 1,
marginTop: 20,
alignItems: "center",
justifyContent: "flex-end"
},
navBar: {
flexDirection: "row",
justifyContent: "space-evenly",
alignItems: "center",
backgroundColor: "#808080",
width: 500,
height: 50,
},
home: {
// paddingHorizontal: 55,
},
navDivider: {
backgroundColor: "#FFF",
width: 4,
height: 50,
},
settings: {
// marginRight: 107,
// paddingHorizontal: 55,
},
});
export default FooterSB;
If you want navigation as default prop you should add it as <Stack.Screen> but as FooterSB is custom and individual component it doesn't get wrapped with navigation prop automatically.
You need to pass navigation as prop to that so change below
<FooterSB receiveValue={receiveValue}>
</FooterSB>
to
<FooterSB receiveValue={receiveValue} navigation={navigation}>
</FooterSB>
Same way you can pass navigation to header too.

Rendering another screen in react-native app

I'm experiencing trouble navigating between pages in my react native app. When I attempt to use the button, I get the following error message: TypeError: undefined is not an object (evaluating '_this.props.navigation') I have created my app using numerous js files, and id like to navigate between them using buttons. My App.js file renders to the WelcomeScreen from initializing.
import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import RecipesList from "cakeapp/app/screens/RecipesList.js";
import { ImageBackground, StyleSheet, View, Text, Button, navigation } from "react-native";
function WelcomeScreen(props) {
return (
<NavigationContainer>
<ImageBackground
style={styles.background}
source={require('cakeapp/app/assets/MainPage.png')}
>
<Text style={styles.text}>MyCakeRecipes</Text>
<View style={styles.homeButton}>
<Button
title="Recipes"
onPress={() => this.props.navigation.navigate('RecipesList')}
/>
</View>
</ImageBackground>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
background: {
flex:1,
justifyContent: "flex-end",
},
text: {
fontSize: 30,
fontWeight: "bold",
color: "white",
textAlign: "center",
bottom: 500,
},
homeButton: {
width: '100%',
height: 40,
backgroundColor: '#5f7f8a'
}
})
export default WelcomeScreen;
import React from 'react';
import { Image, ScrollView, View, Text, } from 'react-native';
const imageDis = {
width: 150,
height: 150
//flex:1,
//justifyContent: "flex-end"
};
const Recipes = () => (
<ScrollView style={{backgroundColor: '#5f7f8a'}}>
<Text style={{ fontSize: 20 }}>Chocolate Cake</Text>
<Image source={require('cakeapp/app/assets/Choc.png')} style={imageDis} />
<Text style={{ fontSize: 20 }}>Chocolate cupcake</Text>
<Image source={require('cakeapp/app/assets/ChocCu.png')} style={imageDis} />
<Text style={{ fontSize: 20 }}>Lemon Cake</Text>
<Image source={require('cakeapp/app/assets/Lemon.png')} style={imageDis} />
<Text style={{ fontSize: 20 }}>Lemom meringue</Text>
<Image source={require('cakeapp/app/assets/LemonM.png')} style={imageDis} />
<Text style={{ fontSize: 20 }}>Chocolate Berry</Text>
<Image source={require('cakeapp/app/assets/ChcoBerry.png')} style={imageDis} />
</ScrollView>
);
export default Recipes
As far as I know, < NavigationContainer> is used in app.js file to define the screens you want to navigate to. And you have to pass navigation as a prop to the component.
Your app.js file should look something like this
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Welcome"
component={WelcomeScreen}
/>
<Stack.Screen
name="Recipes"
component={RecipesList} />
</Stack.Navigator>
</NavigationContainer>
);
};
And your welcomeScreen like this:
const WelcomeScreen = ({ navigation }) => {
return (
<Button
title="RecipesList"
onPress={() =>
navigation.navigate('RecipesList')
}
/>
);
};
Let me know if it doesnt work

React Native: Unable to navigate to the' Login.js' screen

I have created 3 files and places the navigation container in the app.js file. i am unable to navigate through the screens. I don't understand where the mistake lies.
App.js
import 'react-native-gesture-handler';
import React, { useState } from 'react';
import { NavigationContainer } from '#react-navigation/native';
import Login from './Login.js';
import {createStackNavigator} from '#react-navigation/stack';
import InitialScreen from './InitialScreen.js';
const Stack = createStackNavigator();
function Nav() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="InitialScreen">
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="InitialScreen" component={InitialScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default Nav;
InitialScreen.js
import 'react-native-gesture-handler';
import React, { useState } from 'react';
import {Button, Text, TextInput, View, StyleSheet ,TouchableOpacity,Image} from 'react-native';
import Icon from 'react-native-vector-icons/Feather';
import { NavigationContainer } from '#react-navigation/native';
import Login from './Login.js';
function InitialScreen({navigation}){
const pressHandler=()=>{
navigation.navigate('Login');
}
return (
<>
<View style={styles.container}>
<View style={styles.Container0}>
<TouchableOpacity>
<Text style={{backgroundColor:'white',
fontSize:30,
borderWidth:2,
borderRadius:4,
marginTop: 5,
marginLeft:10,
marginRight:10,
fontWeight:'bold',
textAlign:'center',
padding:2,
}} onPress={pressHandler}
>Login</Text>
<Text style={{marginLeft:10,
fontSize:15,}}> Do not have an account?</Text>
<Text style={{backgroundColor:'white',
fontSize:30,
borderWidth:2,
borderRadius:4,
marginTop: 5,
marginLeft:10,
marginRight:10,
fontWeight:'bold',
textAlign:'center',
padding:2,
}}>SignUp</Text>
</TouchableOpacity>
</View>
<View style={styles.Container1}>
<Image source={{uri: 'http://i.pinimg.com/originals/d1/9b/4d/d19b4d524b8f95b3c640228c28373696.jpg'}}
style={{width:'100%',
height:'100%',
marginTop:5,
flexDirection: 'column',
justifyContent: 'center',
alignSelf: 'center',}}/>
</View>
<View style={styles.Container3}>
<Text style={{fontSize:25,fontWeight:'bold',
color:'white',
textAlign:'center',
}}>I am going to be so productive!!!!!!</Text>
</View>
</View>
<View style={styles.icons}>
<Icon
name='download-cloud'
size={30}
/>
<Icon
name='mail'
size={30}
/>
<Icon
name='instagram'
size={30}
/>
<Icon
name='link'
size={30}
/>
</View>
</>
);
}
const styles=StyleSheet.create({
container:
{ flex:0.9,
marginLeft:5,
marginRight:5,
marginTop:5,
marginBottom:5,
backgroundColor:'black',
},
Container0:
{ flex:0.25,
flexDirection:'column',
backgroundColor:'#ffa07a',
},
Container1:
{
flex:0.6,
backgroundColor:'white',
},
Container3:
{flex:0.1,
justifyContent:"center",
alignItems:'center',
marginTop:10,
},
icons:
{
flex:0.1,
flexDirection: 'row',
justifyContent:'space-around',
marginTop:10,
},
}
);
export default InitialScreen;
Login.js
import 'react-native-gesture-handler';
import React, { useState } from 'react';
import { Text, TextInput, View, StyleSheet ,TouchableOpacity,Image} from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
function Login() {
const [text,onChangeText]= React.useState('Enter your email');
const [Value,setValue]= React.useState('Enter your password');
return(
<View style={styles.container}>
<Text style={{marginTop:40,fontWeight:'bold',fontSize:40,textAlign:'center',}}>Login</Text>
<TextInput
style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
onChangeText={text => onChangeText(text)}
value={value}
/>
<TextInput
style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
setValue={Value => setValue(Value)}
value={value}
/>
</View>
);
}
const styles=StyleSheet.create({
container:
{
flexDirection:'column',
}
});
export default Login;
I don't understand why the "onPress" isn't working here . I am unable to even click on it . it is just like a text with no response or change in opacity too . The navigation isn't working either.
#nandita you are using onPress on Text tag. onPress event only works on TouchableOpacity or TouchableHightlight
try doing this.
<TouchableOpacity onPress={pressHandler}>
<Text style={{backgroundColor:'white',
fontSize:30,
borderWidth:2,
borderRadius:4,
marginTop: 5,
marginLeft:10,
marginRight:10,
fontWeight:'bold',
textAlign:'center',
padding:2,
}}
>Login</Text>
<TouchableOpacity>

Categories

Resources