kima-cli

KIMA-CLI v1.0

KIMA-CLI, all you need is l̶o̶v̶e̶ this boilerplate

kima-cli was built based on a case where I had to do the same thing over and over again every time I made a React Native project, where the stack-tech used is monotonous. Therefore, I had to create an automation to make this easier. Finally, I decided to create a CLI (Command Line Interface) which will later generate a boilerplate template in which all the tech-stacks are installed and ready to use.

Tech Stack

kima-cli has several stacks that are often used by companies in general, called:

• Build with Typescript
• React Native (v0.70.0)
• React Navigation 6
• Redux Tool Kit
• Redux Sagas
• Redux Persist
• AsyncStorage
• i18n ready
• Storybook ready
• Custom dark theme setup ready
• Some useful custom hooks ready
• Jest & React Native testing library ready
• Reanimated 2 ready
• React-native-svg ready
• Example of component, state-management, screens, etc are ready
• Custom fonts ready
• Lottie-react-native
• Env ready
• etc

Quick Start

Prerequisites:

• Make sure your laptop or machine supports the latest version of react-native, which is v0.70.0
• For Android, make sure you update your JDK to JDK version 11

Run the CLI:

# to create a new React Native app React Native
npx kima-cli new YourAmazingApp

# or make sure you always use the latest version
npx kima-cli@latest new YourAmazingApp

# Please wait for a while, kima-cli will prepare everything for you

# after that, make sure all assets are connected too
npx react-native-asset

How to use storybook

# Change .env if you want to use storybook mode.
USE_STORYBOOK=true, 

#  Otherwise, change it to false
USE_STORYBOOK=false

# After that run the command yarn run cc

# Run the application with the usual command
yarn ios / yarn android

How to add new ENV var

# Open the '.env' file

# Add the variables you want
API_SERVER=1234567

# Don’t forget to register the variable on @types/react-native-dotenv/env.d.ts with a ‘string’ type so that later typescript can automatically read it
declare module '@env' {
  export const USE_STORYBOOK: string
  // write down your env var here
  export const API_SERVER: string
}

How to add a new screen

# Open src/navigators/types.ts

# add a new enum values
export enum Screens {
  welcomeScreen = 'WelcomeScreen',
  greetingsScreen = 'GreetingsScreen',
  // write down your screens name here
  yourNewScreen = 'YourNewScreen'
}

# add your route and params you are creating, if not then fill it with ‘undefined’
export type RootStackParamList = {
  WelcomeScreen: undefined
  GreetingsScreen: {
    name: string
  }
  // write down your route name and params here
  YourNewScreen: undefined
}

# last step! add your screen in 'src/navigators/RootNavigator.tsx'
<Stack.Screen
  name={Screens.yourNewScreen}
  component={YourNewScreen}
/>

For other setups, you can see the example in this project. Please perform all the steps as shown in the example. You can do it! 😎

Troubleshooting

Can not run the application on Android:

• Make sure you have updated your laptop or machine to a supported version for the latest react-native version
• Make sure you are using JDK 11
• You can watch this tutorial Youtube video for update JDK to version 11

Thank you for reading

100% made with ❤️

I don’t need a star on my github, what I need is how you feel helped by using this tool. 🫡