Creating a photo sharing app with React Native

In this tutorial, we’ll be creating a realtime photo-sharing app with React Native and Pusher Channels.

Prerequisites

Basic knowledge of React Native is required is in order to follow along. We’ll also be using Redux in some parts of the app so basic knowledge of it will be helpful as well.

We’ll be using Expo in order to easily test the app on multiple devices. Download the Expo client app for your iOS or Android device.

These are the package versions used in creating the app:

• Node 8.3.0
• Yarn 1.7.0
• Expo CLI 2.0.0
• Expo SDK 30.0.0
• Pusher 4.3.1
• React Navigation 2.14.0

You don’t necessarily have to use the versions above, but if you encounter problems when using other versions, I recommend you to use the ones above instead. For other packages used in the app, be sure to check out the package.json file found in the GitHub repo.

We’ll be using Pusher and Imgur in this tutorial so you need to have an account on both of those services:

• Pusher account and Channels app. Create a free sandbox Pusher account or sign in and go to the dashboard. To get started, check out Pusher Channels docs.
• Imgur

App overview

When the user first opens the app, they’ll be greeted by the following screen. From here, they can either choose to share photos or view them by subscribing to another user who chose to share their photo:

When a user chooses Share, they’ll be assigned a unique username, which they can share with anyone. This sharing mechanism will be entirely outside the app, so it can be anything (For example, email or SMS):

Here’s what it looks like when someone chooses View. On this screen, they have to enter the username assigned to the user they want to follow:

Going back to the user who selected Share, here’s what their screen will look like when they click on the camera icon from earlier. This will allow the user to take a photo, flip the camera, or close it:

Once they take a snap, the camera UI will close and the photo will be previewed. At this point, the photo should have already started uploading in the background using the Imgur API:

Switching back to the follower (the user who clicked on View), once the upload is finished, the Imgur API should return the image URL and its unique ID. Those data are then sent to the Pusher channel which the follower has subscribed to. This allows them to also see the shared photo:

It’s not shown in the screenshot above, but everytime a new photo is received, it will automatically be appended to the top of the list.

You can find the app’s source code in this GitHub repo.

Create Pusher and Imgur apps

On your Pusher dashboard, create a new app and name it RNPhotoShare. Once it’s created, go to app settings and enable client events. This will allow us to directly trigger events from the app:

Next, after logging in to your Imgur account, go to this page and register an app. The most important setting here is the Authorization type. Select Anonymous usage without user authorization as we will only be uploading images anonymously. Authorization callback URL can be any value because we won’t really be using it. Other than that, you can enter any value for the other fields:

Click Submit to create the app. This will show you the app ID and app secret. We’re only going to need the app ID so take note of that. In case you lose the app ID, you can view all the Imgur apps you created here.

Building the app

Start by cloning the project repo and switch to the starter branch:

bash
1git clone https://github.com/anchetaWern/RNPhotoShare.git
2    cd RNPhotoShare
3    git checkout starter
Copy

The starter branch contains the bare-bones app template, navigation, components, and all of the relevant styles which we will be using later on. Having all of those in the starter allows us to focus on the main meat of the app.

Install the packages using Yarn:

    yarn install

Here’s a quick overview of what each package does:

• expo - the Expo SDK. This includes the Camera API and the icons that we will be using in the app.
• random-animal-name-generator - for generating the unique usernames for users who want to share photos.
• pusher-js - the JavaScript library for working with Pusher.
• react-navigation - for implementing navigation within the app.
• prop-types - for validating the props added to components on runtime.
• whatwg-fetch - there’s a recent issue with the latest version of the whatwg-fetch package that Expo uses, so we need to install a lower version through the main project in order to fix the issue.
• redux - for adding and managing global app state.
• react-redux - for working with Redux within the React environment.

Home screen

Let’s first start with the Home screen by importing all the necessary packages:

javascript
1// src/screens/HomeScreen.js
2    import React, { Component } from "react";
3    import { View, Text, Button } from "react-native";
4    
5    import Pusher from "pusher-js/react-native";
Copy

By default, React Navigation will display a header on every page, we don’t want that in this page so we disable it. In the constructor, we initialize the value of the Pusher client. We will be using this to connect to Pusher and trigger and subscribe to events:

