How to integrate React-native with backend server?

Question

I am using django as the backend, and react-native for the app. When the app is opened inside the react-native app, on componentDidMount(), the method will will request through the url to the django server:

export default class App extends React.Component {
    constructor(props) {
        super(props)
    }
    componentDidMount() {
        this.fromServer()
    }
    fromServer() {
        var headers = new Headers();
        headers.append('Accept', 'application/json');
        let a = fetch('http://xxx.xxx.xx.xx:8080/posts/', headers)
            .then(function(response) {
                console.log('fetched...')
                    if (response.status !== 200) {
                        console.log('There was a problem. Status Code: ' +  response.status);  
                        return;
                    }
                    response.json().then(function(data) {  
                        console.log(data);
                    });  
                }  
            )  
            .catch(function(err) {  
                console.log('Fetch Error :-S', err);  
            });
    }
    render() {
        return (
            <View>
                <ListView dataSource=?????></ListView>
            </View>
        );
   }
}

And the server will respond with an array of json objects. Like so:

[
    {
        "id": 7,
        "target": {
            "body": "This is the body",
            "title": "Airbnb raising a reported $850M at a $30B valuation"
        }
    },
    {
        "id": 11,
        "target": {
            "body": "This is the body",
            "title": "Browsing the APISSS"
        }
    }
]

Since I have enabled remote debugging, I can see the json objects in the console.

I know the basic of creating a ListView. My problem is, when the array of objects are fetched, how can I use that array of objects to render it with the ListView, so that I can display the title and body for each list item. Do I create a separate state in the constructor and add it to the dataSource? How do you integrate react-native app with the backend server?

have a look at this: https://www.npmjs.com/package/react-native-web-service-handler — Riten
– Riten, Commented Aug 8, 2016 at 10:37

while1 · Accepted Answer · 2016-08-10 05:42:58Z

You will need to create a datasource in constructor and set it as default state and change that datasource state again once you get new data. And you will also need to set renderRow prop for ListView which returns row component . Your code could look this following:

export default class App extends React.Component {
constructor(props) {
    super(props)
    //---> Create DataSource
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
   this.state = {dataSource:ds}
}
componentDidMount() {
    this.fromServer()
}
fromServer() {
    var headers = new Headers();
    headers.append('Accept', 'application/json');
    let a = fetch('http://xxx.xxx.xx.xx:8080/posts/', headers)
        .then((response) => {
            console.log('fetched...')
                if (response.status !== 200) {
                    console.log('There was a problem. Status Code: ' +  response.status);  
                    return;
                }
                response.json().then(function(data) {  
                    //---> Change DATASOURCE STATE HERE
                    this.setState(dataSource:this.state.dataSource.cloneWithRows(data))
                });  
            }  
        )  
        .catch(function(err) {  
            console.log('Fetch Error :-S', err);  
        });
}
render() {
   //--> set correct datasource
    return (
        <View>
            <ListView renderRow={this.renderRow.bind(this)} dataSource={this.state.dataSource}></ListView>
        </View>
    );
 }
 renderRow(rowInformation)
 {
   return <Text>{rowInformation.title}</Text>
 }
}

Rajesh · Accepted Answer · 2016-08-08 06:49:24Z

0

whenever u receive valid response, you can just do

response.json().then(function(data) {  
                    console.log(data);
                    let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
                    this.state={
                       dataSource: ds.cloneWithRows(data),
                    }
                });

answered Aug 8, 2016 at 6:49

Rajesh

5569 silver badges29 bronze badges

2 Comments

Benjamin Smith Max Over a year ago

Do I need to create a dataSource state in the contructor? Little more information would be very helpful.

Rajesh Over a year ago

yes ... you can add it in constructor and in response as well . I dont know the best practice as Im in learning phase as well , but you will get what you want using this !

Collectives™ on Stack Overflow

How to integrate React-native with backend server?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related