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 -
iOS Project has
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
Navigate to the cloned repository directory:
Copy
Install the dependencies:
Copy
Build the UI Kit:
Copy
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
Install peer dependencies:
Copy
iOS Configuration
In Pod file, add these lines under your target,
iOS Permissions
Add following permissions to info.plist
file (ios/{YourAppName}/Info.plist)
Android Configuration
Build project gradle with your Android Studio
In android/build.gradle, add kotlinVersion above 1.7.0 in buildscript > ext
Android Permissions
Add following permissions to AndroidManifest.xml
file (android/app/src/main/AndroidManifest.xml)
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:
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:
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:
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