Home.js
this is the code for my Home.js screen
import React from "react";
import { StyleSheet, Text, View, Image, FlatList, TouchableOpacity, ImageBackground } from "react-native";
import colors from "../assets/Colors/colors";
import { ScrollView } from "react-native";
import { Entypo } from '#expo/vector-icons';
import activitiesData from "../assets/Data/activitiesData";
import discoverCategoriesData from "../assets/Data/discoverCategoriesData";
import discoverData from "../assets/Data/discoverData";
import learnMoredata from "../assets/Data/learnMoredata";
import { SafeAreaView } from "react-native-safe-area-context";
import Profile from "../assets/Images/person.png";
import { MaterialIcons } from '#expo/vector-icons';
import Details from "./Details";
import {
Lato_100Thin,
Lato_100Thin_Italic,
Lato_300Light,
Lato_300Light_Italic,
Lato_400Regular,
Lato_400Regular_Italic,
Lato_700Bold,
Lato_700Bold_Italic,
Lato_900Black,
Lato_900Black_Italic
} from '#expo-google-fonts/lato';
import { useFonts } from "#expo-google-fonts/lato";
import AppLoading from "expo-app-loading";
const Home = ({ navigation }) => {
const renderDiscoverItem = ({item}) => {
return (
<TouchableOpacity
onPress={() =>
navigation.navigate("Details")
}>
<ImageBackground
source={item.image}
style={[
styles.disoverItem,
{ marginLeft: item.id === "discover-1" ? 20 : 0 },
]}
imageStyle={styles.disoverItemImage}
>
<Text style={styles.discoverItemTitle}>{item.title}</Text>
<View style={styles.discoverItemLocationWrapper}>
<MaterialIcons name="location-pin" size={24} color="white" />
<Text style={styles.discoverItemLocationText}>{item.location}</Text>
</View>
</ImageBackground>
</TouchableOpacity>
)
}
Details.js
this is the code for my Details.js screen
import React from "react";
import { Text, View } from "react-native";
const Details = () => {
return (
<View>
<Text>
Details
</Text>
</View>
);
}
export default Details;
this is the code for my home and details screen I need to tap on the box then I should redirect on to the details screen
Look at this image
can you help me resolve this issue fast I need to complete my project
update this in your app.js
<NavigationContainer>
<AppStack.Navigator>
<AppStack.Screen name='Details' component={Details} />
</AppStack.Navigator>
</NavigationContainer>
Related
I'm not sure what's wrong here, as far as I can tell I am doing this correctly as it has worked everywhere else in my app. The only difference is that I'm trying to do this from a FlatList component. What is wrong with this? I've also tried putting {navigation} in renderMyItem instead of FLToyCard brackets, didn't work either. Error I'm getting is:
TypeError: undefined is not an object (evaluating 'navigation.navigate').
import { StyleSheet, Text, View, FlatList } from 'react-native'
import React from 'react'
import Toy from './Database'
import ToyCard from './ToyCard'
const FLToyCard = ({navigation}) => {
const headerComp = () => {
return(
<View style={{alignSelf: 'center'}}>
<Text style={{fontSize: 25, padding: 10}}>All Toys For Sale</Text>
</View>
)
}
const renderMyItem = ({item}) => {
return(
<View style={{flex: 1}}>
<ToyCard
name={item.name}
image={item.image}
price={item.price}
desc={item.desc}
seller={item.seller}
onPress={()=>navigation.navigate('SlugProduct')}
/>
</View>
)
}
return(
<View>
<FlatList
data={Toy}
renderItem={renderMyItem}
keyExtractor={(item)=>item.id}
numColumns={2}
ListHeaderComponent={headerComp}
/>
</View>
)
}
export default FLToyCard
This is my App.js:
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native'
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import SlugProduct from './Screens/SlugProduct';
export default function App() {
const Stack = createNativeStackNavigator()
return (
<NavigationContainer>
<Stack.Navigator initialRouteName='Login' >
// list of other pages
<Stack.Screen name="SlugProduct" component={SlugProduct} />
<Stack.Screen name='ViewToys' component={ViewToys}
</Stack.Navigator>
</NavigationContainer>
);
}
EDIT: heres the ViewToys page that FLToyCard is being input into. I've tried adding the onPress into both Views and FLToyCard but got the same error each time.
import { StyleSheet, Text, View, ScrollView} from 'react-native'
import React from 'react'
import FLToyCard from '../Components/FlatListCards'
const ViewToys = ({navigation}) => {
return (
<View style={{backgroundColor: '#ffce20', height: '100%'}}>
<View>
<FLToyCard />
</View>
</View>
)
}
export default ViewToys
The issue is that your not passing navigation props from screen ViewToys into component FLToyCard.
Try this
In ViewToys Screen:
import { StyleSheet, Text, View, ScrollView} from 'react-native'
import React from 'react'
import FLToyCard from '../Components/FlatListCards'
const ViewToys = ({navigation}) => {
return (
<View style={{backgroundColor: '#ffce20', height: '100%'}}>
<View>
<FLToyCard navigation={navigation}/>
</View>
</View>
)
}
export default ViewToys
change this <FLToyCard /> to this <FLToyCard navigation={navigation} />
and you are all done.
you are getting undefined in navigation in FLToyCard component that's why you are getting this error.
This error come when we do not put these mention in a page
import { NavigationContainer,useFocusEffect } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
So I think put above in every page once your problem will solve,
I am creating a react native application and I have problem when I want to navigate between screens it gives error as " Cannot read property 'navigate' of Undefined " . I want when I press gear icon it must navigate to settings part . I couldn't clearly see where did I mistake .
settings button touchable opacity
import React from 'react';
import {createStackNavigator} from 'react-navigation-stack';
import { createAppContainer} from 'react-navigation';
import PS from '../screens/PS';
import SPC from '../screens/SPC';
import TFA from '../screens/2FA';
import Login from '../screens/Login';
import Settings from '../screens/settings';
const screens = {
Login: {
screen: Login,
navigationOptions: {
header: null,
}
},
TFA:{
screen: TFA
},
PS: {
screen: PS,
navigationOptions: {
header: null,
}
},
SPC: {
screen: SPC
},
Settings: {
screen: Settings
}
}
const HomeStack = createStackNavigator(screens);
export default createAppContainer(HomeStack);
import React, {useState}from 'react';
import SettingsButton from './SettingsButton';
import ConnectionIcon from './Connectionİcon';
import { View, Image, StyleSheet } from 'react-native';
const Header = () => {
return (
<View style={styles.header}>
<View style={styles.headerp1}></View>
<View style={styles.headerp2}><Image
source={require('../assets/images/monitor.png')}
/></View>
<View style={styles.headerp3}>
<SettingsButton />
<ConnectionIcon />
</View>
</View>
)
}
export default Header;
// const styles here
import React from 'react';
import { Image, TouchableOpacity, StyleSheet } from 'react-native';
const SettingsButton = ({ navigation }) => {
return (
<TouchableOpacity
style={styles.headerp3v2}
onPress={() => navigation.navigate('Settings')}
>
<Image style={styles.reddot}
source={require('../assets/images/gear.png')}
/>
</TouchableOpacity>
)
}
export default SettingsButton;
// const stlyes codes here
header file is here
import { Image, StyleSheet, Button, View, Text, SafeAreaView, StatusBar } from 'react-native';
import Footer from '../components/Footer';
import Header from '../components/Header';
import PV from '../components/PV';
export default function PS() {
return (
<View style={styles.container}>
<StatusBar hidden />
<Header />
<View><Text style={styles.text}>All Persons</Text></View>
<PV />
<Footer/>
</View>
);
}```
You don't pass navigation prop into SettingsButton
You can try use useNavigation hook https://reactnavigation.org/docs/use-navigation/ for get navigation object into SettingsButton
import React from 'react';
import { Image, TouchableOpacity, StyleSheet } from 'react-native';
import { useNavigation } from '#react-navigation/native'; // <-- new code
const SettingsButton = () => {
const navigation = useNavigation(); // <-- new code
return (
<TouchableOpacity
style={styles.headerp3v2}
onPress={() => navigation.navigate('Settings')}
>
<Image style={styles.reddot}
source={require('../assets/images/gear.png')}
/>
</TouchableOpacity>
)
}
export default SettingsButton;
I want to pass parameters to a view. I followed some examples, but to no avail. How do I do it?
A part of my code:
Home:
import React from 'react';
import { MaterialIcons } from '#expo/vector-icons';
import { useNavigation } from '#react-navigation/native';
import { View, Text, Image, StyleSheet, ScrollView } from 'react-native';
import colors from '../../components/colors';
import Shoe from '../../components/home/shoe';
import Teste from '../teste';
import Detail from '../detail';
export default function Home(props) {
return(
<View style={styles.storeProducts_line}>
<Shoe
source={require('../../images/home/tenisAdidasFalconFeminino.jpg')}
title="Tênis Adidas Falcon Feminino"
price="200,00"
onClick={() => props.navigation.navigate('Detail', {
productId: 12,
productTitle: 'Tênis Adidas',
})}
/>
<Shoe
source={require('../../images/home/tenisAdidasYeezySalt.jpg')}
title="Tênis Adidas Yeezy Salt"
price="175,90"
onClick={() => navigation.navigate('Detail')}
/>
</View>
);
}
Detail:
import React from 'react';
import { View, Text, StyleSheet, ScrollView, Image } from 'react-native';
export default function Detail({props, navigation}) {
const productId = navigation.getParam('userId');
// const productId = props.navigation.getParam('userId');
return(
<View style={styles.container}>
<Image
/>
<Text>
Detail
</Text>
<Text>
{productId}
</Text>
</View>
);
}
All the examples I saw the structure of the view is different, do I have to change the structure to work? I'm new to react-native, bear with me. Thanks in advance for your attention.
You can also use route to access the passed data from parent component.
Example:
import React from 'react';
import { View, Text, StyleSheet, ScrollView, Image } from 'react-native';
export default function Detail({route, navigation}) {
const {productId} = route.params;
// const productId = props.navigation.getParam('userId');
return(
<View style={styles.container}>
<Image
/>
<Text>
Detail
</Text>
<Text>
{productId}
</Text>
</View>
);
}
For more please do read this doc: Passing parameters to routes
Background:
I've created a Screens.js file which contains each separate screen as a function. Then I'm calling the screens from App.js.
What I have tried
This is a mockup of what I have in the Screens.js file.
import React from 'react';
import {StyleSheet, View, Text, Image, Button, TextInput} from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { createStackNavigator} from '#react-navigation/stack';
export const LoginScreen = ({ navigation }) => {
return (
<View>
<Text> This is a Login Screen </Text>
<Button
title="Go to Home"
onPress={() => navigation.navigate('Home')}
/>
</View>
)
}
export const HomeScreen = ({ navigation }) => {
return (
<View>
<Text> This is a Home Screen </Text>
</View>
)
}
And this is App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { createStackNavigator} from '#react-navigation/stack';
import { LoginScreen, HomeScreen } from './app/Screens.js';
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Login" component={ LoginScreen } />
<Stack.Screen name="Home" component={ HomeScreen } />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
Problem
When I try and run the app in expo, I get the following error message: "Invariant Violation: Module RCTEventEmitter is not a registered callable Module (calling recieveTouches)" I have absolutely no idea what any of this means, I don't even know what an RCTEventEmitter or recieveTouches actually is.
Question
Is this the correct method to import a function from a separate file? Is there any better way? Maybe the problem isn't even related to the calling of the functions? (Note: I've tried other methods in the past but they all failed, so it probably is an export-import issue.)
Thanks a lot!
you can't do that.
try this
exports.default = {
LoginScreen : ({ navigation }) => {
return (
<View>
<Text> This is a Login Screen </Text>
<Button
title="Go to Home"
onPress={() => navigation.navigate('Home')}
/>
</View>
)
},
HomeScreen : ({ navigation }) => {
return (
<View>
<Text> This is a Home Screen </Text>
</View>
)
}
}
this is a hint, not exact code.
I created a drawer menu using the DrawerNavigation feature of react-navigation. I wanted to create a button that would close the menu but the onPress function seems to not work
I've imported DrawerActions from 'react-navigation-drawer' and I've tried using different syntaxes
ex.) this.props.navigation.dispatch(DrawerActions.closeDrawer());
this.props.navigation.closeDrawer();
import React, { Component } from 'react';
import {
Image,
StyleSheet,
Text,
ImageBackground,
TouchableWithoutFeedback,
View,
Button,
ScrollView,
} from 'react-native';
import {
createDrawerNavigator,
createStackNavigator,
createAppContainer,
DrawerItems,
SafeAreaView,
NavigationActions
} from 'react-navigation';
import { DrawerActions, } from 'react-navigation-drawer';
const navigator = createDrawerNavigator(
{
Home: Lander,
Page1: Lander,
Page2: Lander,
Page3: Lander,
Page4: Lander,
},
{
contentComponent: (props) => (
<SafeAreaView>
<View style= {{backgroundColor:'black'}}>
<TouchableWithoutFeedback onPress={() => this.props.navigation.dispatch(DrawerActions.closeDrawer())}>
<Image source={require('./Images/x.png')} style = {styles.cross}/>
</TouchableWithoutFeedback>
</View>
<ScrollView style= {{backgroundColor: 'black', paddingLeft: '5%'}}>
<DrawerItems {...props} />
</ScrollView>
</SafeAreaView>
)
},
);
I ultimately want to be able to click on the x button and let it redirect me to the home screen.
I'm getting the following error
Undefined is not an object (evaluating '_this.props.navigation')
You are importing DrawerActions from the wrong package.
Change
import { DrawerActions, } from 'react-navigation-drawer';
To
import { DrawerActions } from 'react-navigation'
And to close it, you do it like
onPress={() => this.props.navigation.dispatch(DrawerActions.openDrawer())}
Edit:
What you are doing wrong is that you get this.props but it's only props.
contentComponent: (props) => (
<SafeAreaView>
<View style= {{backgroundColor:'black'}}>
{// changed to props without this}
<TouchableWithoutFeedback onPress={() => props.navigation.dispatch(DrawerActions.closeDrawer())}>
<Image source={require('./Images/x.png')} style = {styles.cross}/>
</TouchableWithoutFeedback>
</View>
<ScrollView style= {{backgroundColor: 'black', paddingLeft: '5%'}}>
<DrawerItems {...props} />
</ScrollView>
</SafeAreaView>
)
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler'
AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(App));
hope is helps