Setting up new Expo project with HestiaKit component

Create a new Expo project

Create a new Expo Project called "app" by running the following command.

npx create-expo-app@latest app

cd app

Install the core dependencies

Make sure to install the core dependencies that HestiaKit uses by default.

npx expo install nativewind react-native-gesture-handler react-native-svg expo-status-bar react-native-safe-area-context

Check out the installation guide for Nativewind to learn more about the configurations.

Copy any App Screen or Component from HestiaKit

Find any App screens or Components and copy them to your codebase.

For example, you may want to define the following free HestiaKit button component in your newly created expo "app".

// @/components/common/Buttons.tsx

import React from 'react';
import { Pressable, Text, View } from 'react-native';

export type ButtonProps = {
  children: React.ReactNode;
  onPress?: () => void;
};

const Button = ({ children, onPress }: ButtonProps): React.JSX.Element => (
  <Pressable onPress={onPress}>
    {({ pressed }: { pressed: boolean }) => (
      <View
        className={
          'items-center justify-center gap-x-4 p-4 rounded-xl bg-sky-500 dark:bg-teal-500'
        }
        style={{ opacity: pressed ? 0.5 : 1 }}
      >
        <Text className={'text-white text-base font-medium uppercase'}>
          {children}
        </Text>
      </View>
    )}
  </Pressable>
);

and import the component to the main screen of the expo app.

import { Button } from '@/components/common/Buttons';

export default function Screen() {
  return (
    <Button>Button</Button>
  )
}

Run the app on your mobile

To run the newly created expo app run the following command.

npm run start

If you prefer to generate the native code you must ensure to `prebuild` it first and only run the app.

// prebuild
npx expo prebuild

// to run on IOS simulator
npm run ios

// to run on Android emulator
npm run android