React Native Story Quick Start Guide

Quick Start Guide for Integrating AmityUIKit's Story Feature into React Native Applications

Welcome to the Quick Start Guide for integrating Amity Social Cloud's Story feature into your existing React Native application. This guide provides step-by-step instructions to incorporate social storytelling into your app, enhancing user engagement through shared experiences.

Prerequisites

VS Code installed on your system.
Android Studio installed on your system.
Xcode version 15+ installed on your macOS system.

A react native project. Android project has -

minSdkVersion = 21
kotlinVersion = '1.8.0'

iOS Project has

Minimum Deployment Targets = 12

A valid Amity Social Cloud account and an API key.

Step 1: Install UIKit and peer dependencies

Clone the Amity UI Kit open-source repository from GitHub:

Copy

git clone https://github.com/AmityCo/Amity-Social-UIKit-React-Native-CLI-OpenSource.git

Navigate to the cloned repository directory:
Copy
```
cd Amity-Social-Cloud-UIKit-React-Native-OpenSource
```
Install the dependencies:
Copy
```
yarn install
```
Build the UI Kit:
Copy
```
npm run prepack
npm pack
```

This step will build the app and return amity-react-native-social-ui-kit-x.x.x.tgz file in inside the folder

Copy tgz file to your project folder where you need to use ui-kit:

Install built UI Kit tgz file:

Copy

yarn add ./amity-react-native-social-ui-kit-x.x.x.tgz

Install peer dependencies:

Copy

yarn add \
react-native-safe-area-context \
react-native-image-picker \
@react-native-async-storage/async-storage \
react-native-svg \
react-native-gesture-handler \
react-native-screens \
react-native-video@6.0.0-beta.6 \
react-native-create-thumbnail \
@react-native-community/netinfo \
@react-navigation/native \
@react-navigation/native-stack \
@react-navigation/stack \
react-native-vision-camera

iOS Configuration

In Pod file, add these lines under your target,

  pod 'SPTPersistentCache', :modular_headers => true
  pod 'DVAssetLoaderDelegate', :modular_headers => true
  $RNVideoUseVideoCaching = true

cd ios
pod install

iOS Permissions

Add following permissions to info.plist file (ios/{YourAppName}/Info.plist)

 <key>NSCameraUsageDescription</key>
 <string>App needs access to the camera to take photos.</string>
 <key>NSMicrophoneUsageDescription</key>
 <string>App needs access to the microphone to record audio.</string>
 <key>NSPhotoLibraryUsageDescription</key>
 <string>App needs access to the gallery to select photos.</string>

Android Configuration

Build project gradle with your Android Studio

In android/build.gradle,  add kotlinVersion above 1.7.0 in buildscript > ext

buildscript {
    ext {
        buildToolsVersion = "33.0.0"
        minSdkVersion = 21
        compileSdkVersion = 33
        targetSdkVersion = 33
        kotlinVersion = '1.8.0' //add this
        ndkVersion = "23.1.7779620"
    }
...
}

Android Permissions

Add following permissions to AndroidManifest.xml file (android/app/src/main/AndroidManifest.xml)

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />

Step 2: Integrating Story Feature

All pages and components of React Native story features are usual React Native Component. So you can import from amity-react-native-social-ui-kit, wrap with UIKit Provider for Authentication and use anywhere you want.

For displaying stories related to a specific community:

import {
  AmityStoryTabComponent,
  AmityUiKitProvider,
  AmityStoryTabComponentEnum
} from 'amity-react-native-social-ui-kit';

 <AmityUiKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      apiEndpoint="https://api.{API_REGION}.amity.co"
  >
       <AmityStoryTabComponent 
          type={AmityStoryTabComponentEnum.communityFeed}
          targetId={communityId}
       />
 </AmityUiKitProvider>

For navigating to the story creation page, specifying a target community ID:

To allow users to create stories, initiate the story creation page with a specific target, such as a community ID:

import {
  AmityCreateStoryPage,
  AmityUiKitProvider
} from 'amity-react-native-social-ui-kit';

const onCreateStory = () => {...}

 <AmityUiKitProvider
      apiKey="API_KEY"
      apiRegion="API_REGION"
      userId="userId"
      displayName="displayName"
      apiEndpoint="https://api.{API_REGION}.amity.co"
  >
       <AmityCreateStoryPage 
          targetId={communityId}
          targetType={"community" | "user" | "content"}
          onCreateStory={onCreateStory}
       />
 </AmityUiKitProvider>

Step 3: Customizing the UI

AmityUIKit supports extensive customization options via a config.json file. You can modify themes, colors, and icons for various components and elements of the story feature according to your application's design requirements.

Example customization snippet:

"global_theme": {
  "light_theme": {
    "primary_color": "#FFFFFF",
    "secondary_color": "#AB1234"
  }
}

You can exclude certain UI elements or customize specific components and elements as per your needs.

You have now successfully integrated the Amity Social Cloud Story feature into your Android application. For further customization options, refer to the detailed documentation provided with the SDK. If you encounter any issues or require assistance, our community forum at community.amity.co is always here to help.

Last updated 1 month ago