Access state of React Native Scrollable Tab View

Question

Access state of React Native Scrollable Tab View

Navigation

#1 by (0 votes)

0

I have a 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 the App.js and use the result in the ScrollableTabView tabs. I can pass this data using props , but the child tabs would have to modify the state in App.js ...

In summary:

App.js does HTTP request and gets JSON. Saves JSON in the state. Pass the state to the Rota Delay tabs, ChildOne, ChildTwo. The tabs read and modify the App.js state.

The request is currently RotaData.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 change to App.js.

How can I implement this?

react-native

asked by anonymous 21.08.2018 / 18:49

1 answer

cakephp password reset How to leave the label background transparent? python3 + tkinter

score 0 · Answer 1

One resolution would be to work with functions linked to the Instantiated Object (the App.js State Holder: Bind or Arrow Functions). You implement functions in AppJS that change the state of the parent node and 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 this footprint, every life that is called updateState on child nodes, you update the parent node state from the children.

In Summary:

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