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 });
  }