javascript
1export default class HomeScreen extends Component {
2      static navigationOptions = {
3        header: null // don't display header
4      };
5    
6      constructor(props) {
7        super(props);
8        this.pusher = null;
9      }
10      
11      // next: add componentDidMount
12    }
Copy

Once the component is mounted, we initialize the Pusher client using the app key and app cluster from your app settings. As for the authEndpoint, retain the value below for now, we will be updating it later before we run the app:

javascript
1componentDidMount() {
2      this.pusher = new Pusher("YOUR PUSHER APP KEY", {
3        authEndpoint: "YOUR_NGROK_URL/pusher/auth",
4        cluster: "YOUR PUSHER APP CLUSTER",
5        encrypted: true // false doesn't work, you need to always use https for the authEndpoint
6      });
7    }
8    
9    // next: add render method
Copy

Next, we render the UI for the Home screen. This contains two buttons that allow the user to navigate to either the Share screen or the View screen. In both cases, we pass in the reference to the Pusher client as a navigation param. This allows us to use Pusher on both pages:

javascript
1render() {
2      return (
3        <View style={styles.container}>
4          <Text style={styles.mainText}>What to do?</Text>
5    
6          <View style={styles.buttonContainer}>
7            <Button
8              title="Share"
9              color="#1083bb"
10              onPress={() => {
11                this.props.navigation.navigate("Share", {
12                  pusher: this.pusher
13                });
14              }}
15            />
16          </View>
17    
18          <View style={styles.buttonContainer}>
19            <Button
20              title="View"
21              color="#2f9c0a"
22              onPress={() => {
23                this.props.navigation.navigate("View", {
24                  pusher: this.pusher
25                });
26              }}
27            />
28          </View>
29        </View>
30      );
31    }
Copy

Share screen

Next is the Share screen. This is where the user can take pictures with the in-app camera and share it on realtime to people who have followed their username.

Start by importing all the packages we’ll need. Most of these should look familiar, except for Clipboard. We’ll be using it to copy the user’s username to the clipboard so they can easily share it on another app:

javascript
1// src/screens/ShareScreen.js
2    import React, { Component } from "react";
3    import {
4      View,
5      Text,
6      TouchableOpacity,
7      Clipboard,
8      Alert,
9      Image,
10      Dimensions,
11      Button,
12      ScrollView
13    } from "react-native";
Copy

Next are the Expo packages and the random animal name generator. For Expo, we need the Camera for rendering a bare-bones camera UI and the Permissions to ask the user to access the camera:

javascript
1import { MaterialIcons } from "@expo/vector-icons";
2    import { Camera, Permissions } from "expo";
3    import generateRandomAnimalName from "random-animal-name-generator"; // for generating unique usernames
Copy

Next, add a button in the header. This will allow the user to stop sharing their photos. When this button is clicked, all users who are currently subscribed to this user will stop receiving updates:

javascript
1export default class ShareScreen extends Component {
2      static navigationOptions = ({ navigation }) => {
3        const { params } = navigation.state;
4        return {
5          title: "Share Photos",
6          headerTransparent: true,
7          headerRight: (
8            <Button
9              title="Finish"
10              color="#333"
11              onPress={() => params.finishSharing()}
12            />
13          ),
14          headerTintColor: "#333"
15        };
16      };
17      
18      // next: initialize state
19    }
Copy

Next, initialize the state:

javascript
1state = {
2      hasCameraPermission: null, // whether the user has allowed the app to access the device's camera
3      cameraType: Camera.Constants.Type.front, // which camera to use? front or back?
4      isCameraVisible: false, // whether the camera UI is currently visible or not
5      latestImage: null // the last photo taken by the user
6    };
7    
8    // next: add constructor
Copy

In the constructor, we generate a unique username for the user. This is composed of the funny animal name from the random-animal-name-generator library and a random number. Here, we also initialize the value for the Pusher client (we’ll get it from the navigation params shortly) and the user_channel where we will emit the event for sharing photos. Since this screen is where the Camera UI will be rendered, we also want the user to be able to change the screen orientation. That way, they can capture both portrait and landscape photos:

