TheHart Store Pro Docs
Getting StartedFolder StructureWordpress ConfigureApp ConfigureInstall DependanciesRename ProjectChange App IconConfigure GraphQLColor SchemeTypographySpacing & Border RadiusExample CodeThanks & Support

App Configure


Install Dependancies

  • Open Terminal app or Any other command line tool and
  • Type this command then hit Enter
yarn install

After installing all dependancies, you're good to go.

Rename Project

Change Package Name or App Name.

Install Globally React Native Rename.

yarn global add react-native-rename
npm install react-native-rename -g

Then you can rename like this.

npx react-native-rename <newName>

Change App Icon

Generate Icon App using AppIcon.co & place on /android/app/src/main/res/.


Configure GraphQL

  • Open /src/config/graphql.config.ts, paste your site url. eg. example.com.
export const graphqlUrl = 'https://example.com/graphql';

graphqlconfigure

Theming


Color Scheme

You can change the app colors & background as you like. You need to open /src/config/theme.config.ts, then update the color scheme in both light & dark mode.

You can use Predefined colors or add manually colors like #ff0062, rgb(45,80,50).

color

export const theme: themeSchemeType = {


    light: {
        white: colors.white,
        black: colors.black,
        dark: colors.gray600,
        danger: colors.red500,
        light: colors.blue100,
        accent: colors.pink500,
        warn: colors.yellow500,
        border: colors.gray500,
        bgdark: colors.gray800,
        shadow: colors.gray400,
        primary: colors.blue300,
        bglight: colors.gray100,
        success: colors.green500,
        secondary: colors.purple500,
        transparent: colors.transparent,
    },


    dark: {
        white: colors.white,
        black: colors.black,
        dark: colors.gray800,
        danger: colors.red500,
        light: colors.blue100,
        accent: colors.pink500,
        warn: colors.yellow500,
        bgdark: colors.gray700,
        shadow: colors.gray900,
        border: colors.gray600,
        primary: colors.blue500,
        bglight: colors.gray100,
        success: colors.green500,
        secondary: colors.purple500,
        transparent: colors.transparent,
    },
    ...
};

Typography

You can change the app typography as you like. If you changing font family then aftr place TTF files to /src/assets/fonts, Run this command.

npx react-native link

You need to open /src/config/theme.config.ts, then update the typography.

color

export const theme: themeSchemeType = {
    ...
    typography: {
        p: 18,
        lg: 48,
        md: 16,
        sm: 10,
        h1: 36,
        h2: 24,
        h3: 22,
        h4: 20,
        helper: 14,
        ParaFontFamily: 'Asap-Bold',
        HeadingFontFamily: 'Asap-Bold',
    },
    ...
};

Spacing & Border Radius

You can change the app spaing & border radius as you like. You need to open /src/config/theme.config.ts, then update the spaing & border radius.

color

export const theme: themeSchemeType = {
    ...
    radius: {
        sm: 8,
        md: 12,
        lg: 18,
        xl: 24,
        xxl: 48,
    },
    space: {
        sm: '2%',
        md: '5%',
        lg: '10%',
        xl: '15%',
        xxl: '25%',
    },
    ...
};

Example Code

After All done, you can see the code like this

color