How to Integrating dropbox in your React native chat App

How to Integrating dropbox in your React native chat App

Add Dropbox integration, allowing users to share large files without restriction

You will need Node and React Native installed on your machine.

Chatkit has a limit of 5MB per attachment. In this tutorial, we’ll be looking at how we can work around this limit by using Dropbox to handle file uploads.

Prerequisites

Knowledge of React and React Native is required to follow this tutorial.

The following package versions are used. If you encounter any issues in compiling the app, try to use the following:

  • Node 11.2
  • Yarn 1.13
  • React Native 0.59

You’ll need a Chatkit app instance with the test token provider enabled. If you don’t know the basics of using Chatkit yet, be sure to check out the official docs. This tutorial assumes that you already know the basics of integrating Chatkit into a React Native app.

You’ll also need an Auth0 account and a Dropbox account. We’ll be creating app instances for both services in this tutorial.

Lastly, you’ll need an ngrok account for exposing the server to the internet.

App overview

We’ll be building a simple chat app using Chatkit and React Native Gifted Chat. It will have two screens: login and chat.

The login screen is where the user can enter their username and their friend’s username:

Once logged in, they’ll be redirected to the chat screen:

In order to upload the files using Dropbox, the user has to first log in and authenticate using their Dropbox account:

Once authenticated, their Dropbox access token will be stored in the app. This will be used for uploads whenever the user attaches a file.

Note that we won’t be using Chatkit’s attachment feature in this tutorial. Attachments will simply fail if the user didn’t authenticate with their Dropbox account.

You can find the code on this GitHub repo.

Creating a Dropbox app instance

This section assumes that you already have a Dropbox account. Go ahead and create one if you don’t have one already.

Once you have a Dropbox account, go to dropbox.com/developers and click on the Create your applink:

Choose the API type, access type, and enter the name of the app:

Note: the name of your app cannot include the word “dropbox” as it goes against their branding guidelines.

Once the app is created, it will redirect you to its settings page. Later on, you’ll have to update the Redirect URIs with the callback URL that Auth0 will provide:

Creating an Auth0 app instance

This section assumes that you already have an Auth0 account. Go ahead and create one if you don’t have one already.

Main app

First, we need to create the main app instance, which we’ll use in the React Native app that we will be creating later.

Once you’re logged in to your account, go to your dashboard and click on the + CREATE APPLICATION button.

On the modal window that pops up, enter the name of the app and select native as the application type then click CREATE:

Once the app instance is created, you’ll be redirected to its page. Click on the Settings tab to view the settings for the app. This contains some of the information that you need to put in your .env file:

    AUTH0_DOMAIN="YOUR AUTH0 DOMAIN"
    AUTH0_CLIENT_ID="YOUR AUTH0 CLIENT ID"
    AUTHO_SCOPE="openid profile"
    AUTH0_AUDIENCE="YOUR AUTH0 DOMAIN/userinfo"

Take note of this page as we’ll go back to update the settings later with the details of the React Native app that we will be creating.

This is also a good time to update your Dropbox app settings with your redirect URI:

Machine to machine app

When the user authenticates the app via their Dropbox account, an access token is returned. This access token can be used to fetch the user’s details but it can’t be used to make requests to the Dropbox API. In order to get the access token for making those requests, we need to create another Auth0 app instance for communicating with the Identity Provider (in this case, it’s Dropbox).

From your Auth0 dashboard, create another application and select Machine to Machine Applicationsas the type:

Once you’ve clicked the CREATE button, it will ask you to select the API type. Select Auth0 Management API, and under scopes, select read:users and read:useridtokens. Click on AUTHORIZEto create the app instance:

Once the app is created, you’ll be redirected to its settings page. Copy the Domain, Client ID and Client Secret from that page into your server/.env file:

    AUTH0_DOMAIN="YOUR AUTH0 DOMAIN"
    AUTH0_CLIENT_ID="YOUR MACHINE TO MACHINE AUTH0 APP CLIENT ID"
    AUTH0_CLIENT_SECRET="YOUR MACHINE TO MACHINE AUTH0 APP CLIENT SECRET"

Dropbox connection

The final step is to connect Dropbox to the Auth0 apps you created earlier. Click on Connections → Social link and enable Dropbox:

This should open the following modal window. Enter the Client ID and Client Secret of the Dropbox app instance you created earlier and click SAVE:

You can click on the TRY button to check if the connection works.

Next, enable the Dropbox connection for the relevant apps. This includes the main app (React Native Dropbox Chatkit App) which we will use in React Native, and the Machine-Machine Applications which we’ll use for generating the user’s Dropbox access token from the server:

Setting up the app

In order to save time in building the most important parts of the app, I’ve created a starter branch in the repository:

    git clone https://github.com/anchetaWern/RNChatkitDropbox
    git checkout starter

