Chat UIKit React Native v2
Chat UIKit React Native
Chat UIKit
React Native
Version 2
A theme is a style that's applied to your entire app. A theme is made up of UIKitPaletteUIKitColorsUIKitTypographyLight and Dark. But you can customize these themes to create your own brand identity by changing the value of resources.
import { useColorScheme, View, Text } from 'react-native';
import { SendbirdUIKitContainer } from '@sendbird/uikit-react-native';
import { DarkUIKitTheme, LightUIKitTheme, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
const App = () => {
const colorScheme = useColorScheme();
const theme = colorScheme === 'light' ? LightUIKitTheme : DarkUIKitTheme;
return (
<SendbirdUIKitContainer styles={{ theme }}>
{/* ... */}
</SendbirdUIKitContainer>
);
};
See the code below to learn about the architecture of the UIKitTheme instance.
type UIKitColorScheme = 'light' | 'dark';
interface UIKitTheme {
colorScheme: UIKitColorScheme;
select<V>(options: { [key in UIKitColorScheme | 'default']?: V }): V;
palette: UIKitPalette;
colors: UIKitColors;
typography: UIKitTypography;
}
This is the default theme for UIKit.
To view the image in full screen, click on the
You can also apply the Dark theme to your app.
To view the image in full screen, click on the
By calling the useUIKitTheme() hook, you can use the theme property of the SendbirdUIKitContainer context provider container.
import { useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
const Component = () => {
const { colors } = useUIKitTheme();
return (
<View style={{ backgroundColor: colors.onBackground04 }}>
<Text style={{ color: colors.primary }}>{'Theme'}</Text>
</View>
);
};
You can create your own custom theme by following the code below.
import { DarkUIKitTheme, createTheme } from '@sendbird/uikit-react-native-foundation';
const MyCustomDarkTheme = createTheme({
colorScheme: 'dark',
palette: CustomPalette,
colors: (palette) => ({
...DarkUIKitTheme.colors,
primary: palette.primary200,
secondary: palette.secondary200,
error: palette.error200,
background: palette.background600,
text: palette.onBackgroundDark01,
onBackground01: palette.onBackgroundDark01,
onBackground02: palette.onBackgroundDark02,
onBackground03: palette.onBackgroundDark03,
onBackground04: palette.onBackgroundDark04,
onBackgroundReverse01: palette.onBackgroundLight01,
onBackgroundReverse02: palette.onBackgroundLight02,
onBackgroundReverse03: palette.onBackgroundLight03,
onBackgroundReverse04: palette.onBackgroundLight04,
// ... colors
}),
typography: {
shared: {
fontFamily: 'Roboto',
},
h1: {
fontSize: 24,
fontWeight: 'bold',
lineHeight: 28,
},
// ... typography
},
});