Customizing the UI-Kit
The UI Kit uses a styleProps object which is passed to the AgoraUIKit Component which can be utilized to pass styling information for the child components inside the UI Kit, we can use react-native styling to change the look of everything, from buttons to the theme.
Here's an example of an App.js
to use a dark theme with square buttons:
import React, { useState } from 'react';
import AgoraUIKit from './src/AgoraUIKit';
import { Dimensions, StyleSheet } from 'react-native';
let dimensions = { //get dimensions of the device to use in view styles
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
};
const App = () => {
const [videoCall, setVideoCall] = useState(true);
const rtcProps = {
appid: '<-----App ID here----->',
channel: 'channel-x',
};
const callbacks = {
onEndCall: () => setVideoCall(false),
};
We use the same structure as the basic application and use Dimenions API to get device dimensions.
const custombtnstyle = {
borderRadius: 23,
borderWidth: 4 * StyleSheet.hairlineWidth,
borderColor: '#007aff',
backgroundColor: "#111",
marginHorizontal: 8 * StyleSheet.hairlineWidth,
}
We can define an object with react-native styling to use to change the style of the default buttons.
const styleProps = {
'minViewStyles': { 'width': 200, 'height': 150 },
'maxViewStyles': { height: dimensions.height - 20 },
'localControlStyles': {
bottom: 0,
height: 100,
backgroundColor: '#111',
},
'minCloseBtnStyles': {
width: 34,
height: 34,
borderRadius: 17,
position: 'absolute',
backgroundColor: "#111",
borderWidth: 4 * StyleSheet.hairlineWidth,
borderColor: '#007aff',
},
'BtnStyles': custombtnstyle,
'remoteBtnStyles': {
'muteRemoteAudio': custombtnstyle,
'muteRemoteVideo': custombtnstyle,
'remoteSwap': custombtnstyle,
},
'localBtnStyles': {
'muteLocalAudio': { backgroundColor: "#111" },
'muteLocalVideo': { backgroundColor: "#111" },
'switchCamera': { backgroundColor: "#111" },
'endCall': { backgroundColor: "#111" },
'fullScreen': { backgroundColor: '#111' }
},
'theme': '#fff'
};
We define the styleProps
object with name of our child components to style and the value to be an object containing the styles.
return (
videoCall ?
<AgoraUIKit rtcProps={rtcProps} callbacks={callbacks} styleProps={styleProps} /> : <></>
);
};
export default App;
We pass the styleProps to the AgoraUIKit
component.