Agora React Native UI KIT

Agora React Native UI KIT

  • Docs
  • API Reference
  • GitHub

›Getting started

Getting started

  • Installing the UIKit
  • Writing a basic application
  • Customizing the UI-Kit
  • List of Style Props

Installing the UIKit

Create a new react native app

npx react-native init <project name>

Installing peer dependencies

npm i react-native-vector-icons
npm i react-native-agora

Link react native vector icons

Android
IOS


Edit android/app/build.gradle ( NOT android/build.gradle ) and add the following:

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"


cd ios
pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
cd ../


Add this to ios/projectname/Info.plist

<key>UIAppFonts</key>
<array>
<string>AntDesign.ttf</string>
<string>Entypo.ttf</string>
<string>EvilIcons.ttf</string>
<string>Feather.ttf</string>
<string>FontAwesome.ttf</string>
<string>FontAwesome5_Brands.ttf</string>
<string>FontAwesome5_Regular.ttf</string>
<string>FontAwesome5_Solid.ttf</string>
<string>Foundation.ttf</string>
<string>Ionicons.ttf</string>
<string>MaterialIcons.ttf</string>
<string>MaterialCommunityIcons.ttf</string>
<string>SimpleLineIcons.ttf</string>
<string>Octicons.ttf</string>
<string>Zocial.ttf</string>
</array>

Installing the UIKit

npm i agora-rn-uikit

Setup for autolinking (IOS only)

IOS
cd ios && pod install && cd ..

Done!

Writing a basic application →
  • Create a new react native app
  • Installing peer dependencies
  • Link react native vector icons
  • Installing the UIKit
  • Setup for autolinking (IOS only)
Agora React Native UI KIT
Docs
Getting Started (or other categories)Guides (or other categories)API Reference (or other categories)
Community
User ShowcaseStack OverflowProject ChatTwitter
More
BlogGitHubStar