javascript
1constructor(props) {
2      super(props);
3      // generate unique username
4      const animalName = generateRandomAnimalName()
5        .replace(" ", "_")
6        .toLowerCase();
7      const min = 10;
8      const max = 99;
9      const number = Math.floor(Math.random() * (max - min + 1)) + min;
10      const username = animalName + number;
11      this.username = username;
12      
13      // initialize pusher
14      this.pusher = null;
15      this.user_channel = null;
16      
17      // allow changing of screen orientation
18      Expo.ScreenOrientation.allow(
19        Expo.ScreenOrientation.Orientation.ALL_BUT_UPSIDE_DOWN // enable all screen orientations except upside-down/reverse portrait
20      );
21    }
22    
23    // next: add componentDidMount
Copy

Once the component is mounted, we set the finishSharing method as a navigation param. We’ll define this method later, but for now, know that this is used for unsubscribing the user from their own channel. We’re subscribing to that channel right below that code. This allows us to listen to or trigger messages from this channel. Lastly, we ask for permission from the user to access the camera:

javascript
1async componentDidMount() {
2      const { navigation } = this.props;
3    
4      navigation.setParams({
5        finishSharing: this.finishSharing
6      });
7    
8      // subscribe to channel
9      this.pusher = navigation.getParam("pusher");
10      this.user_channel = this.pusher.subscribe(`private-user-${this.username}`);
11    
12      // ask user to access device camera
13      const { status } = await Permissions.askAsync(Permissions.CAMERA);
14      this.setState({ hasCameraPermission: status === "granted" });
15    }
16    // next: add render method
Copy

For those who are working with Pusher for the first time, the way it works is that you first have to subscribe the users to a channel. Anyone who is subscribed to this channel will be able to trigger and listen for messages sent through that channel by means of “events”. Not all users who are subscribed to the channel need to know all about the events being sent through that channel, that’s why users can selectively bind to specific events only.

Next, we render the contents of the Share screen. In this case, there are only two possible contents: one where only the camera UI is visible, and the other where only the box containing the username and a button (for opening the camera) is visible:

javascript
1render() {
2      return (
3        <View style={styles.container}>
4          {!this.state.isCameraVisible && (
5            <ScrollView contentContainerStyle={styles.scroll}>
6              <View style={styles.mainContent}>
7                <TouchableOpacity onPress={this.copyUsernameToClipboard}>
8                  <View style={styles.textBox}>
9                    <Text style={styles.textBoxText}>{this.username}</Text>
10                  </View>
11                </TouchableOpacity>
12                <View style={styles.buttonContainer}>
13                  <TouchableOpacity onPress={this.openCamera}>
14                    <MaterialIcons name="camera-alt" size={40} color="#1083bb" />
15                  </TouchableOpacity>
16                </View>
17    
18                {this.state.latestImage && (
19                  <Image
20                    style={styles.latestImage}
21                    resizeMode={"cover"}
22                    source={{ uri: this.state.latestImage }}
23                  />
24                )}
25              </View>
26            </ScrollView>
27          )}
28    
29          {this.state.isCameraVisible && (
30            <Camera
31              style={styles.camera}
32              type={this.state.cameraType}
33              ref={ref => {
34                this.camera = ref;
35              }}
36            >
37              <View style={styles.cameraFiller} />
38              <View style={styles.cameraContent}>
39                <TouchableOpacity
40                  style={styles.buttonFlipCamera}
41                  onPress={this.flipCamera}
42                >
43                  <MaterialIcons name="flip" size={25} color="#e8e827" />
44                </TouchableOpacity>
45    
46                <TouchableOpacity
47                  style={styles.buttonCamera}
48                  onPress={this.takePicture}
49                >
50                  <MaterialIcons name="camera" size={50} color="#e8e827" />
51                </TouchableOpacity>
52    
53                <TouchableOpacity
54                  style={styles.buttonCloseCamera}
55                  onPress={this.closeCamera}
56                >
57                  <MaterialIcons name="close" size={25} color="#e8e827" />
58                </TouchableOpacity>
59              </View>
60            </Camera>
61          )}
62        </View>
63      );
64    }
65    
66    // next: add copyUsernameToClipboard
Copy

If you’ve read the app overview earlier, you should already have a general idea on what’s going on in the code above so I’ll no longer elaborate. Take note of the ref prop we’ve passed to the Camera component though. This allows us to get a reference to that instance of the Camera component and assign it to a local variable called this.camera. We will be using it later to take a picture using that camera instance.