This already includes the code for the whole chat app. So all we have to do is integrate Dropbox login, file uploads, and downloads.

Next, install all the dependencies and link the relevant packages:

    yarn
    react-native eject
    react-native link react-native-gesture-handler
    react-native link react-native-permissions
    react-native link react-native-document-picker
    react-native link react-native-fs
    react-native link react-native-device-info
    react-native link react-native-config
    react-native link react-native-auth0
    react-native link react-native-vector-icons
    react-native link react-native-sensitive-info

Next, we need to update the Android manifest file to allow the app to read and write on the external storage:

 // android/app/src/main/AndroidManifest.xml
    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.rnchatkitdropbox">
      <uses-permission android:name="android.permission.INTERNET" />
      <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
      <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
      ...
    </manifest>

We also need to allow the app to open a Web View for authenticating the user. To do that, add android:launchMode="singleTask" as a property to <activity>. And inside <activity>, add a new <intent-filter>. This allows the app to connect to the default browser of the device. The config below specifies the exact domain that the app can open. In this case, it should be your Auth0 domain, so replace the placeholder YOUR AUTH0 DOMAIN value below:

 <application 
      ...
    >
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:launchMode="singleTask"
      >
        <intent-filter>...</intent-filter>
    &lt;intent-filter&gt;
      &lt;action android:name="android.intent.action.VIEW" /&gt;
      &lt;category android:name="android.intent.category.DEFAULT" /&gt;
      &lt;category android:name="android.intent.category.BROWSABLE" /&gt;
      &lt;data
        android:host="YOUR AUTH0 DOMAIN"
        android:pathPrefix="/android/${applicationId}/callback"
        android:scheme="${applicationId}" /&gt;
    &lt;/intent-filter&gt;
  &lt;/activity&gt;
&lt;/application&gt;

Next, go to your Auth0 app settings (the native app) and update its allowed callback URLs:

This uses the following format:

    {YOUR_APP_PACKAGE_NAME}://{YOUR_AUTH0_DOMAIN}/android/{YOUR_APP_PACKAGE_NAME}/callback

Once replaced, mine looked like this for Android:

    com.rnchatkitdropbox://wern.auth0.com/android/com.rnchatkitdropbox/callback
If you need to support iOS, you can view the tutorial on adding Auth0 to a React Native app.

Lastly, update your .env and server/.env file with your Chatkit credentials:

 CHATKIT_INSTANCE_LOCATOR_ID="YOUR CHATKIT INSTANCE LOCATOR ID (omit v1:us1:)"
CHATKIT_SECRET_KEY="YOUR CHATKIT SECRET KEY"
Integrating Dropbox into the app

Now we’re ready to integrate Dropbox to the app. We’ll start by updating the login screen, the chat screen, and finally the server.

Login screen

In the login screen, we need to ask for permission to access the device storage. The starter branch already includes the React Native Permissions library which is what we’re using below. This library allows us to ask for various permissions to use a specific device feature (for example, camera, contacts):

  // src/screens/Login.js
import axios from "axios";
import Permissions from "react-native-permissions"; // add this

Once the component is mounted, we ask for permission. This will show an alert message asking the user to agree for the app to access the device storage. If the user agrees, the permission is granted and the app will be able to pick files from the external storage when the user attaches a file. Otherwise, it will only be able to pick files from the internal storage:

componentDidMount() {
Permissions.check('storage').then((response) => {
if(response == 'undetermined') {
Permissions.request('storage').then((response) => {
console.log('requested storage permission: ', response);
});
}
});
}

Next, we update the enterChat method to get the systemtoken and pass it to the chat screen. We will update the server code later to pass this value when the app makes a request to the /users route. The systemtoken is used for getting the access token that the app can use for uploading files to Dropbox:

 enterChat = async () => {

  // ...
  if (username &amp;&amp; friends_username) {
    try {
      const response = await axios.post(
        // ...
      );

      const system_token = response.data; // add this

      this.props.navigation.navigate("Chat", {
        user_id,
        username,
        friends_username,
        system_token // add this
      });

      // ..
    } catch (e) {
      // ...
    }
    // ...
  }
}

Chat screen

As mentioned earlier, the starter branch already contains the basic chat code (sending and receiving messages and rendering it on the screen). All we have to do in this section is to implement the file picker and integrate Dropbox file upload and download.

Start by importing the additional packages and components that we’ll be using:

 // src/screens/Chat.js

// ...

// add these:
import { DocumentPicker, DocumentPickerUtil } from "react-native-document-picker"; // for picking files
import * as mime from "react-native-mime-types"; // for getting the content type of files
import RNFS from "react-native-fs";
import { Buffer } from 'buffer/'; // for converting the base64 string representation of the file to array buffer

