I am trying to navigate away from a screen and submit info with a handleSubmit.
export default class CreditRegister extends Component {
handleSubmit = () => {
const navigation = navigate(this.handleSubmit)
const value = this._form.getValue();
console.log('value: ', value);
}
render() {
return (
<>
onPress={() => this.props.navigation.navigate('HomeAddress')}
If you want to call your handlesubmit fnc into your Homeaddress screen then you can pass the callback function like this.
export default class CreditRegister extends Component {
handleSubmit = () => {
// your code
}
render() {
return (
<>
onPress={() => this.props.navigation.navigate('HomeAddress',{handleSubmit:this.handleSubmit})}
<>
then in your HomeAddress screen do it like this
export default class HomeAddress extends Component {
render() {
const {handleSubmit}=this.props.route.params
return (
<>
onPress={handleSubmit}
<>
Related
I saved data to AsyncStorage. Now I want to show all data from AsyncStorage in separate screen.
Method getData is async method. It reads from AsyncStorage.
I use code like that
import React from "react";
class List extends React.Component {
state = { list: null };
async componentDidMount() {
const list = await getData("List");
console.log('LIST: ' + JSON.stringify(list));
this.setState({ list });
}
render() {
const { list } = this.state;
console.log('state: ' + JSON.stringify(list));
if(list || list.length <= 0)
return (<View><Text>Empty.</Text></View>);
return (
<View>
{ list.map(item => (
<Text tabLabel={item}>{item}</Text>
))}
</View>
);
}
}
When I run that code, i get 2 console messages:
state: []
and
LIST: [{item1}, {item2}...]
It means that componentDidMount fires after render method, that is why UI is empty.
How can I change this. I need to read data from AsyncStorage and show it in UI.
Thank you.
componentDidMount as the title says is meant to run after render. To achieve what you want to do you can use componentWillMount.
import React from 'react';
class List extends React.Component {
state = { list: null };
componentWillMount() {
const loadData = async () => {
const list = await getData('List');
console.log('LIST: ' + JSON.stringify(list));
this.setState({ list });
};
loadData();
}
render() {
const { list } = this.state;
console.log('state: ' + JSON.stringify(list));
if (list || list.length <= 0)
return (
<View>
<Text>Empty.</Text>
</View>
);
return (
<View>
{list.map((item) => (
<Text tabLabel={item}>{item}</Text>
))}
</View>
);
}
}
I have an App with a navigationbar with 2 Screens.
When i apply a function on Screen/Component 1 , I want to render or trigger a change in the Second Screen.
is there a way to either re-render the screen on Enter or to update the state of the other screen ?
Component one:
export default class HomeScreen extends React.Component {
constructor() {
super();
}
_onPress(){
try {
await AsyncStorage.setItem('value', 'changed Value');
} catch (error) {
console.log(error.message);
}
console.log("saved: " + this.state.userName )
}
render() {
return (
<View style={styles.container}>
<Button title="btn" onPress={() => this._onPress()} >
</Button>
</View>
)
}
component 2:
export default class SecondScreen extends React.Component {
constructor() {
super();
this.state = {some : ''}
}
async getValue () {
let recievedValue = '';
try {
let promise = await AsyncStorage.getItem('value') || 'cheeseCake';
promise.then((value) => recievedValue = value)
} catch (error) {
// Error retrieving data
console.log(error.message);
}
return recievedValue
}
render() {
var value= this.getValue();
return (
<View style={styles.container}>
<Text>
HERE CHANGED VALUE: {value}
</Text>
<Button onPress={()=> this.setState((prev)=> {some:'Thing'})}>
</Button>
</View>
)
}
When i press the Button on screen 1(HomeScreen) the value is saved.
But it only shows in the secont screen when I trigger a statechange via Button Press.
How do I render the screen when I visit the screen via navigation bar ?
Did you try EventEmiter?
Use this custom event listener: https://github.com/meinto/react-native-event-listeners
eg:
import { EventRegister } from 'react-native-event-listeners'
/*
* RECEIVER COMPONENT
*/
class Receiver extends PureComponent {
constructor(props) {
super(props)
this.state = {
data: 'no data',
}
}
componentWillMount() {
this.listener = EventRegister.addEventListener('myCustomEvent', (data) => {
this.setState({
data,
})
})
}
componentWillUnmount() {
EventRegister.removeEventListener(this.listener)
}
render() {
return <Text>{this.state.data}</Text>
}
}
/*
* SENDER COMPONENT
*/
const Sender = (props) => (
<TouchableHighlight
onPress={() => {
EventRegister.emit('myCustomEvent', 'it works!!!')
})
><Text>Send Event</Text></TouchableHighlight>
)
I call a function that is in my Homepage class from my ProfileScreen class that is in the same .js file. I successfully did that, but in that function a setState is called, and when the function is called from the other class, the state doesn't change. How can I get this.state.user in HomePage to change from calling the onPressLogout function in the ProfileScreen class?
export default class HomePage extends Component<Props> {
state = {
email:'',
password:'',
firstname:'',
lastname:'',
user:true,
error: '',
}
onPressLogout(){
firebase = require('firebase');
firebase.auth().signOut()
.then(() => this.setState({
user:false
}))
.catch(() => this.setState({
error: 'Logout Failure',
}))
}
render(){
return <AppContainer>
</AppContainer>;
}
}
class ProfileScreen extends React.Component {
constructor(props) {
super(props);
Obj = new HomePage();
}
render() {
return (
...
<TouchableOpacity style={styles.button} onPress =
{()=>Obj.onPressLogout()}>
</TouchableOpacity>
...
}
}
const TabNavigator = createBottomTabNavigator({
Profile: ProfileScreen,
});
const AppContainer = createAppContainer(TabNavigator);
I get this warning when I run the code and the this.state.user doesn't change:
Warning: Can't call "setState" on a component that is not yet mentioned.
You should pass the function of the parent element into the child element as a prop. Then, you can call it in the child to manipulate the state of the parent class.
Here is an example,
class ChangeButton extends React.Component{
render(){
return (
<Button title="Change" onPress={this.props.updateMainState}/>
)
}
}
export default class App extends React.Component {
state = {
name: 'Fatih'
}
changeName = ()=> {
this.setState({
name: 'Faruk'
})
}
render() {
return (
<View style={styles.container}>
<Text>
{this.state.name}
</Text>
<ChangeButton updateMainState={this.changeName}/>
</View>
);
}
}
In the code above, we passed changeName function into the ChangeButton element. The Button in ChangeButton calls the function of the parent element when you press it, which manipulates the state of the main class.
Here is the working code: ProjectLink
I have a simple two screens app with redux and React-Native-Navigation V2. I try to pass an item from a list to another view as a prop. Unfortunately, I get an error:
TypeError: Cannot read property 'id' of undefined
The item is passed but not received as a prop in the second view. Everything works fine when working without Redux. Am I registering the views correctly?
Views registration:
export default (store) => {
Navigation.registerComponent('example.app.FirstScreen', reduxStoreWrapper(FirstScreen, store));
Navigation.registerComponent('example.app.SecondScreen', reduxStoreWrapper(SecondScreen, store));
}
function reduxStoreWrapper (MyComponent, store) {
return () => {
return class StoreWrapper extends React.Component {
render () {
return (
<Provider store={store}>
<MyComponent />
</Provider>
);
}
};
};
}
First View:
class FirstScreen extends Component {
componentDidMount() {
this.props.listItems();
}
onItemPress = (item: Item) => {
Navigation.push(item._id, {
component: {
name: 'example.app.SecondScreen',
passProps: {
item: item
}
}
});
};
render() {
return (
<View>
<ItemsList items={this.props.items} onItemPress={this.onItemPress}/>
</View>
);
}
}
const mapStateToProps = state => {
let items = state.itemsReducer.items.map(item => ({ key: item.id, ...item }));
return {
items: items
};
};
const mapDispatchToProps = {
listItems
};
export default connect(mapStateToProps, mapDispatchToProps)(FirstScreen);
Second View:
class SecondScreen extends Component {
static propTypes = {
item: PropTypes.object.isRequired,
};
componentDidMount() {
const { item } = this.props;
this.props.listSubitems(item.id);
}
render() {
const { subitems } = this.props;
return (
<View>
<SubitemsList subitems={subitems}/>
</View>
);
}
}
const mapStateToProps = state => {
let subitems = state.subitemsReducer.subitems.map(subitem => ({ key: subitem.id, ...subitem }));
return {
subitems: subitems
};
};
const mapDispatchToProps = {
listSubitems
};
export default connect(mapStateToProps, mapDispatchToProps)(SecondScreen);
Views should be registered this way:
export default (store, Provider) => {
Navigation.registerComponentWithRedux('example.app.FirstScreen', () => FirstScreen, Provider, store);
Navigation.registerComponentWithRedux('example.app.SecondScreen', () => SecondScreen, Provider, store);
}
I use react-navigation for manage routes. This is my Home component:
class HomeScreen extends React.Component {
constructor(props) {
this.state = {
userProfile: {
firstname: 'John',
avatar: 'john-profile.png',
location: 'Canada',
}
}
}
componentDidMount() {
AsyncStorage.getItem('userProfile', (errs, result) => {
this.setState({userProfile: JSON.parse(result)});
});
}
render() {
return (
<View>
<Image src="{this.state.userProfile.avatar}" />
<Text>Firstname: {this.state.userProfile.firstname}</Text>
<Text>Location: {this.state.userProfile.location}</Text>
</View>
);
}
}
And this is the Profile screen:
class ProfileScreen extends React.Component {
constructor(props) {
this.state = {
userProfile: null,
}
}
componentDidMount() {
AsyncStorage.getItem('userProfile', (errs, result) => {
this.setState({userProfile: JSON.parse(result)});
});
}
save() {
var userSavedProfile = this.state.userProfile;
userSavedProfile.firstname = "Peter";
userSavedProfile.avatar = "peter-avatar.png";
userSavedProfile.location = "EEUU";
this.setState({userProfile: userSavedProfile});
AsyncStorage.setItem('userProfile', JSON.stringify(this.state.userProfile), () => {});
}
render() {
return (
<View>
<Button title="Save" onPress={() => this.save()} />
</View>
);
}
}
When I save the new user information and I press back button in header (react-navigation) the user profile is old, firstname = John, etc... How update state from Home when user press back button and refresh data?
You can use BackHandler from react-native
https://facebook.github.io/react-native/docs/backhandler.html
You can change state inside function of backhandler
I think that your application would need a state manager, where you could store your user information and access it anywhere in the app. You should take a look at Redux. It would fit your needs and the info in your Home screen would automatically update.
but for anyone who will need this functionality in there react native application here is the solution you can try.
using react navigation.
import {withNavigationFocus} from "react-navigation";
class Profile extends Component {
...
}
export default withNavigationFocus(Profile);
There can be two workarounds check it out -
1 Send callback in params
class HomeScreen extends React.Component {
constructor(props) {
this.state = {
userProfile: {
firstname: 'John',
avatar: 'john-profile.png',
location: 'Canada',
}
}
this.getUserData = this.getUserData.bind(this);
}
componentDidMount() {
this.getUserData;
}
getUserData = () =>{
AsyncStorage.getItem('userProfile', (errs, result) => {
this.setState({userProfile: JSON.parse(result)});
});
}
render() {
return (
<View>
<Image src="{this.state.userProfile.avatar}" />
<Text onPress={()=>this.props.navigation.navigate('ProfileScreen', this.getUserData)}>Firstname: {this.state.userProfile.firstname}</Text>
<Text>Location: {this.state.userProfile.location}</Text>
</View>
);
}
}
class ProfileScreen extends React.Component {
constructor(props) {
this.state = {
userProfile: null,
}
}
componentDidMount() {
AsyncStorage.getItem('userProfile', (errs, result) => {
this.setState({userProfile: JSON.parse(result)});
});
}
save() {
var userSavedProfile = this.state.userProfile;
userSavedProfile.firstname = "Peter";
userSavedProfile.avatar = "peter-avatar.png";
userSavedProfile.location = "EEUU";
this.setState({userProfile: userSavedProfile});
AsyncStorage.setItem('userProfile', JSON.stringify(this.state.userProfile), () => {});
//this is the magic
this.props.navigation.state.params.getUserData();
}
render() {
return (
<View>
<Button title="Save" onPress={() => this.save()} />
</View>
);
}
}
2 On HomeScreen Constructor add this (Dirty one)
this.props.navigation.addListener(
'didFocus',
payload => {
this.setState({is_updated:true});
}
);
You can use componentDidUpdate(){...} insted componentDidMount(){}