Configuration

React Native Store UI template provides some generic configuration to handle theme settings globally like primary color, border radius, layout mode etc through a configuration file config.js which is located on the root of main project directory.

Sample

import { Platform } from "react-native";

const $primaryColor = '#0066ff';
const $secondaryColor = '#c2185b';
const $lightColor = '#607d8b';
const $warningColor = '#d32f2f';
const $successColor = '#00c853';
const $layout = 'light';
const $borderRadius = 10;

export default {
	appVersion: "1.1",
	headingFont: Platform.OS == 'android' ? 'OpenSansBold' : 'helvetica-bold',
	defaultFont: Platform.OS == 'android' ? 'OpenSansRegular' : 'helvetica',
	defaultFontSize: Platform.OS == 'ios' ? 16 : 14,
	layoutMode: $layout,
	backgroundColor: $layout =='dark' ? '#222222' : '#f2f2f2',
	listBackgroundColor: $layout =='dark' ? '#111111' : '#ffffff',
	listSeparatorColor: $layout =='dark' ? '#222222' : '#eeeeee',
	tabBarColor: $layout == 'dark' ? '#111111' : '#fffffff',
	cardColor: $layout == 'dark' ? '#131313' : '#ffffff',
	defaultFontColor: $layout == 'dark' ? '#f2f2f2' : '#4f555f',
	primaryColor: $primaryColor,
	secondaryColor: $secondaryColor,
	lightColor: $lightColor,
	warningColor: $warningColor,
	successColor: $successColor,
	defaultBorderRadius: $borderRadius,
	badgeColor: 'red',
	badgeTextColor: '#ffffff',
	productDetailLayout: 'layout1', // layout1 or layout2
	style: {...},
};