When the user clicks on the box containing the user’s username, this method is called and it sets the username to the clipboard:

javascript
1copyUsernameToClipboard = () => {
2      Clipboard.setString(this.username);
3      Alert.alert("Copied!", "Username was copied clipboard");
4    };
5    
6    // next: add openCamera
Copy

Next, are the methods for opening the camera UI, flipping it (use either back or front camera), and closing it:

javascript
1openCamera = () => {
2      const { hasCameraPermission } = this.state;
3      if (!hasCameraPermission) {
4        Alert.alert("Error", "No access to camera");
5      } else {
6        this.setState({ isCameraVisible: true });
7      }
8    };
9    
10    flipCamera = () => {
11      this.setState({
12        cameraType:
13          this.state.cameraType === Camera.Constants.Type.back
14            ? Camera.Constants.Type.front
15            : Camera.Constants.Type.back
16      });
17    };
18    
19    closeCamera = () => {
20      this.setState({
21        isCameraVisible: false
22      });
23    };
24    
25    // next: add takePicture
Copy

Next is the method for taking pictures. This is where we use the camera reference from earlier (this.camera) to call the takePictureAsync method from the Camera API. By default, the takePictureAsync method only returns an object containing the width, height and uri of the photo that was taken. That’s why we’re passing in an object containing the options we want to use. In this case, base64 allows us to return the base64 representation of the image. This is what we set in the request body of the request we send to the Imgur API. Once we receive a response from the Imgur API, we extract the data that we need from the response body and trigger the client-posted-photo event so any subscriber who is currently listening to that event will receive the image data:

javascript
1takePicture = async () => {
2      if (this.camera) {
3        let photo = await this.camera.takePictureAsync({ base64: true }); // take a snap, and return base64 representation
4        
5        // construct
6        let formData = new FormData();
7        formData.append("image", photo.base64); 
8        formData.append("type", "base64");
9    
10        this.setState({
11          latestImage: photo.uri, // preview the photo that was taken
12          isCameraVisible: false // close the camera UI after taking the photo
13        });
14    
15        const response = await fetch("https://api.imgur.com/3/image", {
16          method: "POST",
17          headers: {
18            Authorization: "Client-ID YOUR_IMGUR_APP_ID" // add your Imgur App ID here
19          },
20          body: formData
21        });
22    
23        let response_body = await response.json(); // get the response body
24        
25        // send data to all subscribers who are listening to the client-posted-photo event
26        this.user_channel.trigger("client-posted-photo", {
27          id: response_body.data.id, // unique ID assigned to the image
28          url: response_body.data.link // Imgur link pointing to the actual image
29        });
30      }
31    };
32    
33    // next: add finishSharing
Copy

Note that the name of the event has to have client- as its prefix, just like what we did above. This is because we’re triggering this event from the client side. It’s a naming convention used by Pusher so your event won’t work if you don’t follow it. Check out the docs for more information about this.

Once the user clicks on the Finish button, we unsubscribe them from their own channel. This effectively cuts off all communication between this user and all their followers:

javascript
1finishSharing = () => {
2      this.pusher.unsubscribe(`private-user-${this.username}`);
3      this.props.navigation.goBack(); // go back to home screen
4    };
Copy

For production apps, it’s a good practice to first trigger an “ending” event right before the main user (the one who mainly triggers events) unsubscribes from their own channel. This way, all the other users will get notified and they’ll be able to clean up their connection before their source gets completely shut off.

View screen

The View screen is where users who want to follow another user go. Again, start by importing all the packages we need:

javascript
1// src/screens/ViewScreen.js
2    import React, { Component } from "react";
3    import {
4      View,
5      Text,
6      TextInput,
7      ScrollView,
8      Dimensions,
9      Button,
10      Alert
11    } from "react-native";
12    
13    import CardList from "../components/CardList";
Copy

Nothing really new in the code above, except for the CardList component. This component is already included in the starter project so we don’t have to create it separately. What it does is render all the images that were sent by the user followed by the current user.

Next, import all the Redux-related packages:

javascript
1// src/screens/ViewScreen.js
2    import { Provider } from "react-redux";
3    import { createStore } from "redux";
4    import reducers from "../reducers";
5    
6    import { addedCard } from "../actions";
7    
8    const store = createStore(reducers);
Copy

