Customize

Change Theme Colors

To change Theme colors and customize any component of the App, just go to variables folder. And change all as you want

commonColors.js source

import { Platform } from "react-native";
const platform = Platform.OS;
export default {
//Main Colors
darkColor: "#1c1e2c",
semiDarkColor: "#23273c",
accentColor: "#4d4deb",
dividerDark: "#c2c2c2",
errorColor: "#eb4d77",
goldColor: "#ffc300",
whiteColor: "#fff",
blackColor: "#000",
successColor: "#0ed341",
greyLight: "#f7f7f7",
//Font Family
fontFamilyRegular: "Roboto-Regular",
fontFamilyBold: "Roboto-Bold",
// Font
DefaultFontSize: 16,
fontFamily: platform === "ios" ? "System" : "Roboto",
fontSizeBase: 15,
get fontSizeH1() {
return this.fontSizeBase * 1.8;
},
get fontSizeH2() {
return this.fontSizeBase * 1.6;
},
get fontSizeH3() {
return this.fontSizeBase * 1.4;
},
fontSizeInputText: 17,
fontSizeSmallText: 12,
fontSizePriceText: 10,
// Other
borderRadiusBase: 5,
contentPaddingBase: 8,
get contentPadding2x() {
return this.contentPaddingBase * 2;
},
get contentPadding4x() {
return this.contentPaddingBase * 4;
},
};

Rename App

Changing application name is very easy when using CRAN. Just follow this steps:

  1. Edit the package.json and change the name attribut.

  2. Edit the app.json and change the name , description , slug , bundleIdentifier andpackage attribut.

Change App Icon, Logo and SplashScreen

  1. To change App icon, just override icon.png file located in assets/images/ .

  2. To change App Logo, just override logo.png and header-ogo.png files located inassets/images/ .

  3. To change App launch screen background, just override splash.png file located in assets/images/ .

Add a Custom Font

To add a new custom file follow this steps:

  1. Copy font .ttf file to assest/fonts/

  2. Edit /App.js file and add file path loadfonts function:

async loadFonts() {
await Font.loadAsync({
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
Roboto_light: require('./assets/fonts/Roboto-Light.ttf'),
Ionicons: require('@expo/vector-icons/fonts/Ionicons.ttf'),
Feather: require('@expo/vector-icons/fonts/Feather.ttf'),
'simple-line-icons': require('@expo/vector-icons/fonts/SimpleLineIcons.ttf'),
});
this.setState({ fontLoaded: true });
}