wassimz/RNPhotoShare

A sample React Native app showing how to use Imgur and Pusher to implement a realtime photo-sharing app

JavaScript

RNPhotoShare

A sample React Native app showing how to use Imgur and Pusher to implement a realtime photo-sharing app

Full tutorial is available at: https://pusher.com/tutorials/photo-sharing-react-native

Prerequisites

React Native development environment or Expo
Node.js
Yarn
Expo account
Expo Android or iOS client app
Pusher app instance
Imgur app
Ngrok account

Getting Started

Clone the repo:

git clone https://github.com/anchetaWern/RNPhotoShare.git

Install the app dependencies:

cd RNPhotoShare
yarn install

Update Pusher config on src/screens/HomeScreen.js file:

componentDidMount() {
    this.pusher = new Pusher("YOUR PUSHER APP KEY", {
      authEndpoint: "YOUR_NGROK_URL/pusher/auth",
      cluster: "YOUR PUSHER APP CLUSTER",
      encrypted: true
    });
}

Add your Imgur app ID on src/screens/ShareScreen.js file:

const response = await fetch("https://api.imgur.com/3/image", {
	method: "POST",
	headers: {
	  Authorization: "Client-ID YOUR_IMGUR_APP_ID"
	},
	body: formData
});

Install the server dependencies:

cd server
npm install

Update the .env file:

APP_ID=YOUR_PUSHER_APP_ID
APP_KEY=YOUR_PUSHER_APP_KEY
APP_SECRET=YOUR_PUSHER_APP_SECRET
APP_CLUSTER=YOUR_PUSHER_APP_CLUSTER
PORT=3000

Run the server:

node server.js

Download ngrok executable file.
Expose server using ngrok:

./ngrok authtoken YOUR_NGROK_AUTH_TOKEN
./ngrok http 3000

Copy the ngrok https URL and update the authEndpoint in the src/screens/HomeScreen.js file.
Run the app and open it in your Expo client app:

expo start

Built With