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

user_6194160 0
Viewed 2445

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}
          />
    );
  }
}
react-native navigation
2 Answers

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

user_102281190

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/

user_90905650
Related