Customization
You can provide a custom theme to customize the colors, font sizes, border radius etc. with the ThemeProvider
component. Check the default theme to see which customization options are supported.
import { AppRegistry } from 'react-native';
import { ThemeProvider } from 'react-native-ficus-ui';
import App from './src/App';
// this is our custom theme
const theme = {
colors: {
// Use Smart Swatch to generate colors palette https://smart-swatch.netlify.app
violet: {
50: '#f0eaff',
100: '#d1c1f4',
200: '#b199e7',
300: '#9171dc',
400: '#7248d0',
500: '#592fb7',
600: '#45248f',
700: '#311968',
800: '#1e0f40',
900: '#0c031b',
},
},
fontSize: {
'6xl': 32,
},
spacing: {
'xs': 2,
'5xl': 64,
},
// components defaults can also be customized
components: {
Text: {
color: 'gray.100',
},
},
};
export default function Main() {
return (
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
);
}
To generate custom colors palette use Smart Swatch tool : https://smart-swatch.netlify.app (opens in a new tab)