Next, we also add a button in the header. This time, to unfollow the user. We’re also passing in the function used here (params.unfollow) as a navigation param later inside the componentDidMount method:

javascript
1export default class ViewScreen extends Component {
2    
3      static navigationOptions = ({ navigation }) => {
4        const { params } = navigation.state;
5        return {
6          title: "View Photos",
7          headerTransparent: true,
8          headerTintColor: "#333",
9          headerRight: (
10            <Button
11              title="Unfollow"
12              color="#333"
13              onPress={() => params.unFollow()}
14            />
15          )
16        };
17      };
18      
19      // next: initialize state
20    }
Copy

Next, initialize the state:

javascript
1state = {
2      subscribedToUsername: "", // the username of the user the current user is subscribed to
3      isSubscribed: false // is the user currently subscribed to another user?
4    };
Copy

In the constructor, we also set the default value for the Pusher client and the user channel. In this case, the user channel will be whoever the current user is subscribed to. The current user doesn’t really need to trigger any events in the user channel, so we don’t have to generate a unique username and subscribe them to their own channel as we did in the Share screen earlier:

javascript
1constructor(props) {
2      super(props);
3      this.pusher = null;
4      this.user_channel = null;
5    }
6    // next: add componentDidMount
Copy

Once the component is mounted, we set the unFollow function as a navigation param and initialize the Pusher client:

javascript
1componentDidMount() {
2      const { navigation } = this.props;
3      navigation.setParams({ unFollow: this.unFollow }); // set the unFollow function as a navigation param
4    
5      this.pusher = navigation.getParam("pusher");
6    }
7    
8    // next: add render
Copy

Next, we render the UI of the of the View screen. Here, we wrap everything in the Provider component provided by react-redux. This allows us to pass down the store so we could use it inside the followUser to dispatch the action for adding a new Card to the CardList:

javascript
1render() {
2      return (
3        <Provider store={store}>
4          <View style={styles.container}>
5            {!this.state.isSubscribed && (
6              <View style={styles.initialContent}>
7                <Text style={styles.mainText}>User to follow</Text>
8                <TextInput
9                  style={styles.textInput}
10                  onChangeText={subscribedToUsername =>
11                    this.setState({ subscribedToUsername })
12                  }
13                >
14                  <Text style={styles.textInputText}>
15                    {this.state.subscribedToUsername}
16                  </Text>
17                </TextInput>
18    
19                <View style={styles.buttonContainer}>
20                  <Button
21                    title="Follow"
22                    color="#1083bb"
23                    onPress={this.followUser}
24                  />
25                </View>
26              </View>
27            )}
28    
29            {this.state.isSubscribed && (
30              <ScrollView>
31                <View style={styles.mainContent}>
32                  <CardList />
33                </View>
34              </ScrollView>
35            )}
36          </View>
37        </Provider>
38      );
39    }
40    // next: add followUser
Copy

The followUser method is where we add the code for subscribing to the username entered by the user in the text field. Once the subscription succeeds, only then can we listen for the client-posted-photo event. When we receive this event, we expect the id and url of the image to be present. We then use those to dispatch the action for adding a new Card on top of the CardList:

javascript
1followUser = () => {
2      this.setState({
3        isSubscribed: true
4      });
5      
6      // subscribe to the username entered in the text field
7      this.user_channel = this.pusher.subscribe(
8        `private-user-${this.state.subscribedToUsername}`
9      );
10      
11      // alert the user if there's an error in subscribing
12      this.user_channel.bind("pusher:subscription_error", status => {
13        Alert.alert(
14          "Error occured",
15          "Cannot connect to Pusher. Please restart the app."
16        );
17      });
18    
19      this.user_channel.bind("pusher:subscription_succeeded", () => { // subscription successful
20        this.user_channel.bind("client-posted-photo", data => { // listen for the client-posted-photo event to be triggered from the channel
21          store.dispatch(addedCard(data.id, data.url)); // dispatch the action for adding a new card to the list
22        });
23      });
24    };
25    
26    // next: add unFollow
Copy

Lastly, add the unFollow method. This gets called when the user clicks on the Unfollow button in the header. This allows us to unsubscribe from the user we subscribed to earlier inside the followUser method:

