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 Social Plus UI Kit open-source repository from GitHub:
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)
<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>
iOS Setup Background downloading
Add this method in AppDelegate.mm file (ios/{YourAppName}/AppDelegate.mm)
import * as React from 'react';
import {
AmityUiKitSocial,
AmityUiKitProvider,
} from 'amity-react-native-social-ui-kit';
export default function App() {
return (
<AmityUiKitProvider
apiKey="API_KEY"
apiRegion="API_REGION"
userId="userId"
displayName="displayName"
apiEndpoint="https://api.{API_REGION}.amity.co"
>
<AmityUiKitSocial />
</AmityUiKitProvider>
);
}
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.
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 (
<AmityUiKitProvider
configs={config} //put your customized config json object
apiKey="API_KEY"
apiRegion="API_REGION"
userId="userId"
displayName="displayName"
apiEndpoint="https://api.{API_REGION}.amity.co"
>
<AmityUiKitSocial />
</AmityUiKitProvider>
);
}
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.
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
"preferred_theme": "dark" // change it to dark || light || default,
Push Notification
Last updated
Was this helpful?
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 page.
