React call function and setstate when go back to a previous screen

Question

I'm new in React's world

I have 2 screens : Stock and Barcode. In Stock, i navigate to Barcode's screen. When i scan a barcode, i go back to the previous screen I would like to set the input text with the barcode and call a function. In my example joinData();

The problem is to set the input text and call a function. I tried examples and answers but i don't find or don't understand how to to that.

I tried something in componentDidUpdate() but it fails Invariant Violation:Maximum update depth exceeded

Stock.js

import React, {useState} from "react";
import { ScrollView, TouchableWithoutFeedback, Dimensions, StyleSheet, FlatList, View,     Alert, TouchableOpacity, TextInput } from 'react-native';

//galio
import { Block, Text, theme } from "galio-framework";

import { Button, Icon, Input } from "../components/";

export default class Stock extends React.Component {
constructor(props) {  
super(props);
this.myRef = React.createRef();
this.array = [];
this.state = {
  arrayHolder: [],
  Input_ITMREF: ''
};
}

// I tried this but it fails 
componentDidUpdate() {
if (this.props.navigation.getParam('itmref') != 'undefined') {
  this.setState({ Input_ITMREF: this.props.navigation.getParam('itmref')});
}
}

componentDidMount() {
  this.setState({ arrayHolder: [...this.array] }) // Rafraîchit la liste
}

joinData = () => {
    vxml = this.state.Input_ITMREF+" I do something";
}

Render() {

return (

  <Block flex>
    <Block row space="evenly">
      <Block center>
        <Input 
          placeholder='Code article'
          onChangeText={data => this.setState({ Input_ITMREF: data })}
          ref={this.myRef}
        />
      </Block>
    </Block>
    <Block center>
        <Button style={styles.button} onPress={() => this.props.navigation.navigate('Barcode')}>Barcode</Button>
        <Text style={{ margin: 10 }}>Post: {this.props.navigation.getParam('itmref')}</Text>
    </Block>
  </Block>
    );
  }
}

And Barcode.js

import React, {} from 'react';
import { ScrollView, TouchableWithoutFeedback, Dimensions, StyleSheet, FlatList, View, Alert, TouchableOpacity, TextInput } from 'react-native';
import { BarCodeScanner } from 'expo-barcode-scanner';
import { Button } from "../components/";

export default class Barcode extends React.Component {
   static navigationOptions = {
     header: null //hide the header bar
   };

   handleBarCodeScanned = ({ type, data }) => {
    this.props.navigation.navigate("Stock", {
      itmref: data
    });
  };

  render() {
    return (
       <BarCodeScanner
            onBarCodeScanned={this.handleBarCodeScanned}
            style={styles.barcodeScanner}
          />
    );
  }
}

There are so many ways to resolve this, For a simple solution, add this to componentDidUpdate condition "this.sttate.Input_ITMREF !== this.props.navigation.getParam('itmref')" — Ashwin Mothilal, Mar 01 '20 at 17:53
"this.props.navigation.getParam('itmref')" in componentDidUpdate returns undefined. — Alexis, Mar 01 '20 at 20:02
Have a look gihanchanuka's answer from https://stackoverflow.com/questions/44223727/react-navigation-goback-and-update-parent-state. He give the simple example. You will fun after understand it. — ittgung, Oct 29 '20 at 02:53

Amir Hedieh · Answer 1 · 2020-03-02T12:56:13.363

1

You can pass a state handler function as prop to Barcode screen and use that to set value for textInput in state. in Stock(in state)

state = {
   inputValue: ''
}
....
const setInputTextValue= (newValue) => {
   this.setState({
   inputValue: newValue
})

you pass this function as prop to Barcode scene and call it whenever you wanna set a new value(considering Stock scene is still mounted).

UPDATE: What is the proper way to update a previous StackNavigator screen?

also another solution i just saw: Updating State of Another Screen in React Navigation

edited Mar 02 '20 at 12:56

answered Mar 01 '20 at 13:02

Amir Hedieh

1,120
1
14
28

Thank you for your time to answer me. I'm new in React and JS. I don't understand how to pass a state handler function as prop to Barcode screen. i tried this but nothing happens. this.props.navigation.navigate('Barcode', {'setInputTextValue': (item) => this.setInputTextValue(item) })} – Alexis Mar 02 '20 at 08:54
maybe take a look at two links i just added – Amir Hedieh Mar 02 '20 at 13:00
Thank you for the links i tried to understand and follow. I'm too newbie to understand how to apply this on my case.I clearly don't understand the philosophy's react and js. Something that seems to be so simple to do become a nightmare for me. 3 days just to do that and no results. I'm cracking up to waste so much time. Basically, i don't know how to do that – Alexis Mar 02 '20 at 18:18

score 0 · Answer 2 · answered Mar 01 '20 at 14:23

You need to use WillFocus method(Included in react-navigation) when you comeback from Barcodepage to stockPage

componentDidMount(){
    console.log("willFocus runs") initial start

    const {navigation} = this.props;
    navigation.addListener ('willFocus', async () =>{
      console.log("willFocus runs") // calling it here to make sure it is logged at every time screen is focused after initial start
    });
}

For More Information read this document https://reactnavigation.org/docs/function-after-focusing-screen/

Thank you for your help. - "this.props.navigation.getParam('itmref')" in componentDidUpdate returns undefined. — Alexis, Mar 01 '20 at 20:06

React call function and setstate when go back to a previous screen

2 Answers2