Access React Native Scrollable Tab View state

Question

I have an React Native application with the React-Native-scrollable-tab-view library, where this tab view contains 3 child nodes:

App.js

<ScrollableTabView
          style={{marginTop: 0, backgroundColor: '#1C4747', }}
          tabBarUnderlineStyle={{backgroundColor: "#fff"}}
          tabBarActiveTextColor={"#fff"}
          tabBarInactiveTextColor={"#ccc"}
          initialPage={0}
          renderTabBar={() => <DefaultTabBar />}
        >
          <RotaEntrega tabLabel='ROTA' />
          <ChildOne tabLabel='ORDENS' text='ORDENS' size={17} weight="500" />
          <ChildTwo tabLabel='HISTÓRICO' text='HISTÓRICO' size={17} weight="500" />

</ScrollableTabView>

In Rotaentrega.js there is an HTTP request that returns a json from the server. However, I realized that this same request is used on the other two nodes (Childone and Childtwo), so I would have to migrate the request to App.js and use the result in the Scrollabletabview tabs. I can pass this data using props, but the tabs children would have to modify the state in App.js...

In short:

App.js requests HTTP and gets JSON. JSON saves in state. Move the state to Rotaentrega tabs, Childone, Childtwo. Tabs read and modify the state of App.js.

Currently the request is Rotaentrega.js:

_route = async(codDriver) => {
    const apiCall = await fetch(`http://urlaqui.com.br/testes/api.php?driver=${codDriver}`);
    const response = await apiCall.json();

    let latLongObj = {
      latitude: parseFloat(response.os[0].address.latitude),
      longitude: parseFloat(response.os[0].address.longitude)
    };

    this.setState({
      route: response.success ? [ response.os[0] ] : [], //only first route in the list
      routeFound: response.success,
      orders: response.success ? response.os : [], //and put the all orders to this array
      destination: latLongObj
    });
  };

  componentDidMount(){
    this._route("51ds515");
  }

Soon the above code will pass to App.js.

How can I implement this?

Answer 1

A resolution would work with functions linked to the Instantiated Object( The App.js Status Holder: Bind or Arrow Functions ). You implement Appjs functions that change the state of the parent node and pass these functions for child nodes.

Example:

App.js

 //...
 class App exetends React.Component {

   _request(){ // ... }

   updateState = (args) => {if(args){this.setState(args);}}

   render(){
     return (
       <ScrollableTabView
         style={{marginTop: 0, backgroundColor: '#1C4747', }}
         tabBarUnderlineStyle={{backgroundColor: "#fff"}}
         tabBarActiveTextColor={"#fff"}
         tabBarInactiveTextColor={"#ccc"}
         initialPage={0}
         renderTabBar={() => <DefaultTabBar />}
       >
         <RotaEntrega tabLabel='ROTA' updateState={this.updateState} />
         <ChildOne tabLabel='ORDENS' text='ORDENS' size={17} weight="500"  updateState={this.updateState}/>
         <ChildTwo tabLabel='HISTÓRICO' text='HISTÓRICO' size={17} weight="500" updateState={this.updateState} />

       </ScrollableTabView>
     );

 }

In that footprint, every life that is called updateState in the child nodes, you update the state of the parent node from the children.

In Summary:

Implement state change methods and pass the function as props. Remember to link function to instance, using bind or Arrow-functions to change the state of the parent node.