I tried using ReactButton, but the onPress function doesn't run on click. All posts found on google are about not writing an arrow function in onPress, but that's not my mistake.
I don't know what it could be anymore, the function is not executed. I put a console.log inside to see if it appeared when clicking and nothing.
import * as React from 'react';
import { Text, StyleSheet, View, TextInput, ScrollView, Button } from 'react-native'
import { RectButton } from 'react-native-gesture-handler';
const SignIn = ({ navigation }) => {
return (
<ScrollView style={styles.scrollView}>
<Text style={styles.PageName}>SignIn</Text>
<View style={styles.form}>
<TextInput
placeholder="Email"
style={styles.input}
onChangeText={() => { }}
/>
<TextInput
placeholder="Password"
style={styles.input}
onChangeText={() => { }}
/>
<RectButton
style={styles.RectButton}
onPress={ () => navigation.navigate('Home') }
>
<View style={styles.button}>
<Text style={{ color: 'white' }}>SignIn</Text>
</View>
</RectButton>
<Text onPress={() => navigation.navigate('SignUp')}>Never SignUp? SignUp, click here.</Text>
</View>
</ScrollView>
);
};
Related
I have a problem in navigation lifecycle, which when I navigate from screen to other the last one doesn't stay focus and quickly re navigate to the previous screen. Please if anyone can help me.
This is my AuthStack.tsx file :
import React, { useState, useEffect, useContext } from 'react'
import { createStackNavigator } from "#react-navigation/stack";
import { Text, Button } from 'react-native';
import { Center } from './Center';
import { AuthParamList, AuthNavProps } from "./AuthParamList.ts";
import { AuthContext } from "./AuthProvider";
import { SplashScreen } from "./splashes/SplashScreen";
import {LoginScreen} from './authentificationScreens/LoginScreen'
import {RegisterScreen} from './authentificationScreens/RegisterScreen'
interface AuthStackProps {
}
const Stack = createStackNavigator<AuthParamList>();
export const AuthStack: React.FC<AuthStackProps> = ({}) => {
return (
<Stack.Navigator
screenOptions={{
header: () => {null}
}}
initialRouteName="SplashScreen"
>
<Stack.Screen
options={{ headerShown: false }}
name='SplashScreen'
component={SplashScreen}
/>
<Stack.Screen
name='LoginScreen'
component={LoginScreen}
/>
<Stack.Screen
name='RegisterScreen'
component={RegisterScreen}
/>
</Stack.Navigator>
);
}
and this is the Login Screen :
import React, { useState, useContext, useEffect } from 'react'
import { View, Text, ScrollView, ImageBackground , Dimensions, StyleSheet, Pressable } from 'react-native';
import { Input, ListItem, CheckBox, Button, Switch } from 'react-native-elements';
import { LinearGradient } from 'expo-linear-gradient';
import { AuthParamList, AuthNavProps } from "../AuthParamList.ts";
import { AuthContext } from "../AuthProvider";
import Ionicons from 'react-native-vector-icons/Ionicons';
import * as Animatable from 'react-native-animatable';
import { EventRegister } from "react-native-event-listeners";
import BgGigaFit from "../../assets/background.jpg";
import GigaFitLogo from '../../assets/GigaFitLogo1.png'
interface LoginScreenProps {}
export const LoginScreen: React.FC<LoginScreenProps> = ({ navigation, route }: AuthNavProps<"LoginScreen">) => {
const {login} = useContext(AuthContext);
const [darkMode, setDarkMode] = useState(false);
return (
<ScrollView
style={{flex: 1, backgroundColor: 'darkgray'}}
showsVerticalScrollIndicator={false}
>
<ImageBackground
source={BgGigaFit}
style={{
height: Dimensions.get('window').height / 2.5,
}}
>
{/* <View style={styles.SwitchDarkTheme}>
<ListItem style={styles.SwitchDarkTheme}>
<Switch value={false} color="#52c234"/>
</ListItem>
</View> */}
<View style={styles.brandView}>
{/* <Icon type="FontAwesome" name="home" style={{color: '#ffffff', fontSize: 100}} /> */}
<Ionicons name="md-barbell-outline" size={50} color="#52c234" />
<Animatable.Image
animation="fadeIn"
duration= {4000}
source={GigaFitLogo}
style={styles.logo}
resizeMode="stretch"
/>
</View>
</ImageBackground>
{/*Bottom View*/}
<View style={styles.bottomView}>
{/*Welcome View */}
{/* <View style={styles.SwitchDarkTheme}>
<ListItem>
<Switch value={darkMode} color="#52c234"
onValueChange= {(val) => {
setDarkMode(val);
EventRegister.emit('changeThemeEvent', val)
}}
/>
</ListItem>
</View> */}
<View style={{padding: 40}}>
<Text style={{color: '#52c234', fontSize: 34}}>Welcome</Text>
<Text>Don't have an account yet !!!
<Text onPress={()=> navigation.navigate('RegisterScreen')} style={{color: '#52c234', fontStyle: 'italic'}}>Register Now</Text>
</Text>
{/**Form Inputs View */}
<View style={{marginTop: 50}}>
<Input
placeholder="Email"
rightIcon={<Ionicons name="md-checkmark-done-sharp" size={20} color="#52c234" />}
/>
<Input
placeholder="Password"
rightIcon={<Ionicons name="ios-eye" size={20} color="#52c234" />}
/>
{/**Forgot Password and create new view */}
<View style={styles.forgotPasswordView}>
<View style={{flex: 1, marginTop:-10, marginLeft: -30}}>
<ListItem noBorder>
<CheckBox checked={true} checkedColor="#52c234"/>
<ListItem.Content style={{marginLeft: -35}}>
<Text style={{color: "#52c234"}}>
Remember Me
</Text>
</ListItem.Content>
</ListItem>
</View>
<View style={{flex: 1, marginTop:-3, marginRight: -150}}>
<ListItem noBorder>
<ListItem.Content style={{marginLeft: -40}}>
<Text style={{color: "#52c234"}}>
Forgot Password
</Text>
</ListItem.Content>
</ListItem>
</View>
</View>
{/**Login Button */}
<View style={{height: 100, justifyContent: 'center', alignItems: 'center'}}>
{/* <Button type="Solid" rounded buttonStyle={styles.loginButton}>
<Text style={{color: "#ffffff"}}>Login</Text>
</Button> */}
<Button
icon={
<Ionicons name="md-checkmark-circle-outline" size={20} color="#ffffff" />
}
// title="Login"
type="Outline"
buttonStyle={styles.loginButton}
onPress={() => login()}
/>
</View>
</View>
</View>
</View>
</ScrollView>
);
}
and this is the Register Screen :
import React, { useContext, useEffect } from 'react'
import { AuthParamList, AuthNavProps } from "../AuthParamList.ts";
import { Center } from './../Center';
import { Text, Button } from 'react-native';
interface RegisterScreenProps {}
export const RegisterScreen: React.FC<RegisterScreenProps> = ({ navigation, route }: AuthNavProps<"RegisterScreen">) => {
// useEffect(() => {
// const unsubscribe = navigation.addListener('focus', () => {
// --------------------------------------
// });
// return unsubscribe;
// }, [navigation]);
return (
<Center>
<Text>I am a Register Screen</Text>
<Button title="go to login" onPress={() => {
navigation.navigate('LoginScreen');
// navigation.goBack()
}} />
</Center>
);
}
My Problem is when I navigate from the Login Screen to the Register Screen it just show for a moment and re navigate it self quickly to the login Screen.
I want to make network call to delete an item from an array. The end point is expecting me to pass the title as the ID of the item to be deleted in the array.
The array is of this form in the database:
payload: {
title: string,
description: string
}
Here is my implementations so far.
import React from "react";
import {
FlatList,
View,
Text,
StyleSheet,
ActivityIndicator,
} from "react-native";
import { Feather } from "#expo/vector-icons";
import { MaterialIcons } from "#expo/vector-icons";
import {
widthPercentageToDP as WP,
heightPercentageToDP as HP,
} from "react-native-responsive-screen";
import dimensions from "../../constants/dimensions";
import { fetchTodo, useDeleteTodo } from "../../server";
import showToast from "../../components/toast";
export default function TodoList({navigation}) {
const {data, isLoading } = fetchTodo()
console.log(data?.data)
const {mutateAsync} = useDeleteTodo()
const handleDelete = async (title:string) => {
try {
const response = await mutateAsync(title)
showToast(response.data.message);
// setClearTextInput("");
} catch (error) {
showToast(error);
}
};
return (
<View style={styles.container}>
<FlatList
contentContainerStyle={styles.contentContainer}
data={data?.data.payload}
keyExtractor={(ITodo) => ITodo.title}
renderItem={(renderTodo) => {
return (
<View style={styles.itemContainer}>
<Text style={styles.item}>{renderTodo.item.title}</Text>
<View style={styles.actionStyle}>
<Feather name="edit" size={WP(6)} color="blue"
onPress={()=>
navigation.navigate('EditTodoScreen')
}
/>
<MaterialIcons
name="delete"
size={WP(6)}
color="red"
onPress={() => {
handleDelete()
}}
/>
</View>
</View>
);
}}
ListEmptyComponent={() =>
isLoading ? (
<ActivityIndicator color="red" />
) : (
<Text style={{ marginTop: HP(8), fontSize: WP(7) }}>
List is empty
</Text>
)
}
/>
</View>
);
}
I have already made the title to be the key in the FlatList keyExtractor and I want to pass the title of the item clicked to the handleDelete(). It tried to pass "renderTodo" to it but i could not get the title from it. I am still new to react-native. Please how can i achieve this?
I would suggest you to do like this (This looks more clean and easy to understand.
keyExtractor={({ title }) => title}
renderItem={({ item }) => {
return (
<View style={styles.itemContainer}>
<Text style={styles.item}>{item.title}</Text>
<View style={styles.actionStyle}>
<Feather name="edit" size={WP(6)} color="blue"
onPress={()=>
navigation.navigate('EditTodoScreen')
}
/>
<MaterialIcons
name="delete"
size={WP(6)}
color="red"
onPress={() => {
handleDelete(item.title)
}}
/>
</View>
</View>
);
}}
I am showing a view Login.js and in that view on button click, I need to render modal, that I have separated and written in another file named Countries.js.
On Login.js file I have imported Countries.js and on button click, I am doing this:
show_modal = () => {
<Countries/>
}
but nothing is happening. I am a noob I just started React Native kindly help me.
Countries.js code:
import React, { Component, useState } from "react";
import {
Alert,
Modal,
Text,
TouchableHighlight,
View
} from "react-native";
const Countries = () => {
console.log('called');
const [modalVisible, setModalVisible] = useState(true);
return (
<View style={styles.centeredView}>
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert("Modal has been closed.");
}}
>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<Text style={styles.modalText}>Hello World!</Text>
<TouchableHighlight
style={{ ...styles.openButton, backgroundColor: "#2196F3" }}
onPress={() => {
setModalVisible(!modalVisible);
}}
>
<Text style={styles.textStyle}>Hide Modal</Text>
</TouchableHighlight>
</View>
</View>
</Modal>
<TouchableHighlight
style={styles.openButton}
onPress={() => {
setModalVisible(true);
}}
>
<Text style={styles.textStyle}>Show Modal</Text>
</TouchableHighlight>
</View>)
};
export default Countries;
Login.js
import React, { Component, useState } from "react";
import {Modal, View, Text, TouchableHighlight} from 'react-native';
import CountryModal from 'path to outsource country modal file';
const login = (props)=>{
const [modalVisible, setModalVisible] = useState(true);
return(
<View>
<TouchableHighlight
style={styles.openButton}
onPress={() => {
setModalVisible(true);
}}
>
<Text style={styles.textStyle}>Show Modal</Text>
</TouchableHighlight>
<CountryModal isVisible={modalVisible} setModalVisiblity = {()=>{setModalVisible(preState=> preState = !preState)}}>
</View>
)
}
export default login;
Country Modal file
import React from react;
import {Modal} from 'react-native';
const Country = (props)=>{
return (
<Modal
animationType="slide"
transparent={true}
visible={isVisible}
onRequestClose={() => {
Alert.alert("Modal has been closed.");
}}
>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<Text style={styles.modalText}>Hello World!</Text>
<TouchableHighlight
style={{ ...styles.openButton, backgroundColor: "#2196F3" }}
onPress={() => {props.setModalVisiblity
}}
>
<Text style={styles.textStyle}>Hide Modal</Text>
</TouchableHighlight>
</View>
</View>
</Modal>
)
}
Hope you got your answer.
Change this
show_modal = ()=> {
<Countries/>
}
to this
show_modal = ()=> {
return <Countries/>; // add return keyword
}
the above function will return undefined if return id not explicitly defined
You need to have this modal directly with other components.
Example code
export default function Login() {
const [modalVisible, setModalVisible] = useState(false);
return (
<View>
<Button title="Toggle Modal" onPress={() => setModalVisible(!modalVisible)}
// other login page code
<Countries visible={visible} /> // or any other modal, add direclty to the screen you need to show the modal at
</View>
)
}
I am trying to make a background color to change on my flatist whenever I press the search bar to make an input. When testing by making searchBarFocused:true an error pops up saying Undefined is not an object (evaluating 'this.state').
Here is the full code of the SearchScreen.js:
import React from 'react';
import { ScrollView, StyleSheet, TextInput, Text, View, FlatList, Keyboard, Image, TouchableOpacity, TouchableWithoutFeedback} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import * as Animatable from 'react-native-animatable';
const listItems = ['Meo Sudoeste', 'Vodafone Paredes de Coura', 'Super Bock Super Rock', 'NOS Primavera Sound', 'Rock in Rio', 'EDP Cool Jazz']
function SearchScreen({navigation}) {
state={
searchBarFocused: true
}
return (
<View style={styles.screen}>
<Animatable.View animation='slideInLeft' duration={500} style={styles.container}>
<Icon name='ios-search' style={styles.icon}/>
<TextInput style={styles.inputBox}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder="Procura aqui"
placeholderTextColor = "black"
selectionColor="black"
keyboardType="default"/>
</Animatable.View>
<View style={styles.teste}>
<Text style={styles.festivais}>Recomendados</Text>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={styles.festivais_lista}>
//I took this part off because it is irrelevant
</ScrollView>
<FlatList
style={{backgroundColor:this.state.searchBarFocused?'rgba(0,0,0,0.3)':'white'}}
data = {listItems}
renderItem={({item}) => <Text style = {{ padding:20, fontSize:20}}>{item}</Text>}
keyExtractor={(item, index) => index.toString()}
/>
</View>
</View>
);
}
SearchScreen.navigationOptions = {
title: 'Procurar',
};
const styles = StyleSheet.create({
//Took this part off, its irrelevant
export default SearchScreen;
Why am I getting this error and can I correct it? Please help me
You're using functional component in your codebase, so you should use React Hooks to handle states.
import React, {useState} from 'react'
function SearchScreen({navigation}) {
const [searchBarFocused, setSearchBarFocused] = useState(false)
return (
<View style={styles.screen}>
<Animatable.View animation='slideInLeft' duration={500} style={styles.container}>
<Icon name='ios-search' style={styles.icon}/>
<TextInput style={styles.inputBox}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder="Procura aqui"
placeholderTextColor = "black"
selectionColor="black"
keyboardType="default"/>
</Animatable.View>
<View style={styles.teste}>
<Text style={styles.festivais}>Recomendados</Text>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={styles.festivais_lista}>
//I took this part off because it is irrelevant
</ScrollView>
<FlatList
style={{backgroundColor:searchBarFocused?'rgba(0,0,0,0.3)':'white'}}
data = {listItems}
renderItem={({item}) => <Text style = {{ padding:20, fontSize:20}}>{item}</Text>}
keyExtractor={(item, index) => index.toString()}
/>
</View>
</View>
);
}
Otherwise, if you want to use Class components, then you can use class members as states.
class SearchScreen extends React.Component {
state={
searchBarFocused: true
}
return (
<View style={styles.screen}>
<Animatable.View animation='slideInLeft' duration={500} style={styles.container}>
<Icon name='ios-search' style={styles.icon}/>
<TextInput style={styles.inputBox}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder="Procura aqui"
placeholderTextColor = "black"
selectionColor="black"
keyboardType="default"/>
</Animatable.View>
<View style={styles.teste}>
<Text style={styles.festivais}>Recomendados</Text>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={styles.festivais_lista}>
//I took this part off because it is irrelevant
</ScrollView>
<FlatList
style={{backgroundColor:this.state.searchBarFocused?'rgba(0,0,0,0.3)':'white'}}
data = {listItems}
renderItem={({item}) => <Text style = {{ padding:20, fontSize:20}}>{item}</Text>}
keyExtractor={(item, index) => index.toString()}
/>
</View>
</View>
);
}
to use this.state you should have a class based component or use Hook instead for your functional component
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, Image, TextInput, TouchableOpacity, background, ImageBackground,} from 'react-native';
import { navigate, navigation, } from 'react-navigation';
const lockIcon = require("./assets/images/lock.png");
const personIcon = require("./assets/images/person.png");
export default class screens extends Component {
render() {
return (
<ImageBackground
style={[styles.background, styles.container]}
source={background}
resizeMode="cover"
>
<View style={styles.container} />
<View style={styles.wrapper}>
<View style={styles.inputWrap}>
<View style={styles.iconWrap}>
<Image
source={personIcon}
style={styles.icon}
resizeMode="contain"
/>
</View>
<TextInput
placeholder="Username"
style={styles.input}
underlineColorAndroid="transparent"
/>
</View>
<View style={styles.inputWrap}>
<View style={styles.iconWrap}>
<Image
source={lockIcon}
style={styles.icon}
resizeMode="contain"
/>
</View>
<TextInput
placeholder="Password"
secureTextEntry
style={styles.input}
underlineColorAndroid="transparent"
/>
</View>
<TouchableOpacity activeOpacity={.5} style={styles.button}
title="Go to Jane's profile"
onPress={() => navigation.navigate('Profile')}
/>
<TouchableOpacity activeOpacity={.5}>
<View>
<Text style={styles.forgotPasswordText}>Forgot Password?</Text>
</View>
</TouchableOpacity>
</View>
<View style={styles.container} />
</ImageBackground>
);
}
}
TypeError: Cannot read property 'navigate' of undefined
You seem to be confused with react-navigation API.
First, you need to understand one thing: you can not just make import { navigation } from 'react-navigation' and then call navigation.navigate('YourRoute'), because the library (react-navigation) has no idea about your screens (routes). To make it understand what YourRoute (in your case it's Profile) actually is, you need to provide it some information.
Create separate file and call it Navigation. Then paste this code into it:
import React from 'react';
import { View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import LoginScreen from './pathToYourLoginScreenGoesHere';
import ProfileScreen from './pathToYourProfileScreenGoesHere';
const AppNavigator = createStackNavigator(
{
Login: {
screen: LoginScreen,
},
Profile: {
screen: ProfileScreen,
},
},
{
initialRouteName: 'Login',
},
);
export default AppNavigator;
By doing that, you create your basic navigation stack with two screens (Login and Profile) and have your Login screen as initial. But now it's just a separate file and your application knows nothing about it. Now you should connect this file with your app. Modify your App.js file:
import AppNavigator from './hereGoesRouteToThePreviousFile';
const AppContainer = createAppContainer(AppNavigator);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
Providing AppContainer as a root component of your app you pass all necessary props to child screens. Now you have navigation prop in your child screens under the hood.
Now you should modify your file in 2 steps:
Delete import { navigate, navigation, } from 'react-navigation'; string
Right before return word you should paste this line of code: const { navigation } = this.props;
So now your file should look like this:
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, TextInput, TouchableOpacity, ImageBackground,} from 'react-native';
import styles from './pathToYourStylesFile';
const background = require("./assets/images/yourBackgroundImageFile.png");
const lockIcon = require("./assets/images/lock.png");
const personIcon = require("./assets/images/person.png");
export default class screens extends Component {
render() {
const { navigation } = this.props;
return (
<ImageBackground
style={[styles.background, styles.container]}
source={background}
resizeMode="cover"
>
<View style={styles.container}>
<View style={styles.wrapper}>
<View style={styles.inputWrap}>
<View style={styles.iconWrap}>
<Image
source={personIcon}
style={styles.icon}
resizeMode="contain"
/>
</View>
<TextInput
placeholder="Username"
style={styles.input}
underlineColorAndroid="transparent"
/>
</View>
<View style={styles.inputWrap}>
<View style={styles.iconWrap}>
<Image
source={lockIcon}
style={styles.icon}
resizeMode="contain"
/>
</View>
<TextInput
placeholder="Password"
secureTextEntry
style={styles.input}
underlineColorAndroid="transparent"
/>
</View>
<TouchableOpacity activeOpacity={.5} style={styles.button}
title="Go to Jane's profile"
onPress={() => navigation.navigate('Profile')}
/>
<TouchableOpacity activeOpacity={.5}>
<View>
<Text style={styles.forgotPasswordText}>Forgot Password?</Text>
</View>
</TouchableOpacity>
</View>
<View style={styles.container} />
</ImageBackground>
);
}
}
Also pay attention at these moments: I deleted import of background property from 'react-native' lib, because there is no exported property like that in react-native. Instead, provide real path to const background = require("./assets/images/yourBackgroundImageFile.png");, it should be a real image you want to use as a background image.