Skip to main content

Introduction

This section talks about some basic customizations that can be done to the sample ESP RainMaker Home App and rebrand it with your app logo and brand color themes.

If you have tried the sample ESP RainMaker Home app and find it to be sufficient feature-wise, you can just rebrand it with your product logo, make changes to the color theme to suit your brand colors, along with your company Privacy Policy and Terms of Use for the products. Ensure that the licensing terms and conditions are respected appropriately.

Pre-Requisite​

Assumption is that you already have the app development setup ready. Follow the instructions for setting up the development environment. All the references below would be based on the cloned GitHub repository for the sample ESP RainMaker Home app source code.

Branding Customization​

It is possible to customize the brand logo, splash screen, and other images and assets.

Customizing App Icons and Images​

  • App icons are located in the assets/images/ folder. Replace those with your brand icons.
  • App device icons are located in the assets/images/devices/ folder.
  • Add custom branding assets

The configuration and paths for the logo and assets file are maintained in the app.json file.

Customizing Splash Screen​

Splash screen assets are located in platform-specific directories.

You can configure splash screen behavior in the app.json file:

{
  "expo": {
    "plugins": [
      [
        "expo-splash-screen",
        {
          "image": "./assets/images/logo.png",
          "imageWidth": 200,
          "resizeMode": "contain",
          "backgroundColor": "#ffffff"
        }
      ]
    ]
  }
}

App Name & Metadata Customization​

App name and other app metadata can be customized by modifying the app name and bundle identifiers in the app.json file:

{
  "expo": {
    "name": "Your Custom App Name",
    "slug": "your-custom-slug",
    "version": "1.0.0",
    "ios": {
      "bundleIdentifier": "com.yourcompany.yourapp"
    },
    "android": {
      "package": "com.yourcompany.yourapp"
    }
  }
}

Theme Customization - Branding​

Users should be able to customize colors, typography, spacing, and animations as per the theme branding.

Customizing Brand Theme Colors​

The theme colors are defined in theme/tokens.ts file:

const themes = {
  light: {
    colors: {
      white: "#ffffff",
      black: "#2c3e50",
      bluetooth: "#2c5aa0",
      gray: "#7f8c8d",
      lightGray: "#bdc3c7",
      red: "#e74c3c",
      orange: "#f39c12",
      blue: "#2c5aa0",
      green: "#27ae60",
      yellow: "#f1c40f",
      lightBlue: "rgba(44, 90, 160, .3)",
      bg: "#f5f6f7",
      bg1: "#e8eef7",
      bg2: "#d4e0f0",
      bg3: "#b0c7e3",
      bg4: "rgba(44, 90, 160, 0.15)",
      bg5: "#f8f9fa",
      borderColor: "rgba(218, 218, 218, 0.62)",
      darkBorderColor: "#cbd5e1",
      primary: "#2c5aa0",
      text_primary: "#1e293b",
      text_primary_light: "#334155",
      text_primary_dark: "#0f172a",
      text_secondary: "#64748b",
      text_secondary_light: "#475569",
      text_secondary_dark: "#334155",
      warn: "#b25b00",
      error: "#b71c1c",
      success: "#237804",
      warnBg: "#FFF4D6",
      errorBg: "#FADADA",
      successBg: "#D9F7BE",
    },
  },
  dark: {
    colors: {
      // Dark theme colors...
    },
  },
};

Customizing Typography Styling​

Typography and spacing use responsive scaling functions defined in utils/styling.ts:

import { scale, verticalScale } from "@/utils/styling";

// Typography uses responsive scaling
export const tokens = {
  fontSize: {
    xs: scale(12),
    sm: scale(14),
    _15: scale(15),
    md: scale(16),
    lg: scale(18),
    xl: scale(22),
  },

  fonts: {
    regular: "'Poppins-Regular', 'Avenir', Helvetica, Arial, sans-serif",
    medium: "'Poppins-Medium', 'Avenir', Helvetica, Arial, sans-serif",
  },

  radius: {
    sm: verticalScale(10),
    md: verticalScale(16),
  },

  spacing: {
    _5: scale(5),
    _10: scale(10),
    _15: scale(15),
    _20: scale(20),
    _30: scale(30),
    _40: scale(40),
  },

  border: {
    defaultWidth: 1.5,
  },
};

Customizing Component Styling​

You can customize the styling of your UI components like layouts, buttons, and controls in the theme/globalStyleSheet.tsx file.

This file contains:

  • Global component styles
  • Layout definitions
  • Common style patterns
  • Cross-platform style consistency

I18N & L10N Support​

Internationalization Configuration​

The i18n configuration is defined in the i18n.ts file:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import en from "./locales/en.json";

i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: en,
    },
  },
  lng: "en",
  fallbackLng: "en",
  interpolation: {
    escapeValue: false,
  },
});

You can configure:

  • Default language
  • Fallback language
  • Available locales
  • Date/time formatting
  • Number formatting

Localization Files​

The default English language strings are externalized in locales/en.json.

To add additional languages, create new translation files:

  • locales/es.json for Spanish
  • locales/fr.json for French
  • And so on

Changing the Privacy Policy & Terms of Use​

The "Privacy Policy" and "Terms of Use" URLs should be updated for your company, product, or service.

The URLs for both these documents are configured in utils/constants.ts:

export const TERMS_OF_USE_LINK =
  "https://rainmaker.espressif.com/docs/terms-of-use.html";
export const PRIVACY_POLICY_LINK =
  "https://rainmaker.espressif.com/docs/privacy-policy.html";

Replace these URLs with your own Privacy Policy and Terms of Use document URLs.

On this page