javascript
1unFollow = () => {
2      this.pusher.unsubscribe(`private-user-${this.state.subscribedToUsername}`);
3      this.props.navigation.goBack(); // go back to the home page
4    };
Copy

Unsubscribing from a channel automatically unbinds the user from all the events they’ve previously bound to. This means they’ll no longer receive any new photos.

Adding the action and reducer

Earlier in the followUser method of the src/screens/ViewScreen.js file, we dispatched the addedCard action. We haven’t really defined it yet so let’s go ahead and do so. Create an actions and reducers folder inside the src directory to house the files we’re going to create.

To have a single place where we define all the action types in this app, create a src/actions/types.js file and add the following:

    export const ADDED_CARD = "added_card";

In the code above, all we do is export a constant which describes the action type. Nothing really mind-blowing, but this allows us to import and use this constant every time we need to use this specific action. This prevents us from making any typo when using this action.

Next, create a src/actions/index.js file, this is where we define and export the action. We pass in the ADDED_CARD constant as a type along with the id and url. These are the unique ID and URL of the image which is received by the reducer everytime this action is dispatched:

javascript
1// src/actions/index.js
2    import { ADDED_CARD } from "./types";
3    
4    export const addedCard = (id, url) => {
5      return {
6        type: ADDED_CARD,
7        id: id,
8        url: url
9      };
10    };
Copy

Next, create a src/``reducers/CardsReducer.js file, this is where we add the reducer responsible for modifying the value of the cards array in the state. This gets executed every time we dispatch the addedCard action. When that happens, we simply return a new array containing the existing card objects and the new card object:

javascript
1// src/reducers/CardsReducer.js
2    import { ADDED_CARD } from "../actions/types";
3    
4    const INITIAL_STATE = {
5      cards: []
6    };
7    
8    export default (state = INITIAL_STATE, action) => {
9      switch (action.type) {
10        case ADDED_CARD:
11          const cards = [...state.cards, { id: action.id, url: action.url }]; // return a new array containing the existing card objects and the new card object
12          return { ...state, cards };
13    
14        default:
15          return state;
16      }
17    };
Copy

Note that we’re adding it to the end of the new array instead of in the beginning. This is because the FlatList component which is responsible for rendering this data is inverted. This means that the items are rendered from bottom to top.

Lastly, combine all the reducers in a single file:

javascript
1// src/reducers/index.js
2    import { combineReducers } from "redux";
3    import CardsReducer from "./CardsReducer";
4    
5    export default combineReducers({
6      cards: CardsReducer
7    });
Copy

The code above enabled us to import only a single file to include the reducers and use it for creating the store. Don't add this, as it was already added earlier:

javascript
1// src/screens/ViewScreen.js (don't add as it was already added earlier)
2    import reducers from "../reducers"; 
3    const store = createStore(reducers);
Copy

Update the CardList component

If you saw the CardList component from the codes of the View screen earlier, you might have noticed that we haven’t really passed any props to it. So how will it have any data to render?

javascript
1// src/screens/ViewScreen.js
2    {this.state.isSubscribed && (
3      <ScrollView>
4        <View style={styles.mainContent}>
5          <CardList />
6        </View>
7      </ScrollView>
8    )}
Copy

The answer is it doesn’t. Currently, the CardList component doesn’t really have the ability to render cards, so we have to update it. Start by importing the connect method from the react-redux library. This will allow us to create a “connected” component:

javascript
1// src/components/CardList.js
2    import { connect } from "react-redux";
Copy

After the CardList prop types, add a mapStateToProps method. This allows us to map out any value in the store as a prop for this component. In this case, we only want the cards array:

javascript
1CardList.propTypes = {
2      // previous CardList propTypes code here...
3    };
4    
5    // add this:
6    const mapStateToProps = ({ cards }) => { // extract the cards array from the store
7      return cards; // make it available as props
8    };
9    
10    // replace export default CardList with this:
11    export default connect(mapStateToProps)(CardList);
Copy

Now, every time the addedCard action is dispatch, the value of this.props.cards inside this component will always be in sync with the value of the cards array in the store.

Creating the server

The server is mainly used for authenticating a user who tries to connect to Pusher. If you open the file for the Home screen, we’ve added this code earlier:

