React Native bindings when using router

[michshat]

Really like what mobx is offering. Thank you for sharing.

My first attempt to try the mobx is integrating it with react native app that uses react-native-router-flux. Can't seem to have binding working, pretty sure i am missing something:

1. Router

class RootRouter extends Component {

    render() {
        return(
            <Drawer content={<ControlPanel />}>
                    <View style={layout.layout}>
                        <Router hideNavBar={true} >
                            <Schema name="default" sceneConfig={Navigator.SceneConfigs.FloatFromRight}/> 

                            <Route name="inventoryList" type="replace" wrapRouter={false} component={InventoryList} title="Inventory" />               
                        </Router>
                    </View>
            </Drawer>
        );
    }
}

2. Main component

 class ControlPanel extends Component {
constructor(props) {
        super(props);
        InventoryStore.httpReq();
    }
    showInventoryList() {  
        Actions.inventoryList({store:InventoryStore });
    }

    render() {
        return (
            <View>
                <ScrollView>            
                    <View>
                        <TouchableOpacity  onPress={this.showInventoryList}>
                            <View>
                                <Text>Inventory List</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                </ScrollView>
            </View>
        );
    }   
}

3. The List component

class InventoryList extends Component {
  render() {

        if (this.props.store.isLoading === true) {
            return <View><Text>Loading ...</Text></View>;
        }

    return (            
        <View>
                { this.props.store.inventoryData.map(
                (inventory, idx) => <InventoryView inventory={ inventory } key={ idx } />
                ) }
        </View>
    );
  }
}


@observer
class InventoryView extends Component {
  render() {
    const inventory = this.props.inventory;
    return (
      <View>
        <Text>{inventory.ProjectNumber}</Text>
      </View>
    ); 
  }
}

4. The store

const InventoryStore = observable({
  inventoryData: [],
  isLoading: true
});

InventoryStore.httpReq = function (model) {
        this.isLoading = true;
        fetch('http://www.example.com/api/GetData', {
                method: 'GET',              
            })
            .then((response) => response.json())
            .then((responseData) => {

                this.isLoading = false;
                this.inventoryData = responseData

            })
            .done();

    }

Any idea?

[michshat]

Interesting enough, it's working now - haven't made any change, except stepping out from the computer and getting back at it soon after - and then boom to surprise it's working.

I think restarting packager might did the trick.

Thanks again!

[mweststrate]

You're welcome :)