# React Native (Beta)
### 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.
1. Clone the social.plus UI Kit open-source repository from GitHub:
```
git clone https://github.com/AmityCo/Amity-Social-UIKit-React-Native-CLI-OpenSource.git
```
2. Navigate to the cloned repository directory:
```
cd Amity-Social-Cloud-UIKit-React-Native-OpenSource
```
3. Install the dependencies:
```
yarn install
```
4. Build the UI Kit:
```
npm run prepack
npm pack
```
## 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
1. Copy tgz file to your project folder where you need to use ui-kit:
2. Install built UI Kit tgz file: The command to install the ui-kit package depends on the package manager used in your project.
* Yarn
### iOS Configuration
In Pod file, add these lines under your target,
```
pod 'SPTPersistentCache', :modular_headers => true
pod 'DVAssetLoaderDelegate', :modular_headers => true
$RNVideoUseVideoCaching = true
```
In XCode,
Set `Minimum Deployments at least iOS 12.0`
```
cd ios
pod install
```
### iOS Permissions
Add following permissions to `info.plist` file (ios/{YourAppName}/Info.plist)
```markup
NSCameraUsageDescriptionApp needs access to the camera to take photos.NSMicrophoneUsageDescriptionApp needs access to the microphone to record audio.NSPhotoLibraryUsageDescriptionApp needs access to the gallery to select photos.
```
### iOS Setup Background downloading
Add this method in `AppDelegate.mm` file (ios/{YourAppName}/AppDelegate.mm)
````objectivec
```
#import
...
- (void)application:(UIApplication *)application handleEventsForBackgroundURLSession:(NSString *)identifier completionHandler:(void (^)())completionHandler
{
[RNFSManager setCompletionHandlerForIdentifier:identifier completionHandler:completionHandler];
}
```
````
### Android Configuration
Build project gradle with your Android Studio
In android/build.gradle, add below in in buildscript > ext
kotlinVersion = 1.7.0 and above, compileSdkVersion = 34, buildToolsVersion = "34.0.0"
### Android Permissions
Add the following permissions to `AndroidManifest.xml` file (android/app/src/main/AndroidManifest.xml)
```markup
```
### Usage
```
import * as React from 'react';
import {
AmityUiKitSocial,
AmityUiKitProvider,
} from 'amity-react-native-social-ui-kit';
export default function App() {
return (
);
}
```
### 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 the 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 the example project.
```typescript
import * as React from 'react';
import {
AmityUiKitSocial,
AmityUiKitProvider,
} from 'amity-react-native-social-ui-kit';
import config from './uikit.config.json';
export default function App() {
return (
);
}
```
### Using Theme
**Using the default theme**
social.plus UIKit 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.
```json
"preferred_theme": "default",
"theme": {
"light": {
"primary_color": "#1054DE",
"secondary_color": "#292B32",
"base_color": "#292b32",
"base_shade1_color": "#636878",
"base_shade2_color": "#898e9e",
"base_shade3_color": "#a5a9b5",
"base_shade4_color": "#ebecef",
"alert_color": "#FA4D30",
"background_color": "#FFFFFF",
"background_shade1_color": "#f6f7f8"
},
"dark": {
"primary_color": "#1054DE",
"secondary_color": "#292B32",
"base_color": "#ebecef",
"base_shade1_color": "#a5a9b5",
"base_shade2_color": "#6e7487",
"base_shade3_color": "#40434e",
"base_shade4_color": "#292b32",
"alert_color": "#FA4D30",
"background_color": "#191919",
"background_shade1_color": "#40434e"
}
},
```
**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`
```json
"preferred_theme": "dark" // change it to dark || light || default,
```
### Push Notification
Since v4.0.0-beta.7, UIKit supports push notifications by registering `fcm token` for android and `apn token` for ios. To enable push notifications in UIKit, please follow the instructions on the [React Native Push Notifications Initialization](/social-plus-sdk/core-concepts/push-notifications/react-native-push-notifications-initialization.md) page.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.social.plus/social-plus-uikit/uikit-4/installation-guide/react-native-beta.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.