About UsDeveloper PortalArchives

React Native Story Quick Start Guide

Quick Start Guide for Integrating Social Plus UIKit's Story Feature into React Native Applications

Welcome to the Quick Start Guide for integrating Social Plus'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

  1. VS Code installed on your system.

  2. Android Studio is installed on your system.

  3. Xcode version 15+ is installed on your macOS system.

  4. A react native project. Android project has - 

    minSdkVersion = 21
kotlinVersion = '1.8.0'

    iOS Project has 

    Minimum Deployment Targets = 12

  5. A valid Social Plus account and an API key.

Step 1: Install UIKit and peer dependencies

  1. Clone the Social Plus UI Kit open-source repository from GitHub:

    Copy

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

  2. Navigate to the cloned repository directory:

    Copy

    cd Amity-Social-Cloud-UIKit-React-Native-OpenSource

  3. Install the dependencies:

    Copy

    yarn install

  4. 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

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

  2. Install built UI Kit tgz file:

    Copy

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

  3. 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 the 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 the 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, specify 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

Social Plus UIKit 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 Social Plus 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.social.plus.co is always here to help.

Last updated