🚀 rn-next-boilerplate

KittenApp is React Native application. This project is uses latest version of react-navigation (v6) and tailwind css for react native system to design UI components

Technologies Use

• Typescript 4 support.
• React Hooks
• React Navigation 6 theming support.
• React Native Gesture Handler
• Tailwind Css React Native - TailwindCSS + React Native, written in TypeScript
• Axios
• Jest
• Eslint (Airbnb config)

Prerequisites

• Node v10 (it is recommended to install it via NVM)
• Yarn
• A development machine set up for React Native by following these instructions

Tailwind intellisense

// vs code setting.json
  "tailwindCSS.experimental.classRegex": [
    ["tw\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["tw1\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["tw2\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["tw3\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    // suggection for props name include  Cls="bg-blue-700"
    ["Cls=[\"'`]([^\"'`]*)"],
    ["Clx=[\"'`]([^\"'`]*)"],
    ["className:.[\"'`]([^\"'`]*)"],
    ["className:[\"'`]([^\"'`]*)"],
    ["className:.clx\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    "tw`([^`]*)",
    "tw\\.style\\(`([^)]*)`\\)",
    "tw\\.style\\(`([^)]*)\\)",
    "twColor\\(`([^)]*)`\\)"
  ],

Getting Started

1. Clone this repo, https://github.com/rimsila/kitten-app.git

2. Go to project's root directory, cd kitten-app

3. Run yarn to install dependencies

4. Run yarn pod or yarn pod m1 to install pod on ios

5. Start developments:

   • On Android:
     • Run react-native run-android or Use Android Studio (Recommended)
   • On iOS:
     • Run yarn react-native run-ios Or
     • Open yarn xcode in Xcode
     • Hit Run after selecting the desired device

6. Enjoy!!!