import DeviceInfo from "react-native-device-info"; // for getting unique device info
import { Dropbox } from "dropbox"; // for using the Dropbox API

import Auth0 from "react-native-auth0"; // for using Auth0
import SInfo from "react-native-sensitive-info"; // for storing the access token

import IconButton from "../components/IconButton";
import ChatBubble from "../components/ChatBubble";

Initialize Auth0:

const auth0 = new Auth0({
domain: Config.AUTH0_DOMAIN,
clientId: Config.AUTH0_CLIENT_ID
});

You will need Node and React Native installed on your machine.

Chatkit has a limit of 5MB per attachment. In this tutorial, we’ll be looking at how we can work around this limit by using Dropbox to handle file uploads.

Prerequisites

Knowledge of React and React Native is required to follow this tutorial.

The following package versions are used. If you encounter any issues in compiling the app, try to use the following:

  • Node 11.2
  • Yarn 1.13
  • React Native 0.59

You’ll need a Chatkit app instance with the test token provider enabled. If you don’t know the basics of using Chatkit yet, be sure to check out the official docs. This tutorial assumes that you already know the basics of integrating Chatkit into a React Native app.

You’ll also need an Auth0 account and a Dropbox account. We’ll be creating app instances for both services in this tutorial.

Lastly, you’ll need an ngrok account for exposing the server to the internet.

App overview

We’ll be building a simple chat app using Chatkit and React Native Gifted Chat. It will have two screens: login and chat.

The login screen is where the user can enter their username and their friend’s username:

Once logged in, they’ll be redirected to the chat screen:

In order to upload the files using Dropbox, the user has to first log in and authenticate using their Dropbox account:

Once authenticated, their Dropbox access token will be stored in the app. This will be used for uploads whenever the user attaches a file.

Note that we won’t be using Chatkit’s attachment feature in this tutorial. Attachments will simply fail if the user didn’t authenticate with their Dropbox account.

You can find the code on this GitHub repo.

Creating a Dropbox app instance

This section assumes that you already have a Dropbox account. Go ahead and create one if you don’t have one already.

Once you have a Dropbox account, go to dropbox.com/developers and click on the Create your applink:

Choose the API type, access type, and enter the name of the app:

Note: the name of your app cannot include the word “dropbox” as it goes against their branding guidelines.

Once the app is created, it will redirect you to its settings page. Later on, you’ll have to update the Redirect URIs with the callback URL that Auth0 will provide:

Creating an Auth0 app instance

This section assumes that you already have an Auth0 account. Go ahead and create one if you don’t have one already.

Main app

First, we need to create the main app instance, which we’ll use in the React Native app that we will be creating later.

Once you’re logged in to your account, go to your dashboard and click on the + CREATE APPLICATION button.

On the modal window that pops up, enter the name of the app and select native as the application type then click CREATE:

Once the app instance is created, you’ll be redirected to its page. Click on the Settings tab to view the settings for the app. This contains some of the information that you need to put in your .env file:

    AUTH0_DOMAIN="YOUR AUTH0 DOMAIN"
AUTH0_CLIENT_ID="YOUR AUTH0 CLIENT ID"
AUTHO_SCOPE="openid profile"
AUTH0_AUDIENCE="YOUR AUTH0 DOMAIN/userinfo"

Take note of this page as we’ll go back to update the settings later with the details of the React Native app that we will be creating.

This is also a good time to update your Dropbox app settings with your redirect URI:

Machine to machine app

When the user authenticates the app via their Dropbox account, an access token is returned. This access token can be used to fetch the user’s details but it can’t be used to make requests to the Dropbox API. In order to get the access token for making those requests, we need to create another Auth0 app instance for communicating with the Identity Provider (in this case, it’s Dropbox).

From your Auth0 dashboard, create another application and select Machine to Machine Applicationsas the type:

Once you’ve clicked the CREATE button, it will ask you to select the API type. Select Auth0 Management API, and under scopes, select read:users and read:user_id_tokens. Click on AUTHORIZEto create the app instance:

Once the app is created, you’ll be redirected to its settings page. Copy the Domain, Client ID and Client Secret from that page into your server/.env file:

    AUTH0_DOMAIN="YOUR AUTH0 DOMAIN"
AUTH0_CLIENT_ID="YOUR MACHINE TO MACHINE AUTH0 APP CLIENT ID"
AUTH0_CLIENT_SECRET="YOUR MACHINE TO MACHINE AUTH0 APP CLIENT SECRET"

Dropbox connection

The final step is to connect Dropbox to the Auth0 apps you created earlier. Click on Connections → Social link and enable Dropbox:

This should open the following modal window. Enter the Client ID and Client Secret of the Dropbox app instance you created earlier and click SAVE:

You can click on the TRY button to check if the connection works.

