0

I have two screens. Screen A and Screen B, Screen A is Parent component and from screen A. I am navigating to Screen B. In screen A I have 3 buttons. and on each click of button screen B will open. and there is form in screen B. on the submit of that form I want that. the first button in screen A will have to green. the same for button 2. on click of button 2 second form will open and then on the submit of second form second button will be green. So pleas help.

here is my screen A code

import { TouchableOpacity, View } from "react-native";

export default class patientReadings extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <View>
        <TouchableOpacity
          onPress={() => this.props.navigation.navigate("medicalinputs")}
        >
          button 1
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => this.props.navigation.navigate("medicalinputs")}
        >
          button 2
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => this.props.navigation.navigate("medicalinputs")}
        >
          button 3
        </TouchableOpacity>
      </View>
    );
  }
}

here is screen B

export default class medicalInput extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
    this.state = {};
  }

  validateInputs = (event) => {
    fetch("api", {
      method: "POST",
      headers: {
        Accept: "application/json, text/plain, */*",
        "Content-Type": "application/json",
      },

      body: JSON.stringify([
        {
          data,
        },
      ]),
    })
      .then((returnValue) => returnValue.json())
      .then((response) => {
        console.log(response);

        this.props.navigation.navigate("patientReadings");
      });
  };

  render() {
    return (
      <TouchableOpacity
        onPress={() => this.validateInputs()}
      ></TouchableOpacity>
    );
  }
}

2 Answers2

0

In React JS, data flows in one direction, from Parent to Child. This helps components to be simple and predictable. there is a way how you can do it. Check out this link

Ragul
  • 11
  • 1
0

Hi please check this way that you can pass function of screen A in route params and call it in screen B when do submit form.

class ScreenA extends React.Component {
    handleCallback = (color) => {
        console.log('color from screen B', color);
    }

    navigateToScreenB = () => {
        this.props.navigation.navigate('ScreenB', {
            handleCallback: this.handleCallback // Pass function in params when navigate to screen B
        })
    }

    render() {
        ...
    }
}

class ScreenB extends React.Component {

    onSubmit = () => {
        // Called function that
        const { state } = this.props.navigation;
        const params = state.params || {};
        params.handleCallback('green'); // screen A callback function called that passed in route params
    }

    render() {
        ...
    }
}

But learn redux because that is legitimate way share states between screens.

Javascript Hupp Technologies
  • 1,997
  • 2
  • 12
  • 27