Skip to content

React Native

Textile's React Native SDK is designed to work on iOS and Android devices in app's built with React Native.

Installation

The React Native SDK is published as an NPM Package. You are free to use the source code directly or use a package manager to install the official release.

NPM

npm install @textile/react-native-sdk

Yarn

yarn add @textile/react-native-sdk

Android Setup

Including maven repo

You'll need to include a new entry into your repositories found in android/build.gradle. The repository entry you need to include is (specifically the new maven entry):

allprojects {
    repositories {
      ...
      maven {
          url "https://dl.bintray.com/textile/maven"
      }
      ...
    }
}

Next, you'll need to add the SDK to your android/settings.gradle and android/app/build.gradle.

Add React Native SDk to build.gradle

Inside of android/app/build.gradle add the following entry into the dependencies object,

dependencies {
    ...
    implementation project(':@textile_react-native-sdk')
    ...
}

Add React Native SDK to settings.gradle

Inside of android/settings.gradle include the SDK module,

...
include ':@textile_react-native-sdk'
project(':@textile_react-native-sdk').projectDir = new File(rootProject.projectDir, '../node_modules/@textile/react-native-sdk/android')
...
}

iOS Setup

The iOS half of the React Native SDK will rely on Cocoapods to manage the library in your code. For now, we use Cocoapods to help keep the dependency management clear in client apps, in the future we will work to make it easy to link without Cocoapods.

Tip

If your app isn't already setup for Cocoapods, we recommend this nice overview of using Cocoapods in React Native projects, Demystifying react-native modules linking.

Edit your podfile by opening up ios/Podfile and adding the following line,

target '<your-app-name>' do
  ...
  pod 'textile-react-native-sdk', :path => '../node_modules/@textile/react-native-sdk'
  ...
end

Save the file and run install.

cd ios/
pod install

TypeScript

We strongly recommend using TypeScript if you plan to use the React Native SDK in your project. The React Native SDK's endpoints are all typed and those types are available to projects that support them. Because Textile libraries are rapidly developing, this will make your upgrade process much easier and faster.

If you don't normally use TypeScript in your projects, never fear, it will be very familiar and only takes a few steps to setup.

Tip

We recommend TypeScript in 5 minutes as a good place to start if you are totally new to TypeScript.

Getting Started

Initializing the Textile Wallet

To start using the mobile Textile peer your app needs to initialize the local wallet. A wallet can be generated from scratch or you can allow the user to pair your app with their existing Textile account. We recommend that you only support pairing, but we'll show you both methods so you can experiment with the right setup on your own.

Creating wallet from scratch

Warning

Mobile apps that use the React Native SDK (or one of our native libraries) run on-device Textile peers for their users. On-device peers require that the users pair the app with their primary account (see the Tour of Textile). We recomment encouraging your users to pair with an external account during onboarding, as migrating their primary wallet out of an app later will be challenging (and is not supported yet!).

// This is the user's new Textile wallet seed. They must keep it secure and never share it. Your production app should not keep a copy long term and should never share it with any API.
const seed = await textile.initialize(false, false)
alert(`WARNING - Never lose or share your seed: ${seed}`)

Initialize with a paired account

@todo

Once a local account is paired, you don't need to pass the pairing key on every startup. Because the account data is now local, you can simply re-initialize.

@todo

Below are some basic examples to get you started. If you are interested in a more thorough walk-through, check out the Tour of Textile's examples using the React Native SDK.

Get the account display name

const profile = await textile.profile.get()
const name = profile.name

Subscribe to file updates

textile.events.addThreadUpdateReceivedListener((update) => {
  const { type_url } = update.payload
  if (type_url === '/Files') {
    // new file!
  }
})

Create a thread

const threadKey = 'your.bundle.id.version.Basic'
const threadName = 'Basic'
const schema = {
  id: '',
  json: '',
  preset: AddThreadConfig.Schema.Preset.BLOB
}
const config = {
  key: threadKey,
  name: threadName,
  type: Thread.Type.PRIVATE,
  sharing: Thread.Sharing.NOT_SHARED,
  schema: schema,
  force: false,
  members: []
}
const newTarget = await textile.threads.add(config)

Add a file

const input = Buffer.from("mmm, bytes...").toString('base64')
const result = await textile.files.prepare(input, "<thread-id>")
const block = await textile.files.add(result.dir, "<thread-id>")

Boilerplate app

You can clone the react-native boilerplate if you want to run a development app and start playing with the library right away. Be sure to check the Textile API in the boilerplate to know if it is currently up to date with the latest release of the SDK.

API Documentation

You can read the full API Documentation for Textile's React Native SDK (react-native-sdk) at https://textileio.github.io/react-native-sdk.

Feel free to join the Textile Developer Slack and let us know what you are building. People are always excited to share and learn about new ideas.