Next, enable the Dropbox connection for the relevant apps. This includes the main app (React Native Dropbox Chatkit App) which we will use in React Native, and the Machine-Machine Applications which we’ll use for generating the user’s Dropbox access token from the server:

Setting up the app

In order to save time in building the most important parts of the app, I’ve created a starter branch in the repository:

    git clone https://github.com/anchetaWern/RNChatkitDropbox
git checkout starter

This already includes the code for the whole chat app. So all we have to do is integrate Dropbox login, file uploads, and downloads.

Next, install all the dependencies and link the relevant packages:

    yarn
react-native eject
react-native link react-native-gesture-handler
react-native link react-native-permissions
react-native link react-native-document-picker
react-native link react-native-fs
react-native link react-native-device-info
react-native link react-native-config
react-native link react-native-auth0
react-native link react-native-vector-icons
react-native link react-native-sensitive-info

Next, we need to update the Android manifest file to allow the app to read and write on the external storage:

    // android/app/src/main/AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.rnchatkitdropbox">
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
...
</manifest>

We also need to allow the app to open a Web View for authenticating the user. To do that, add android:launchMode="singleTask" as a property to <activity>. And inside <activity>, add a new <intent-filter>. This allows the app to connect to the default browser of the device. The config below specifies the exact domain that the app can open. In this case, it should be your Auth0 domain, so replace the placeholder YOUR AUTH0 DOMAIN value below:

    <application
...
>
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:launchMode="singleTask"
>
<intent-filter>...</intent-filter>

    &lt;intent-filter&gt;
      &lt;action android:name="android.intent.action.VIEW" /&gt;
      &lt;category android:name="android.intent.category.DEFAULT" /&gt;
      &lt;category android:name="android.intent.category.BROWSABLE" /&gt;
      &lt;data
        android:host="YOUR AUTH0 DOMAIN"
        android:pathPrefix="/android/${applicationId}/callback"
        android:scheme="${applicationId}" /&gt;
    &lt;/intent-filter&gt;
  &lt;/activity&gt;
&lt;/application&gt;

Next, go to your Auth0 app settings (the native app) and update its allowed callback URLs:

This uses the following format:

    {YOUR_APP_PACKAGE_NAME}://{YOUR_AUTH0_DOMAIN}/android/{YOUR_APP_PACKAGE_NAME}/callback

Once replaced, mine looked like this for Android:

    com.rnchatkitdropbox://wern.auth0.com/android/com.rnchatkitdropbox/callback
If you need to support iOS, you can view the tutorial on adding Auth0 to a React Native app.

Lastly, update your .env and server/.env file with your Chatkit credentials:

    CHATKIT_INSTANCE_LOCATOR_ID="YOUR CHATKIT INSTANCE LOCATOR ID (omit v1:us1:)"
CHATKIT_SECRET_KEY="YOUR CHATKIT SECRET KEY"
Integrating Dropbox into the app

Now we’re ready to integrate Dropbox to the app. We’ll start by updating the login screen, the chat screen, and finally the server.

Login screen

In the login screen, we need to ask for permission to access the device storage. The starter branch already includes the React Native Permissions library which is what we’re using below. This library allows us to ask for various permissions to use a specific device feature (for example, camera, contacts):

    // src/screens/Login.js
import axios from "axios";
import Permissions from "react-native-permissions"; // add this

Once the component is mounted, we ask for permission. This will show an alert message asking the user to agree for the app to access the device storage. If the user agrees, the permission is granted and the app will be able to pick files from the external storage when the user attaches a file. Otherwise, it will only be able to pick files from the internal storage:

    componentDidMount() {
Permissions.check('storage').then((response) => {
if(response == 'undetermined') {
Permissions.request('storage').then((response) => {
console.log('requested storage permission: ', response);
});
}
});
}

Next, we update the enterChat method to get the system_token and pass it to the chat screen. We will update the server code later to pass this value when the app makes a request to the /users route. The system_token is used for getting the access token that the app can use for uploading files to Dropbox:

    enterChat = async () => {

  // ...
  if (username &amp;&amp; friends_username) {
    try {
      const response = await axios.post(
        // ...
      );

      const system_token = response.data; // add this

      this.props.navigation.navigate("Chat", {
        user_id,
        username,
        friends_username,
        system_token // add this
      });

      // ..
    } catch (e) {
      // ...
    }
    // ...
  }
}

Chat screen

As mentioned earlier, the starter branch already contains the basic chat code (sending and receiving messages and rendering it on the screen). All we have to do in this section is to implement the file picker and integrate Dropbox file upload and download.

Start by importing the additional packages and components that we’ll be using:

    // src/screens/Chat.js

// ...

// add these:
import { DocumentPicker, DocumentPickerUtil } from "react-native-document-picker"; // for picking files
import * as mime from "react-native-mime-types"; // for getting the content type of files
import RNFS from "react-native-fs";
import { Buffer } from 'buffer/'; // for converting the base64 string representation of the file to array buffer

