Customize

Change Theme Colors

To change Theme colors and customize any component of the App, just follow the NativeBase procedure to do so.

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

Last updated