I've looked at many different Stack Overflow posts about how to navigate screens in React Native but none of them seem to be working, perhaps because those posts were for older versions of React Native. Here is my code with the irrelevant parts taken out below. I'm trying to navigate from this screen to another screen called SubTasks. I made sure to say export default class SubTasks extends React.Component in SubTasks.js, by the way. The error I'm getting when I click on the button is "undefined is not an object (evaluating this.props.navigator.push'). Does anyone know where my error may be?
import React, { Component, PropTypes } from 'react';
import { StyleSheet,NavigatorIOS, Text, TextInput, View, Button}
from 'react-native';
import SubTasks from './SubTasks';
export default class App extends React.Component {
constructor(props) {
super(props);
}
renderScene(route, navigator) {
if(route.name == 'SubTasks') {
return <SubTasks navigator = {navigator} />
}
}
_navigate() {
this.props.navigator.push({
title: 'SubTasks',
})
}
render() {
return (
<View>
<NavigatorIOS
initialRoute= {{
title: 'SubTasks',
component: SubTasks,
}}
style = {{ flex: 1 }}
/>
<Button
title= 'SubTasks'
style = {{flexDirection: 'row', fontSize: 20, alignItems: 'flex-end'}}
color = 'blue'
onPress= {() => this._navigate()}>
styleDisabled = {{color: 'red'}}
</Button>
</View>
)}
}
Make sure you bind your _navigate function in your constructor:
constructor(props) {
super(props);
this._navigate = this._navigate.bind(this);
}
Or consider using arrow function
_navigate = () => {
this.props.navigator.push({
title: 'SubTasks',
})
}
Related
I am new to React-Native and its states, here I am stuck with a problem (using dummy data but my problem is same) all I want to achieve is get the latest JSONARRAY fetched from the state, based on button clicks when I click on button one it should only return [{"one":"oneKey"},{"key":"mutatedFruit"}] and similar approach for other buttons as well any help is appreciated
I have attached my
expo snack code here
hope the below code helps ,
import * as React from 'react';
import { Text, View,Button, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
// You can import from local files
import AssetExample from './components/AssetExample';
const data = [
{"joinedUsers":[{"one":"oneKey"}],"key":"mango"}
,{"joinedUsers":[{"two":"twoKey"}],"key":"apple"}
,{"joinedUsers":[{"three":"threeKey"}],"key":"banana"}
,{"joinedUsers":[{"four":"fourKey"}],"key":"kiwi"}];
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default class App extends React.Component {
constructor(props){
super(props);
this.state={
selectedPosition:0,
valueArr : []
}
}
componentDidMount(){
let newVal = [];
newVal.push(data[0].joinedUsers[0])
newVal.push({"key":"mutatedFruit"})
this.setState({valueArr:newVal})
}
setValues = (position) => {
let newVal = [];
newVal.push(data[position].joinedUsers[0])
newVal.push({"key":"mutatedFruit"})
this.setState({valueArr:newVal})
}
render() {
const value = data[this.state.selectedPosition].joinedUsers
value.push({"key":"mutatedFruit"})
return (
<View style={styles.container}>
<Button title='ONE'
onPress={()=>this.setValues(0)}></Button>
<Button title='TWO'
onPress={()=>this.setValues(1)}></Button>
<Button title='THREE'
onPress={()=>this.setValues(2)}></Button>
<Button title='FOUR'
onPress={()=>this.setValues(3)}></Button>
<Text>{JSON.stringify(this.state.valueArr)}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
flexDirection:'column'
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
EDIT: Based on your comment, it sounds like your issue is you don't want the same value added multiple times. In that case, this should fix it:
export default class App extends React.Component {
state= {
selectedPosition:0,
}
render() {
const value = data[this.state.selectedPosition].joinedUsers
value[0]["key"] = "mutatedFruit"
return (
<View style={styles.container}>
<Button title='ONE'
onPress={()=>this.setState({selectedPosition:0})}></Button>
<Button title='TWO'
onPress={()=>this.setState({selectedPosition:1})}></Button>
<Button title='THREE'
onPress={()=>this.setState({selectedPosition:2})}></Button>
<Button title='FOUR'
onPress={()=>this.setState({selectedPosition:3})}></Button>
<Text>{JSON.stringify(value)}</Text>
</View>
);
}
}
I'm new to react-native technology and I faced this issue as attached images after I created one component (Header) and tried to use it inside app.js and run iOS emulator. please any advice.
1
2
3
4
5
https://snack.expo.io/r1tmEEYs4 live basic sample
you return has a little mistake you must change you header codes like this
import React, { Component } from 'react';
import { Text } from 'react-native';
class Header extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<Text>
Header Text
</Text>
);
}
}
export default Header;
and you must call that like this
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Header from './components/Header';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Header/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#ecf0f1',
padding: 8,
},
});
First you open a terminal and run
npm start -- --reset-cache
then
react-native run-ios
Is there a way I can fix this without using redux?
This is only happening on iOS, on android the AddListener works perfectly fine without it.
I have a component and I call the props.navigation.addListener on the componentDidMount functon.
Some code to help understand exactly where it breaks:
componentDidMount(){
var _this = this;
this.willBlurListener = this.props.navigation.addListener('willBlur', () => {
_this.timer.clearTimeout();
});
this.willFocusListener = this.props.navigation.addListener('willFocus', () => {
_this._action();
});
AppState.addEventListener('change', this._handleAppStateChange);
}
And then I use the component like this:
<Inactivity name='SomeNameView' navigation={ this.props.navigation }>
{this.renderDetails()}
</Inactivity>
Can you please try to use withNavigation function, it returns a HOC that has navigation in it props so you don't have to pass from the parent component to the child:
I created a simple app that uses this concept that probably can help you:
import React from 'react';
import {
View,
Text,
Button,
} from 'react-native';
import {
createStackNavigator,
withNavigation,
} from 'react-navigation';
class SomeComponent extends React.Component {
componentDidMount() {
this.willBlurListener = this.props.navigation.addListener('willBlur', () => {
this.someAction();
})
}
someAction() {
console.log('Some action is called!');
}
componentWillUnmount() {
this.willBlurListener.remove();
}
render() {
return (
<View>
<Text>Some Component</Text>
<Button
title={'Open settings'}
onPress={() => this.props.navigation.navigate('Settings')}
/>
</View>
)
}
}
const SomeComponentWithNavigation = withNavigation(SomeComponent);
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Home'
}
render() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<SomeComponentWithNavigation/>
<Text>Welcome to home screen!</Text>
</View>
)
}
}
class SettingsScreen extends React.Component {
static navigationOptions = {
title: 'Settings'
}
render() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>Welcome to settings screen!</Text>
</View>
)
}
}
export default createStackNavigator(
{
Home: HomeScreen,
Settings: SettingsScreen,
},
);
I have used import { useNavigation } from '#react-navigation/native'; to achieve this. This could work for you as well.
Sample code example
import { useNavigation } from '#react-navigation/native';
class CurrentOrderClass extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
this.onFocusSubscribe = this.props.navigation.addListener('focus', () => {
// Your code
});
}
componentWillUnmount() {
this.onFocusSubscribe();
}
.
.
.
.
function CurrentOrder(props) {
const navigation = useNavigation(props)
return <CurrentOrderClass {...props} navigation={navigation} />
}
}
export default CurrentOrder;
You can also check to React Native docs https://reactnavigation.org/docs/navigation-events/
I found this a bit tricky and after looking into it for a bit, I come up with the following solution. Note that is tested on React Navigation 5.x.
import { useIsDrawerOpen } from "#react-navigation/drawer";
let lastDrawerStateIsOpened = false;
const DrawerComponent = (props) => {
const isOpened = useIsDrawerOpen();
if (lastDrawerStateIsOpened != isOpened) {
lastDrawerStateIsOpened = isOpened;
if (isOpened) {
// Do what needs to be done when drawer is opened.
}
}
};
Also, note that I'm using a functional component.
I am new to React Native and trying to create a simple iOS app. The app has a button on clicking which I need to store the timestamp of the click on the device in a file.
I know that React Native has an API called AsyncStorage but I am getting errors while using this. I copied the code from some site on the net.
Can someone please guide me to use this API?
This is my entire code:
import React, {Component} from 'react';
import { StyleSheet, Text, View, TextInput, AsyncStorage } from 'react-native';
export default class App extends Component{
state = {
'name': ''
}
componentDidMount = () => AsyncStorage.getItem('name').then((value) => this.setState({'name': value}))
setName = (value) => {
AsyncStorage.setItem('name': value);
this.setState({'name': value});
}
render() {
return (
<View style={styles.container}>
<TextInput style = {styles.textInput} autoCapitalize = 'none'
onChangeText = {this.setName}/>
<Text>
{this.state.name}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
marginTop: 50
},
textInput: {
margin: 15,
height: 35,
borderWidth: 1,
backgroundColor: '#7685ed'
}
});
As for the error, when I launch the code on iOS, I am getting a red screen. There is no syntax error that I can see.
Thanks in advance.
Hard to say without more detail the exact problem you're facing, but I assume some of the following might help you?
Ah I see you posted some code. You will need a constructor that defines your state as well. Added it in my code below.
Please note I'm not an expert. Forgive any errors
import {
AsyncStorage,
} from 'react-native';
class myComponent extends React.Component{
constructor(props) {
super(props);
this.state = {
data: null
};
}
componentDidMount() {
this._loadInitialState().done();
}
_someFunction() {
var myData = 123;
saveItemLocally('data', myData);
}
async _loadInitialState() {
try {
// get localy stored data
var dataStored = await AsyncStorage.getItem('data');
if (dataStored!==null) {
this.setState({
data: dataStored
});
}
} catch (error) {
//didn't get locally stored data
console.log(error.message);
}
} // end _loadinitialstate
render () {
//your render function
return (
);
}
} // end of your component
async function saveItemLocally(item, value) {
try {
await AsyncStorage.setItem(item, value);
} catch (error) {
console.log('AsyncStorage error: ' + error.message);
}
}
I am a newbie in react native.
I have one similar problem in different projects. When I try to compile my project, I see this problem. Why this error is appear?
P.S. I am learning react-native by tutorials like a appcoda.com
Picture of my error
Featured.js
'use strict';
var React = require('react-native');
var{
StyleSheet,
View,
Text,
Component
} = React;
var styles = StyleSheet.create({
description:{
fontSize: 20,
backgroundColor: 'white'
},
container:{
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
});
class Featured extends Component{
render() {
return(
<View style = {styles.container}>
<Text style = {styles.description}>
Featured tab
</Text>
</View>
);
}
}
module.exports = Featured;
Change your import statement as below
import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
} from 'react-native';