import DeviceInfo from "react-native-device-info"; // for getting unique device info
import { Dropbox } from "dropbox"; // for using the Dropbox API

import Auth0 from "react-native-auth0"; // for using Auth0
import SInfo from "react-native-sensitive-info"; // for storing the access token

import IconButton from "../components/IconButton";
import ChatBubble from "../components/ChatBubble";

Initialize Auth0:

    const auth0 = new Auth0({
domain: Config.AUTH0_DOMAIN,
clientId: Config.AUTH0_CLIENT_ID
});

Next, update the code for the navigation header to include a button for authenticating the user with their Dropbox account:

class Chat extends Component {

  static navigationOptions = ({ navigation }) =&gt; {
    const { params } = navigation.state;

    return {
      headerTitle: `Chat with ${params.friends_username}`,
      headerRight: (
        &lt;IconButton icon="dropbox" size={30} color="#0062ff" onPress={params.loginToDropbox} /&gt;
      ),
      headerStyle: {
        backgroundColor: "#333"
      },
      headerTitleStyle: {
        color: "#FFF"
      }
    };
  };
}

In the constructor, initialize the values that we will be using for integrating Dropbox:

constructor(props) {
// ..

  // add these:
  const system_token = navigation.getParam("system_token");
  this.system_token = system_token; // the system token that came from the server
  this.access_token = null; // the access token that we can use to upload &amp; download files from Dropbox
}

Update componentDidMount to set the loginToDropbox method as a navigation param. We need to do this because there’s no way of accessing component class methods from inside the navigationOptions. While you’re here, get the access token that was securely stored using the React Native Sensitive Info library and use it to initialize Dropbox:

async componentDidMount() {
// add this:
this.props.navigation.setParams({
loginToDropbox: this.loginToDropbox
});

  try {
    // ..

    await this.currentUser.subscribeToRoom({
      // ..
    });

    // add these:
    this.access_token = await SInfo.getItem("access_token", {});
    if (this.access_token) {
      this.dbx = new Dropbox({
        accessToken: this.access_token,
        fetch: fetch
      });
    }

    // ..

  } catch (chat_manager_err) {
    // ..
  }

}

Access tokens from identity providers become invalid after some time (usually 24 hours). So you’ll need to implement a way to renew the token (probably store the last time the token was updated and then prompt the user to authenticate with their Dropbox account once it has exceeded 24 hours).

Add the loginToDropbox method. This method will be executed when the user clicks on the button in the navigation header. This opens a new Web View asking the user to authenticate using their Dropbox account. Once the user has gone through the whole process, the chat screen is displayed back to the user. At this point, the accessToken becomes available. This allows us to request the user’s info. This contains the general user data and their Dropbox user ID. The only thing useful to us is the latter, and that’s under the sub property:

 loginToDropbox = async () => {
try {
const { accessToken } = await auth0.webAuth.authorize({
scope: Config.AUTHO_SCOPE,
audience: Config.AUTH0_AUDIENCE,
device: DeviceInfo.getUniqueID(),
prompt: "login"
});

    // request for the user's info
    auth0.auth
      .userInfo({ token: accessToken })
      .then(({ sub }) =&gt; { // sub is the Dropbox user ID

        // next: get Dropbox access token
      })
      .catch((dropbox_user_details_err) =&gt; {
        console.log("error occurred while trying to get user details: ", dropbox_user_details_err);
      });

  } catch (auth0_dropbox_err) {
    console.log('error logging in Dropbox: ', auth0_dropbox_err);
  }

}

By using the system token and the Dropbox user ID, we can make a request for the Identity Provider’s Access Token. We securely store this access token for later use and initialize Dropbox: using it:

auth0
.users(this.system_token)
.getUser({ id: sub })
.then(({ identities }) => {

    this.access_token = identities[0].access_token;
    SInfo.setItem("access_token", this.access_token, {});

    // initialize Dropbox
    this.dbx = new Dropbox({
      accessToken: this.access_token,
      fetch: fetch // React Native's fetch API implementation
    });
  });

Here’s what the user’s data looks like:

{
sub: 'dropbox|xxxxxx',
givenName: 'Wern',
familyName: 'Ancheta',
nickname: 'xxxx',
name: 'xxxx',
picture: 'https://s.gravatar.com/avatar/717bcde740783a83a168468df0dbbb75?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fan.png',
locale: 'en',
updatedAt: '2019-03-28T12:46:01.164Z'
}

Now that we have an access token that we can use for uploading and downloading files, we can now add the method for picking files. But before that, initialize the value of ispickingfile in the state:

state = {
messages: [],
is_initialized: false,
is_picking_file: false // add this. For showing/hiding the file attachment loader
};

