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:
Edit  the package.json  and change the name attribut.
Edit  the app.json  and change the name , description , slug ,  bundleIdentifier andpackage attribut.
Change App Icon, Logo and SplashScreen
To change App icon, just override icon.png  file located in  assets/images/ .
To change App Logo, just override logo.png  and header-ogo.png files located inassets/images/ .
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:
Copy font .ttf  file to assest/fonts/  
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 });
  }
File Structure
License
Last updated 2 years ago