A package combining best of two worlds: one of the best design system for react and react native - UI Kitten and Restyle, Shopify's library which provides a type-enforced system for building UI components in React Native with TypeScript.
Just wrap your main app in restyle-ui-kitten context provider, add the colors, mappings, iconPack and restyle config and off you go.
- Dark/Light Themes - add a preferred color theme from eva colors and even overwrite dark and light themes colors.
- UI Kitten Mapping - add mapping to overwrite the default styles of the components. More about mapping you can find here. Bear in mind that layout styles from mapping are static as the mapping is after all a json file.
- Restyle Theme - You can add a
restyle
theme withcreateTheme
to better control the layout. You can also add the colors fromdark/light
theme. - IconPack - You can add
eva-icons
iconPack or custom iconPacks built on"@expo/vector-icons"
orreact-native-vector-icons
.
You can use either npm
or yarn
to add it to your project.
yarn add restyle-ui-kitten
or npm install restyle-ui-kitten
- Supports
expo
, andreact-native
- Built with TypeScript
Optionally, you may also install these for a custom iconPack
and to build your own custom components:
yarn add @shopify/restyle @eva-design/eva @ui-kitten/components react-native-svg
or
npm install @shopify/restyle @eva-design/eva @ui-kitten/components react-native-svg
import { ThemeProvider, useThemeContext } from 'restyle-ui-kitten'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { StatusBar } from 'expo-status-bar'
import Navigation from 'navigation/.'
import { appMappings, appThemes, iconPack, restyle } from 'assets/.'
export default function App() {
const { isDarkMode } = useThemeContext()
return (
<ThemeProvider iconPack={iconPack} appMappings={appMappings} appThemes={appThemes} restyle={restyle}>
<SafeAreaProvider>
<Navigation />
<StatusBar style={isDarkMode() ? 'light' : 'dark'} />
</SafeAreaProvider>
</ThemeProvider>
)
}
And later in one of your screens...
<View flex={1} justifyContent={'center'}>
<Text alignSelf={'center'} category={'h1'}>Tab One</Text>
<View m={'xxl'} borderTopWidth={1} borderTopColor='color-danger-200' />
<Input marginHorizontal={'xxl'} borderRadius={32} />
<Button
m={'xl'}
accessoryLeft={(props) => <Icon name='user' {...props} />}
onPress={() => navigation.navigate('TabTwo')}>
{'Go to TabTwo'}
</Button>
</View>
The context provider and the theme custom hook can be imported directly.
import { ThemeProvider, useThemeContext } from 'restyle-ui-kitten'
The UI Kitten
components can be imported like this:
import { View, Button, Text } from 'restyle-ui-kitten/components'
import { light, dark } from '@eva-design/material' // or /eva
import { default as colors } from './custom-theme.json'
export const appThemes: Themes = {
light: { ...light, ...colors },
dark: { ...dark, ...colors },
}