In order to pick files, we also need to add a button for doing so. React Native Gifted Chat allows us to add custom action buttons so we can simply create a function which returns the component for doing so:

renderCustomActions = () => {
if (!this.state.is_picking_file) {
const icon_color = this.attachment ? "#0064e1" : "#808080";

    return (
      &lt;View style={styles.customActionsContainer}&gt;
        &lt;TouchableOpacity onPress={this.openFilePicker}&gt;
          &lt;View style={styles.buttonContainer}&gt;
            &lt;Icon name="paperclip" size={23} color={icon_color} /&gt;
          &lt;/View&gt;
        &lt;/TouchableOpacity&gt;
      &lt;/View&gt;
    );
  }

  return (
    &lt;ActivityIndicator size="small" color="#0064e1" style={styles.loader} /&gt;
  );
}

Once that’s done, we can now add the openFilePicker method. Here, we’re using the React Native Document Picker library to implement it. Once the file is picked, we use the react-native-fs library to convert the file to its base64 representation and then the Node buffer module to convert it to an array buffer:

openFilePicker = async () => {
await this.setState({
is_picking_file: true
});

  DocumentPicker.show({
    filetype: [DocumentPickerUtil.allFiles()], // allow all kinds of file types
  }, async (err, file) =&gt; {

    if (!err) {
      try {
        const base64 = await RNFS.readFile(file.uri, "base64"); // convert the file to its base64 string representation
        const buff = Buffer.from(base64, 'base64'); // convert base64 string representation of the file to array buffer

        // next: upload the file to Dropbox

      } catch (read_file_err) {
        console.log("error reading file: ", read_file_err);
      }
    }

  });
}

The Dropbox API only accepts array buffer when using the upload endpoint so we have to convert from base64.

Next, use the filesUpload method to upload the file to Dropbox. This method accepts an object containing the path and contents of the file. path is the full path to which the file will be saved on the user’s Dropbox, while contents is the array buffer:

this.dbx.filesUpload({ path: '/' + file.fileName, contents: buff })
.then(({ path_display }) => {

    Alert.alert("Success", "File attached!");

    this.setState({
      is_picking_file: false // hide the file attachment loader
    });

    // required data when sending the message with Chatkit
    this.attachment = {
      uri: path_display,
      file_type: mime.contentType(file.fileName)
    };
  })
  .catch((file_upload_err) =&gt; {
    console.log('error occured while uploading file: ', file_upload_err);
  });

Next, update the onSend method to include the attachment in the message_parts:

 onSend = async ([message]) => {
// ..

  let message_parts = [
    // ..
  ];

  // add these:
  if (this.attachment) {
    const { uri, file_type } = this.attachment;
    message_parts.push({
      type: file_type,
      url: uri,
    });
  }

  try {
    await this.currentUser.sendMultipartMessage(
      // ..
    );

    this.attachment = null; // add this

    // ..
  } catch (send_msg_err) {
    // ..
  }
}

Now that we have attachments, also add it to getMessage:

getMessage = async ({ id, senderId, text, attachment, createdAt }) => { // extract the attachment here

  let msg_data = {
    // ...
    user: {
     // ..
    },
    attachment // add this
  };

  return {
    message: msg_data
  };
}

Next, update the render method to pass the renderCustomActions prop and renderMessage prop to <GiftedChat>:

<GiftedChat
// ...
renderSend={this.renderSend}
renderMessage={this.renderMessage}
/>

Next, add the renderMessage method. This will render a custom message bubble if the message being rendered has an attachment:

renderMessage = (msg) => {
const { attachment } = msg.currentMessage;
const renderBubble = (attachment) ? this.renderPreview.bind(this, attachment.link) : null;
const modified_msg = {
...msg,
renderBubble
}

  return &lt;Message {...modified_msg} /&gt;
}

Here’s the renderPreview method. This uses React Native Gifted Chat’s ChatBubble component, but we’re also adding a download button as its child. When the user clicks it, the attached file will be downloaded to their device:

renderPreview = (uri, bubbleProps) => {

  const text_color = (bubbleProps.position == 'right') ? '#FFF' : '#000';
  const modified_bubbleProps = {
    ...bubbleProps
  };

  return (
    &lt;ChatBubble {...modified_bubbleProps}&gt;
      &lt;TouchableOpacity onPress={() =&gt; {
        this.downloadFile(uri);
      }}&gt;
        &lt;View style={styles.downloadButton}&gt;
          &lt;Text style={[styles.link, { color: text_color }]}&gt;download&lt;/Text&gt;
        &lt;/View&gt;
      &lt;/TouchableOpacity&gt;
    &lt;/ChatBubble&gt;
  );
}

