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!