React Native SDK Installation Guide

The react-native-opacity SDK integrates Opacity features into your React Native project. Follow the steps below to install and set up the package for both iOS and Android.

Setup

This tutorial is written using Expo. Other environments might require different instructions.

1. Install the development tools for you environment (iOS and/or Android).

2. Create a new application.

   npx create-expo-app@latest testApp
   cd testApp
   

3. Install the react-native-opacity package.

   npm install --save @opacity-labs/react-native-opacity
   

4. In app.json, add the Opacity plugin to expo.plugins

   "plugins": [
     "expo-router",
     [
       "expo-splash-screen",
       {
         "image": "./assets/images/splash-icon.png",
         "imageWidth": 200,
         "resizeMode": "contain",
         "backgroundColor": "#ffffff"
       }
     ],
     "@opacity-labs/react-native-opacity"
   ],
   

5. Create the configuration files.

   npx expo prebuild
   

Using the SDK

Edit app/(tabs)/index.tsx:

1. Add these imports close to the top of the file.

   import {
     init,
     OpacityEnvironment,
     get as opacityGet,
   } from '@opacity-labs/react-native-opacity'
   import { useEffect, useState } from 'react'
   import { Button } from 'react-native'
   

2. Add a query component. For example, this query shows your github profile.

   function GitHubProfile(): React.JSX.Element {
   
     const [result, setResult] = useState("")
   
     useEffect(() => {
       init({
         apiKey: 'YOUR_API_KEY',
         dryRun: false,
         environment: OpacityEnvironment.Production,
         shouldShowErrorsInWebView: false,
       });
     }, []);
   
   
     const getGitHubProfile = async evt => {
       setResult(JSON.stringify(await opacityGet('github:profile'), null, 2))
     }
   
     return (
       <>
         <Button
           title="Get GitHub Profile"
           onPress={getGitHubProfile}
         />
         <ThemedText>{result}</ThemedText>
       </>
     )
   }
   

Note the init function accepts your API key and should be set to the production environment. The key shouldShowErrorsInWebView will surface errors in a flow's webview in case of debugging. Additionally, dryRun should be set to false.

1. In the appropriate place in your application, use the component you created.

   <GitHubProfile />
   

2. Start the application. The way you do this varies between platforms.

   • iOS:

     npx expo run ios
     

   • Android:

     npx expo run android
     

Conclusion

By following these steps, the react-native-opacity SDK will be successfully installed and initialized in your React Native project. You'll be able to leverage Opacity's features in both iOS and Android environments with seamless integration.