Here’s the downloadFile method. Unlike the file upload, we can’t use a method from the Dropbox JavaScript SDK to download a file. This is because the SDK primarily caters for the web, so all it has to do is generate a temporary URL that links directly to the file. Things are a bit different in React Native because it has to open the link in the browser. We won’t really do that in this tutorial because we don’t want to involve the browser just for downloading files. Here, we’re using the downloadFilemethod from react-native-fs instead. This is similar to making a regular POST request. But instead of returning the response as a string, it will return it in binary format. Which is then saved to the path you specify:

downloadFile = (link) => {
RNFS.downloadFile({
fromUrl: "https://content.dropboxapi.com/2/files/download", // the base URL for the request
toFile: RNFS.DocumentDirectoryPath + link, // the path in your device where the file will be saved
headers: {
"Authorization": Bearer ${this.access_token}, // the IDP's access token
"Dropbox-API-Arg": JSON.stringify({ path: link })} // the link to the file
})
.promise
.then((response) => {
if (response.statusCode == 200) { // file was downloaded
Alert.alert('Operation Complete', 'Successfully downloaded file');
} else {
Alert.alert('Error', 'Something went wrong while trying to download file');
}
}
)
.catch((download_err) => {
console.log('error downloading file: ', download_err);
});
}
You can view more examples that use Dropbox’s JavaScript SDK on their GitHub repo. But use your judgment whether the specific methods are applicable to the React Native environment or not.

IconButton component

Here’s the code for the IconButton component:

// src/components/IconButton.js
import React from "react";
import { TouchableOpacity, View } from "react-native";
import Icon from "react-native-vector-icons/FontAwesome";

const IconButton = ({ icon, size, color, onPress }) =&gt; {
  return (
    &lt;TouchableOpacity onPress={onPress}&gt;
      &lt;View style={styles.container}&gt;
        &lt;Icon name={icon} size={size} color={color} /&gt;
      &lt;/View&gt;
    &lt;/TouchableOpacity&gt;
  );
}

const styles = {
  container: {
    marginRight: 10
  }
}

export default IconButton;

ChatBubble component

Here’s the code for the ChatBubble component:

import React from "react";
import { View } from "react-native";
import { MessageText, Time } from "react-native-gifted-chat";

const ChatBubble = (props) =&gt; {
  const { position, children } = props;
  return (
    &lt;View style={styles[position].container}&gt;
      &lt;View style={styles[position].wrapper}&gt;
        &lt;MessageText {...props} /&gt;
        {children}
        &lt;Time {...props} /&gt;
      &lt;/View&gt;
    &lt;/View&gt;
  );
}

const styles = {
  left: {
    container: {
      flex: 1,
      alignItems: 'flex-start',
    },
    wrapper: {
      borderRadius: 15,
      backgroundColor: '#f0f0f0',
      marginRight: 60,
      minHeight: 20,
      justifyContent: 'flex-end',
    }
  },
  right: {
    container: {
      flex: 1,
      alignItems: 'flex-end',
    },
    wrapper: {
      borderRadius: 15,
      backgroundColor: '#0084ff',
      marginLeft: 60,
      minHeight: 20,
      justifyContent: 'flex-end',
    }
  }
}

export default ChatBubble;

Server

The code for handling the creation of Chatkit users and rooms are already added in the starter branch. All we have to do in the server side is to add the code for obtaining/refreshing the token that allows us to get the user’s IDP access token and return it as a response when the user is logging in.

Start by adding the code for initializing Auth0:

 // server/index.js
require("dotenv").config();

// add these:
const AuthenticationClient = require('auth0').AuthenticationClient;

const auth0 = new AuthenticationClient({
  domain: process.env.AUTH0_DOMAIN,
  clientId: process.env.AUTH0_CLIENT_ID,
  clientSecret: process.env.AUTH0_CLIENT_SECRET
});

let system_token = null; 

Next, add a route that allows you to refresh the token manually:

app.get("/token/refresh", (req, res) => {
auth0.clientCredentialsGrant(
{
audience: https://${process.env.AUTH0_DOMAIN}/api/v2/,
scope: 'read:users read:user_idp_tokens' // note: the same scopes that you chose earlier for the machine to machine Auth0 app
},
(err, response) => {
if (err) {
console.log('error occurred: ', err);
} else {
system_token = response.access_token;
console.log('access token: ', system_token);
}

      res.send('ok');
    }
  );
});

The token expires after some time, so we need to constantly refresh it. The code above allows us to easily test things out. For production apps, you need to have a CRON job that will automatically refresh the token for you.

Lastly, update the /users route to return the system_token:

app.post("/users", async (req, res) => {

  // ..
  try {
    // ..

    res.send(system_token); // update this
  } catch (err) {
    if (err.error === "services/chatkit/user_already_exists") {

      res.send(system_token); // update this
    } else {
      // ..
    }
  }

});

Running the app

