I installed Navigation to take some data from a page and send to another (hopefully I will).
But it doesn't work and I get
"We couldn't find a navigation object. Is your component inside a navigator?"
File Insert.js
import React, { useState } from "react";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { useNavigation } from "#react-navigation/native";
import ViewData from "./ViewData";
const MainNavigator = createStackNavigator({
ViewDataPage: ViewData
});
...
const Insert = props => {
...
createAppContainer(MainNavigator);
const navigate = useNavigation();
return (
<TouchableWithoutFeedback
onPress={() => {
Keyboard.dismiss();
}}
>
<View style={styles.inputContainer}>
<Input
placeholder="Your Name"
onChangeText={text => setEnteredName(text)}
value={enteredName}
/>
...
<View>
<Button
title="Submit"
onPress={() => sendValues(enteredName, enteredSurname)}
/>
<Button
title="Click"
onPress={() =>navigate("ViewDataPage", { name: "Jane" })
}
/>
</View>
</View>
</TouchableWithoutFeedback>
I think I made a mess, I can't even get the page "ViewData".
I would like to change page sending some values in the hooks
Any idea where I mistook?
"#react-navigation/native" is for React Navigation 5. You can't use it with React Navigation 4.
Related
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've spent 2 days search, reading and find lots of v3 and v4 class based examples for how to handle navigation in React Native Navigation.
All I want to achieve is to move between 2 of my screens using react native navigation. My App.js contains the Tab navigator and that works fine. The tab opens up a component (screen) called Mens and from there I want to be able to open up a PDP page that passes in properties of an article ID.
I have tried numerous ways of wiring up the application to allow this; I've read all the react native documentation and tried a number of approaches;
Created a seperate file to include the naviagtion stack;
import * as React from 'react'
import { NavigationContainer } from '#react-navigation/native'
import { createStackNavigator } from '#react-navigation/stack'
import News from './news';
import Mens from './mens'
import Watch from './watch'
const Stack = createStackNavigator()
function MainStackNavigator() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="News" component={News} />
<Stack.Screen name="Mens" component={Mens} />
</Stack.Navigator>
</NavigationContainer>
)
}
export default MainStackNavigator
But when I try to use one of the screens, I get an error. The onpress I try is;
<TouchableOpacity onPress={() => navigation.navigate('Mens')}>
I have also tried to move the NavigationContainer / Stack Navigator code into the News component, but I haven't manage to make that work.
The flow that I want is simple enough; App.js has my tabs, 5 tabs that navigate to the main screens and then on each of those, people can click on a list item in a flat list (which displays a summary) to read the full article.
The news.js file content is below;
import React, { useEffect, useState } from 'react';
import { ActivityIndicator, FlatList, Image, ListItem, Text, View, StyleSheet, ScrollView, TouchableOpacity, Alert} from 'react-native';
import Moment from 'moment';
import MatchReports from './matchreports.js';
import navigation from '#react-navigation/native';
const News = (props) => {
const [isLoading, setLoading] = useState(true);
const [data, setData] = useState([]);
function chkValue(val) {
if(val.length == 0){
val = 'https://derbyfutsal.files.wordpress.com/2019/07/banner-600x300.png';
}else{
val = val;
}
return val;
}
useEffect(() => {
fetch('https://xxxx')
.then((response) => response.json())
.then((json) => {
setData(json)
})
.catch((error) => console.error(error))
.finally(() => setLoading(false));
}, []);
return (
<ScrollView>
<View style={styles.body}>
<Text style={styles.titlesnopadding}>Watch</Text>
<View style={{height:200}}>
<Watch />
</View>
<Text style={styles.titles}>Match reports</Text>
<View style={{height:100}}>
<MatchReports typeOfProfile='Men'/>
</View>
<Text style={styles.titles}>Latest News</Text>
{isLoading ? <ActivityIndicator/> : (
<FlatList
data={data}
keyExtractor={({ id }, index) => id}
renderItem={({ item }) => (
<View>
<TouchableOpacity onPress={() => navigation.navigate('Mens')}>
<Image style={styles.img} source={{ uri: chkValue(item.jetpack_featured_media_url) }} />
<View>
<Text style={styles.textbck}>{item.title.rendered.replace(/<\/?[^>]+(>|$)/g, "")}</Text>
<Text style={styles.summary}>{item.excerpt.rendered.replace(/<\/?[^>]+(>|$)/g, "")}{"\n"}{Moment(item.date, "YYYYMMDD").fromNow()}</Text>
</View>
</TouchableOpacity>
</View>
)}
/>
)}
</View>
</ScrollView>
);
};
Any help is appreciated, as I've read so many using class instead of functional programming and out of date navigation that it's been challenging working it out.
EDIT:
I had missed the props.navigation.navigate('Mens'), which works fine now. Though its only half solves my problem.
I have the following inside my app.js;
import 'react-native-gesture-handler';
import React from 'react';
import { View, StyleSheet, Image } from 'react-native';
import News from './components/news';
import Shop from './components/shop';
import Mens from './components/mens';
import Fixtures from './components/fixtures';
import Ladies from './components/ladies';
import Pdp from './components/pdp'
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
const App = () => {
return (
<View style={styles.header}>
<View>
</View>
<View style={styles.body}>
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="News" component={News} />
<Tab.Screen name="Mens" component={Mens} />
<Tab.Screen
name="icon"
component={Shop}
options={{
title: '',
tabBarIcon: ({size,focused,color}) => {
return (
<Image
style={{ marginTop:20,width: 80, height: 80 }}
source={{
uri:
'https://derbyfutsal.files.wordpress.com/2020/05/derby-futsal-logo-2019.png',
}}
/>
);
},
}}
/>
<Tab.Screen name="Ladies" component={Ladies} />
<Tab.Screen name="Fixtures" component={Fixtures} />
</Tab.Navigator>
</NavigationContainer>
</View>
</View>
)
};
const styles = StyleSheet.create({
header: {
marginTop: 20,
height:0,
flex: 1
},
body: {
flex:2,
flexGrow:2,
},
nav: {
fontSize: 20,
},
});
export default App;
Anything thats been set as tab Screen in this works just fine if I reference it in my news.js screen, but I don't want to declare PDP.js in this as I don't want it to display as a tab.
Instead once a user has gone to a screen using the tab navigation, the user then clicks on a item in the flatlist and it opens up pdp.js.
In many ways, once someone has opened up the main categories (as seen on the tab navigation) and clicked on an item in the flatlist, all I want to do is;
<a href="pdp.js?id=xxxxx">
https://reactnavigation.org/docs/navigation-actions/#navigate
import { CommonActions } from '#react-navigation/native';
navigation.dispatch(
CommonActions.navigate({
name: 'Profile',
params: {
user: 'jane', // props.route.params.user
},
})
);
I didn't do a whole a lot of work on react-native to being with but the formik and react-native-elements is not getting anywhere with my setup. I am not really sure what I am missing exactly. Basically, the form cannot be submitted. I have a reusable button and input components made out of react native elements. The form don't get submitted. Out of curiousity, I also tried RN's default button to submit the form but it also doesn't work. My sandbox is here.
My setup is pretty straight forward as you can see below. Any help would be great on what I am missing exactly:
FormInput.js:
import React, { Component } from "react";
import { View, StyleSheet } from "react-native";
import { Input } from "react-native-elements";
export default class FormInput extends Component {
render() {
let { name, ...rest } = this.props;
return (
<>
<View>
<Input name={name} {...rest} />
</View>
</>
);
}
}
FormButton.js
import React, { Component } from "react";
import { Button } from "react-native-elements";
export default class FormButton extends Component {
render() {
let { title, ...rest } = this.props;
return (
<>
<Button title={title} {...rest} onPress={() => this.props.onPress} />
</>
);
}
}
App.js:
import React, { Component, Fragment } from "react";
import { Alert, Button, Image, StyleSheet, Text, View } from "react-native";
import FormInput from "./components/forms/FormInput";
import FormButton from "./components/forms/FormButton";
import * as yup from "yup";
import { Formik } from "formik";
class App extends Component {
handleSubmit = values => {
console.log("submitted values ", values);
};
render() {
return (
<View style={styles.app}>
<Formik
initialValues={{
name: ""
}}
onSubmit={values => {
this.handleSubmit(values);
}}
validationSchema={yup.object().shape({
name: yup
.string()
.min(3)
.max(25)
.required()
})}
>
{({
values,
handleChange,
errors,
setFieldTouched,
touched,
isValid,
handleBlur,
handleSubmit
}) => (
<Fragment>
<FormInput
name="name"
onChangeText={handleChange("name")}
onBlur={handleBlur("name")}
autoFocus
/>
<Button
onPress={() => handleSubmit}
title="React Native Button"
/>
<FormButton
title="React native elements child button"
onPress={() => handleSubmit}
/>
</Fragment>
)}
</Formik>
</View>
);
}
}
export default App;
Can you post the error if exist? And did you make a method for submit button so that it can pass the value ?
In you App.js you're buttons onPress should be like below:
<Button
onPress={handleSubmit}
title="React Native Button"
/>
<FormButton
title="React native elements child button"
onPress={handleSubmit}
/>
Your onPress do not need to be an annonymous function.
I'm trying to use a function from my Main component in my details component which I user react navigation to navigate to and I want to save some changes in detail screen in my main component
//Main.js
import React from 'react';
import {
StyleSheet ,
Text,
View,
TextInput,
ScrollView,
TouchableOpacity,
KeyboardAvoidingView,
AsyncStorage
} from 'react-native'
import Note from './Note'
import { createStackNavigator, createAppContainer } from "react-navigation";
import Details from './Details';
export default class Main extends React.Component {
static navigationOptions = {
title: 'To do list',
headerStyle: {
backgroundColor: '#f4511e',
},
};
constructor(props){
super(props);
this.state = {
noteArray: [],
noteText: ''
};
}
render() {
let notes = this.state.noteArray.map((val,key) => {
return <Note key={key} keyval={key} val={val}
goToDetailPage= {() => this.goToNoteDetail(key)}
/>
});
const { navigation } = this.props;
return(
<View style={styles.container}>
<ScrollView style={styles.scrollContainer}>
{notes}
</ScrollView>
<Details saveEdit={this.saveEdit} />
</View>
);
}
goToNoteDetail=(key)=>{
this.props.navigation.navigate('DetailsScreen', {
selectedTask: this.state.noteArray[key],
saveEdit: this.saveEdit
});
}
saveEdit = (editedTask,dueDate) => {
this.state.noteArray.push({
'creationDate': editedTask['creationDate'],
'taskName': editedTask['taskName'],
'dueDate': dueDate
});
this.setState({noteArray:this.state.noteArray})
this.saveUserTasks(this.state.noteArray)
}
this.setState({noteArray:this.state.noteArray})
this.saveUserTasks(this.state.noteArray)
}
}
Then I try to use it as prop in my Detail.js
import React from 'react';
import {
StyleSheet ,
Text,
View,
TextInput,
Button,
TouchableOpacity,
} from 'react-native'
import { createStackNavigator, createAppContainer } from "react-navigation";
export default class Details extends React.Component {
constructor(props){
super(props);
this.state = {
dueDate = ''
}
}
static navigationOptions = {
headerStyle: {
backgroundColor: '#f4511e',
},
};
componentDidMount = () => {
this.getUserTasks()
}
render() {
const { navigation } = this.props;
const selectedTask = navigation.getParam('selectedTask', 'task');
var { saveEdit} = this.props;
return(
<View key={this.props.keyval} style={styles.container}>
<View style = { styles.info}>
<Text style= {styles.labelStyle}> Due date:
</Text>
<TextInput
onChangeText={(dueData) => this.setState({dueData})}
style={styles.textInput}
placeholder= {selectedTask['dueDate']}
placeholderTextColor='gray'
underlineColorAndroid = 'transparent'
>
</TextInput>
</View>
<TouchableOpacity onPress={this.props.saveEdit(selectedTask, this.state.dueDate)} style={styles.saveButton}>
<Text style={styles.saveButtonText}> save </Text>
</TouchableOpacity>
</View>
);
}
}
I searched a lot to find the solution and I tried many of them but get different undefined errors. This is not what I did in the first place but when I search I found this solution here. And I know it causes lots of issues.
I want to know how can I manage to access to main method from details and pass parameters to it or how can I manage to use main props in my details component
If you are using react-navigation 5, params is no longer under the navigation object but under route object. This is the link to the sample code:
https://reactnavigation.org/docs/params
Solution
<Details saveEdit={this.saveEdit} />
to
<Details navigation={this.props.navigation} saveEdit={this.saveEdit} />
render() {
return(
<View style={styles.container}>
<ScrollView style={styles.scrollContainer}>
{notes}
</ScrollView>
<Details navigation={this.props.navigation} saveEdit={this.saveEdit} />
</View>
);
}
Why?
You are using your Details component in Main screen. So you need to give navigation to Details's props from your Main to use navigation props in Details component.
Because your Details component is not the screen component registered in your navigator(router).
I tried to run your code on my machine but it seems you have too many syntax error in your code (maybe because of copy pasta?)
but it seems you should change
<TouchableOpacity onPress={this.props.saveEdit(selectedTask, this.state.dueDate)}
in Detals.js to
<TouchableOpacity onPress={this.props.navigation.getParams('saveEdit')(selectedTask, this.state.dueDate)}
for clarification this worked for me
in MainPage.js
_test(){
console.log('test');
}
.
.
.
<ActionButton
buttonColor="rgba(231,76,60,1)"
onPress={() => NavigationService.navigate('AddNewSession', {test: this._test})}>
</ActionButton>
and in AddNewSession.js
componentDidMount()
let test = this.props.navigation.getParam('test');
test();
}
There are many mistakes within your codes. First of all you are importing the navigation build-in function {createStackNavigator} in all your files, Main.js and Details.js :
import { createStackNavigator, createAppContainer } from
"react-navigation";
That make me think that you didn't know how the stack navigation or navigation in general functions in react native. You should have a file that handles your routes configuration, let call it MyNavigation.js and then define the routes 'Main' and 'details' in MyNavigations,js. It's only inside MyNavigation.js that you can import "createStackNavigator". Then you will define your functions to move between the screens "Main" and "detail". Those functions will be passed as props to the routes when moving between one another. The overall action wihtin MyNavigation.js will look like:
import React from 'react';
import { createStackNavigator } from '#react-navigation/stack';
import { NavigationContainer } from '#react-navigation/native';
import Main from './Main';
import Detail from './Detail';
const Stack = createStackNavigator();
function goToDetailFromMainScreen(){
return(this.props.navigation.navigate('switch2'));
}
function DetailSaves(){
return(//your code here to save details);
}
//Here you pass the functions to Main Component to handele Detail componets
's actions
function switch1(){
return(<Main GoToDetails={() => this.goTodetailFromMainScreen()} paramsForDetailActions={() => this.detailSaves()} />)
}
function switch2(){
return(<Details />)
}
export default function MyNavigation() {
return(
<NavigationContainer>
<Stack.Navigator initialRouteName='switch1'>
<Stack.Screen name='switch1' options={{header:()=>null}} component={Main} />
<Stack.Screen name='switch2' options={{headerTitle:"Detail"}} component={Detail} />
</Stack.Navigator>
</NavigationContainer>
)
}
Now inside Main.js you check the props functions passed to it from MyNavigation.js:
// Main.js
constructor(props){
super(props);
}
goToDetails = () => {
this.props.onPress?.();
}
paramsForDetailActions= () => {
this.props.onPress?.();
}
returning this error while tying to navigate using switchnavigation.
i have tried removing this. props then returns undefined 'navigation'.
import React from 'react';
import { Text, View, Image, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import { createSwitchNavigator, createAppContainer , withNavigation } from 'react-navigation';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
import layout from '../../constants/LayoutStyle'
import QuoteScreen from './QuoteScreen';
const HomeScreen = () => {
return (
<View style={styles.viewStyles}>
<View style={{position: 'absolute',top: hp('50%')+wp('37.5%'),left:wp('15%'),width: wp('32.5%'),height:
wp('32.5%'),backgroundColor:'rgba(255,255,255,0.1)'}}>
<View style={{alignItems: 'center',justifyContent: 'center',flex:1}}>
<Icon name="ios-book" color="purple" size={wp('10%')}
onPress={() => this.props.navigation.navigate('Quote')}
/>
<Text style={styles.tabTextStyle}>Books</Text>
</View>
</View>
);
};
const RootStack = createSwitchNavigator(
{
Home: HomeScreen,
Quote: QuoteScreen,
}
);
const AppContainer = createAppContainer(RootStack);
export default class app extends React.Component {
render() {
return <AppContainer />
}
}
expected to complete navigation properly
HomeScreen is a functional component and hence you should not use this.props.navigation, just say props.navigation.
And If you want to use props inside the function component, then use should pass props as an argument to that functional component. Like this =>
const HomeScreen = (props) => {
return (
<View style={styles.viewStyles}>
<View style={{position: 'absolute',top:
hp('50%')+wp('37.5%'),left:wp('15%'),width: wp('32.5%'),height:
wp('32.5%'),backgroundColor:'rgba(255,255,255,0.1)'}}>
<View style={{alignItems: 'center',justifyContent: 'center',flex:1}}>
<Icon name="ios-book" color="purple" size={wp('10%')}
onPress={() => this.props.navigation.navigate('Quote')}
/>
<Text style={styles.tabTextStyle}>Books</Text>
</View>
</View>
);
};
If this does not work then pass navigation as props to HomeScreen component wherever u use, Like this =>
<HomeScreen
navigation = {this.props.navigation} // or navigation = {props.navigation}, if it is functional component
/>