Skip to content Skip to footer
Announcements

React Native Mobile development complete kit (IOS & Android)

April 2, 2020

Introduction

Since developers started building mature “DApps” on top of the “Blockstack”, it became clear how “DApps” differs from “WEB 2.0” App, especially when it comes to features limitations regarding multi-user interaction, data indexing and querying, storage, real-time data flow or communication, etc.

Blockstack’s Gaia was made to solve the storage aspect, “Radiks” and its models, which we tweaked into better decentralized convenience, introduced a decent approach to handle “user-to-user communication” and shared resources.

Both solutions helped in overcoming the basic challenges in front of “DApps development” and utilization, so it was time to step-in into the “mobile Dapps” world.

Blockstack-SDK

Blockstack released both “Android and iOS SDKs”, which enables authentication and “Gaia” storage capabilities, but up until that moment, there was no official solution to utilize “Radiks” and introduce it into the game of “mobile DApps”, and the available Radiks web version wasn’t compatible with “react-native”.

Mobile DApp with Radiks on the hip:

One of the major challenges to integrate Radiks into the “mobile DApps development” was “Radiks dependencies”, which weren’t react-native friendly.

At Pravica, we worked on finding and replacing those dependencies with equivalent alternatives, while keeping the same workflow, functionality, business logic, and performance, and on top of all: react-navitve friendly.

Therefore, here are some examples.

We replace:

  • “Crypto” with React-native-crypto
  • “Randombytes” with React-native-randombytes
  • “Bitcoinjs-lib” to Rn-bitcoin-lib

All of them are on top of “react-native-blockstack” and Radiks.

The following is an example of how to use them together.

It is worth mentioning that this is also compatible with the web apps, and you will find that it can be done as simply as the upcoming steps:

  1. Change the domainUrl in config.ts through the following link

https://github.com/Pravica-Inc/react-native-blockstack-radiks-boilerplate/blob/master/src/radiks/config.ts

const domainUrl = 'https://example.com';

export const defaultconfig = {

  appDomain: domainUrl,

  manifestURI: `${domainUrl}/manifest.json`,

  redirectUrl:

    Platform.OS === 'ios' ? `${domainUrl}/redirect.html` : 'redirect.html',

  scopes: ['store_write', 'publish_data'],

  coreNode: 'https://core.blockstack.org',

  authenticatorURL: 'https://browser.blockstack.org/auth',

  apiServer: domainUrl,

};

2. Make a redirect page on your webapp for the “mobile authentication”

Note: Make sure that you change the window.location to your appId

   function getParameterByName(name) {

      var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);

      return match && decodeURIComponent(match[1].replace(/\+/g, ' '));

    }

    var authResponse = getParameterByName('authResponse')

    window.location="{appId}://?authResponse=" + authResponse

3. Run Radiks-Server

In the end

Mobile DApps are the upcoming future of mobile apps, as well as DApps are the next step of replacing centralized apps.

Building an ecosystem requires collaboration from the Blockstack community, to help in introducing such technology to the world.

We always appreciate any type of collaboration, beside the discussion, and comments from you guys.

Please visit https://github.com/Pravica-Inc/react-native-blockstack-radiks-boilerplate

Let us hear from you!

Share Post