Skip to main content

Customization

1. Colors

  • src/configs/Colors.ts

Add or edit the colors you want

const Colors = {
white: '#FFFFFF',
black: '#000000',
};

export default Colors;

2. Theme Variables

  • src/configs/Theme.ts

This allows you to easily create themed components by using theme variables

export interface ITheme {
background: ColorValue | string;
text: ColorValue | string;
}

export const themes = {
dark: {
background: Colors.black,
text: Colors.white,
},
light: {
background: Colors.white,
text: Colors.black,
},
};

Declare Custom Component

Let's declare a View and set it backgroundColor to any color of current theme.

import React from 'react';
import {View} from 'react-native';
import {useTheme} from 'configs/Theme';

interface AwesomeViewProps {}

const AwesomeView = ({...rest}: AwesomeViewProps) => {
const {theme} = useTheme();

return <View {...rest} style={[{backgroundColor: theme.background}]} />;
};

export default AwesomeView;

OUR PRODUCTS:

Thank you!