React Native
Minimum Requirement
iOS
Minimum iOS Target >= 13.4
Android
buildToolVersion >= "34.0.0"
kotlinVersion >= 1.7.0
minSdkVersion >= 24
compileSdkVersion >= 34
ndkVersion >= "25.1.8937393"
ENV
React >= v16
NodeJS >= v18
NPM >= v6
yarn >= v1.22.15
JDK >= 17.0.10
ruby >= 3.2.0
XCode >= 15
Installation
Open-source Installation
With open-source, developers have more flexibility and greater customization options, allowing you to have complete control over the visual style. Open sourcing allows for more transparency and visibility and enables contributions from a greater developer community in terms of good design, implementation, code improvement, and fixes, translating into a better product and typical development.
Clone the Amity UI Kit open-source repository from GitHub:
Navigate to the cloned repository directory:
Install the dependencies:
Build the UI Kit:
Package Installation
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: The command to install the ui-kit package depends on the package manager used in your project.
Yarn
NPM
PNPM
Install peer dependencies: The command to install the ui-kit package depends on the package manager used in your project.
Yarn
NPM
PNPM
iOS Configuration
In Pod file, add these lines under your target,
In XCode,
Set Minimum Deployments at least iOS 12.0
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 belows in in buildscript > ext
kotlinVersion = 1.7.0 and above, compileSdkVersion = 34, buildToolsVersion = "34.0.0"
Android Permissions
Add following permissions to AndroidManifest.xml
file (android/app/src/main/AndroidManifest.xml)
Usage
Customization
Our UIKit v4 supports customization in a single place by modifying a uikit.config.json
file in related UIKit repository. This configuration file includes all necessary data to customize the appearance of each pages, components and elements that we allow to do customization. Note: uikit.config.json file should be in your project. Please kindly check in example project.
Using Theme
Using the default theme
AmityUIKit uses the default theme as part of the design language.
Theme customization
Without customization, the UIKit already looks good. However, if you wish to customize the theme, you can declare changes to color variables by passing your own color codes to our uikit.config.json
. Here is the code usage of how to customize the theme.
Dark Mode
The Dark Mode feature in our UIKit enhances user experience by providing an alternative visual style that is particularly beneficial in low-light environments. It's designed to reduce eye strain, improve readability, and offer a more visually comfortable interface. You can enable dark mode by just changing preferred_theme: "default"
to the preferred_theme: "dark"
in uikit.config.json
Push Notification
Since v4.0.0-beta.7, uikit supports push notification by registering fcm token
for android and apn token
for ios. To enable push notification in uikit, please follow the instructions on React Native Push Notifications Initialization page.
Last updated