javascript
1// src/screens/HomeScreen.js
2    componentDidMount() {
3      this.pusher = new Pusher("YOUR PUSHER APP KEY", {
4        authEndpoint: "YOUR_NGROK_URL/pusher/auth",
5        cluster: "YOUR PUSHER APP CLUSTER",
6        encrypted: true
7      });
8    }
Copy

This is where we establish the connection to Pusher’s servers. The authEndpoint is responsible for authenticating the user to verify that they’re really a user of your app. So the app hits the server every time the code above is executed.

Now that you know what the server is used for, we’re ready to add its code. Start by navigating inside the server directory and install all the packages:

bash
1cd server
2    npm install
Copy

Import all the libraries we need and intialize them. This includes Express and a couple of middlewares (JSON and URL encoded body parser), and dotenv which allows us to load values from the .env file:

javascript
1var express = require("express");
2    var bodyParser = require("body-parser");
3    var Pusher = require("pusher");
4    
5    var app = express(); // Express server
6    app.use(bodyParser.json()); // for parsing the request body into JSON object
7    app.use(bodyParser.urlencoded({ extended: false })); // for parsing URL encoded request body
8    
9    require("dotenv").config(); // initialize dotenv
Copy

Next, initialize the Pusher server component using the values from the .env file inside your server directory:

javascript
1var pusher = new Pusher({
2      // connect to pusher
3      appId: process.env.APP_ID,
4      key: process.env.APP_KEY,
5      secret: process.env.APP_SECRET,
6      cluster: process.env.APP_CLUSTER
7    });
Copy

Next, add the route for testing if the server is working correctly:

javascript
1app.get("/", function(req, res) {
2      res.send("all green...");
3    });
Copy

Next, add the route for authenticating user requests:

javascript
1app.post("/pusher/auth", function(req, res) {
2      var socketId = req.body.socket_id;
3      var channel = req.body.channel_name;
4      var auth = pusher.authenticate(socketId, channel);
5      res.send(auth);
6    });
Copy

Note that in the code above, we haven’t really added any form of authentication. All we’re really doing is authenticating the user as they hit this route. This is not what you want to do for production apps. For production apps, you will most likely have some sort of user authentication before a user can use your app. That’s what you need to integrate into this code so you can ensure that the users who are making requests to your Pusher app are real users of your app.

Next, make the server listen to the port indicated in the .env file:

javascript
1var port = process.env.PORT || 5000;
2    app.listen(port);
Copy

Lastly, update the .env file and update it with your Pusher app details:

javascript
1APP_ID=YOUR_PUSHER_APP_ID
2    APP_KEY=YOUR_PUSHER_APP_KEY
3    APP_SECRET=YOUR_PUSHER_APP_SECRET
4    APP_CLUSTER=YOUR_PUSHER_APP_CLUSTER
5    PORT=3000
Copy

Running the app

To run the app, you need to create an account on ngrok.com. Once you have an account, go to your account dashboard and download the ngrok binary for your operating system. Extract the zip file and you’ll see an ngrok file. Execute that file from the terminal (Note: you’ll probably need to add execution permissions to it if you’re on Linux) to add your auth token:

    ./ngrok authToken YOUR_NGROK_AUTH_TOKEN

Once that’s done, run the server and expose port 3000 using ngrok:

bash
1node server.js
2    ./ngrok http 3000
Copy

Ngrok will provide you with an https URL. Use that as the value for the authEndpoint in the src/screens/HomeScreen.js file:

javascript
1componentDidMount() {
2      this.pusher = new Pusher("YOUR PUSHER APP KEY", {
3        authEndpoint: "YOUR_NGROK_HTTPS_URL/pusher/auth",
4      });
5    }
Copy

Lastly, navigate inside the root directory of the app and start it:

    expo start

You can test the app on your machine using the emulator if you have a powerful machine. Personally, I tested it on my iOS and Android device so you might have better luck when running it on your device also.

Conclusion

That’s it! In this tutorial, you learned how to create a realtime photo-sharing app with React Native and Pusher. Along the way, you learned how to use Expo’s Camera API, Imgur API to anonymously upload images, and Pusher to send and receive data in realtime.

You can find the app’s source code in this GitHub repo.