Build realtime JSON APIs for React Native apps with Deployd Use deployd to provide self-hosted data to your React Native app About

Use deployd to provide self-hosted data to your React Native app

About

Deployd is a simple way to build and self-host realtime JSON APIs for mobile apps. React Native lets you build mobile apps using only JavaScript.

This tutorial demonstrates how to use the deployd interface to shape, create and automatically serve data. It shows how to use React Native’s built-in support for fetch to retrieve and display the data in an example Chat app:

Install React Native and init an app

Follow the instructions on the React Native site to install and create an app.

Setup deployd and create your database

Install mongo, then run npm install deployd -g. After that, create your API:

dpd create chat-api
cd chat-api
dpd -d

Create a new collection of data

Now deployd is running locally at https://localhost:2043. to the deployd portal and click the + icon by RESOURCES, add a Collection:

In this case i’m creating a collection of messages to be used in my chat app:

Define the properties of your collection

I know that each of my messages are going to need a few properties:

• text
• createdAt
• user

I’ll use the Properties editor to add these fields.

Add some data to your collection

Observe the response

Success! We’ve created our API.

When I request https://localhost:2043/messages:

Fetch and display

I’ll prepare my component’s state to receive incoming messages:

constructor(props) {
  super(props);
  this.state = {messages: []};
}

In my React Native app, I can now use the built in support for the fetch API to GET my messages:

componentDidMount() {
    fetch(MESSAGES_ENDPOINT)
      .then(r=> r.json())
      .then(messages => this.setState({messages}))
      .catch(console.error)
  }

And I can display them once they’ve come back and updated this.state:

render() {
    return (
      <View>
        {this.state.messages.map((m,i)=> {
	    return <Text key={i}>m.text</Text>
	})}
      </View>
    );
  }