At this point, you can now run the app. Start by running the server and exposing it to the internet using ngrok:

cd server
yarn start
~/Downloads/ngrok http 5000

Update the login and chat screen with your ngrok URL:

 // src/screens/Login.js
const CHAT_SERVER = "YOUR NGROK HTTPS URL/users";


 // src/screens/Chat.js
const CHAT_SERVER = "YOUR NGROK HTTPS URL/rooms";

Finally, run the app:

    react-native run-android
Conclusion

In this tutorial, we’ve successfully integrated Dropbox authentication and file uploads to an existing React Native chat app. This has helped us overcome the file attachment limits of Chatkit. Do note that if you need to upload files that are greater than 150MB, you’ll need to use the upload session API call.

Originally published on https://pusher.com

Top Vue.js Developers in USA

Top Vue.js Developers in USA

Vue.js is an extensively popular JavaScript framework with which you can create powerful as well as interactive interfaces. Vue.js is the best framework when it comes to building a single web and mobile apps.

We, at HireFullStackDeveloperIndia, implement the right strategic approach to offer a wide variety through customized Vue.js development services to suit your requirements at most competitive prices.

Vue.js is an open-source JavaScript framework that is incredibly progressive and adoptive and majorly used to build a breathtaking user interface. Vue.js is efficient to create advanced web page applications.

Vue.js gets its strength from the flexible JavaScript library to build an enthralling user interface. As the core of Vue.js is concentrated which provides a variety of interactive components for the web and gives real-time implementation. It gives freedom to developers by giving fluidity and eases the integration process with existing projects and other libraries that enables to structure of a highly customizable application.

Vue.js is a scalable framework with a robust in-build stack that can extend itself to operate apps of any proportion. Moreover, vue.js is the best framework to seamlessly create astonishing single-page applications.

Our Vue.js developers have gained tremendous expertise by delivering services to clients worldwide over multiple industries in the area of front-end development. Our adept developers are experts in Vue development and can provide the best value-added user interfaces and web apps.

We assure our clients to have a prime user interface that reaches end-users and target the audience with the exceptional user experience across a variety of devices and platforms. Our expert team of developers serves your business to move ahead on the path of success, where your enterprise can have an advantage over others.

Here are some key benefits that you can avail when you decide to hire vue.js developers in USA from HireFullStackDeveloperIndia:

  • A team of Vue.js developers of your choice
  • 100% guaranteed client satisfaction
  • Integrity and Transparency
  • Free no-obligation quote
  • Portal development solutions
  • Interactive Dashboards over a wide array of devices
  • Vue.js music and video streaming apps
  • Flexible engagement model
  • A free project manager with your team
  • 24*7 communication with your preferred means

If you are looking to hire React Native developers in USA, then choosing HireFullStackDeveloperIndia would be the best as we offer some of the best talents when it comes to Vue.js.

What are hourly rates to hire React Native App Development Company?

What are hourly rates to hire React Native App Development Company?

HireFullStackDeveloperIndia is a top provider of React Native for Mobile App Development and cross-platform mobile app development.

Cross-platform mobile application development provides the user experience and functionality of native apps with the multi-platform compatibility of mobile apps. Explore all the details related to building your React Native mobile applications here and get the idea of the hourly hiring charges for React Native app development.

HireFullStackDeveloperIndia is a top provider of React Native for Mobile App Development and cross-platform mobile app development services in India & the USA. It specializes in full-service iOS/Android app development process right from requirements gathering, UX/UI design, coding, testing to product maintenance and support to build fully-featured & quality-rich mobile apps.

As a Top Mobile App Development Company in India provides end-to-end Apps Development Services to transform an idea into a successful mobile application that performs flawlessly in the entire Android ecosystem. Their app development covers connected devices, wearable, smart TVs and in-car infotainment systems. This mobile app development company is working in this business from last one and half decade offering the best result for the clients. They are also able to deliver customized, reliable and efficient mobile app development solutions to the clients.

Right from Mobile Strategy to Mobile app design and development to mobile app testing and deployment, they adhere to proven global standards and methodology to deliver top-ranking mobile apps. They develop and deploy mobility solutions that encompass strategy and industry-specific accelerators aimed towards transformation and building a future-proof organization.

Mobile App Development Services by Full Stack Developers:

  • iOS App Development(iPhone & iPad)
  • Android App Development
  • Windows App Development
  • Cross-platform App Development
  • React Native Mobile App Development

HireFullStackDeveloperIndia Top React Native Developers generally charge the range rates of $12- $18 per hour which depends on your requirement. The cost will be decided on the basis of requirement, product features, an experience level of the developer and many other factors.

To be precise, HireFullStackDeveloperIndia can be your mobile app development partner for the consistent growth of your business. Just get in touch with your Mobile App project requirements, as they can help you in creating an idea for project completion using excellent methodology.