├── LICENSE ├── readme.md └── templates ├── readme.md └── typescript ├── blank ├── navigation │ ├── .gitignore │ ├── App.tsx │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── package.json │ ├── src │ │ ├── navigation │ │ │ ├── RootNavigator.tsx │ │ │ └── TabNavigator.tsx │ │ └── screens │ │ │ └── TestScreen.tsx │ ├── tsconfig.json │ └── yarn.lock └── vanilla │ ├── .gitignore │ ├── App.tsx │ ├── app.json │ ├── assets │ ├── adaptive-icon.png │ ├── favicon.png │ ├── icon.png │ └── splash.png │ ├── babel.config.js │ ├── package.json │ ├── tsconfig.json │ └── yarn.lock └── nativewind ├── navigation ├── .gitignore ├── App.tsx ├── app.json ├── assets │ ├── adaptive-icon.png │ ├── favicon.png │ ├── icon.png │ └── splash.png ├── babel.config.js ├── globals.css ├── globals.d.ts ├── metro.config.js ├── package.json ├── postcss.config.js ├── src │ ├── navigation │ │ ├── RootNavigator.tsx │ │ └── TabNavigator.tsx │ └── screens │ │ └── TestScreen.tsx ├── tailwind.config.js ├── tsconfig.json └── yarn.lock └── vanilla ├── .gitignore ├── App.tsx ├── app.json ├── assets ├── adaptive-icon.png ├── favicon.png ├── icon.png └── splash.png ├── babel.config.js ├── globals.css ├── globals.d.ts ├── metro.config.js ├── package.json ├── postcss.config.js ├── tailwind.config.js ├── tsconfig.json └── yarn.lock /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Felipe Pereira 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # :rocket: Commands To Set Up TypeScript in Expo 2 | 3 | ## Create an Expo App with TypeScript Template :computer: 4 | To create a new Expo app using the TypeScript template, run the following command: 5 | ```bash 6 | yarn create expo-app --template 7 | ``` 8 | 9 | ## Add TypeScript Dependencies 10 | Install the necessary TypeScript dependencies: 11 | ```bash 12 | yarn add --dev @tsconfig/react-native @types/jest @types/react @types/react-test-renderer typescript 13 | yarn add expo react-native-web react-dom @expo/webpack-config 14 | ``` 15 | 16 | ## Run the Project 17 | Start your Expo project using the tunnel option: 18 | ```bash 19 | yarn expo start --tunnel 20 | ``` 21 | 22 | # :compass: Navigation Setup 23 | 24 | To set up navigation in your app, follow these steps: 25 | 26 | ## Install React Navigation 27 | ```bash 28 | yarn add @react-navigation/native 29 | ``` 30 | 31 | ## Add Navigation Stack Dependencies 32 | ```bash 33 | yarn add react-native-screens react-native-safe-area-context @react-navigation/native-stack @react-navigation/stack 34 | ``` 35 | 36 | ## Add Bottom Tabs Navigation (Optional) 37 | If you want to use bottom tabs navigation, install the following package: 38 | ```bash 39 | yarn add @react-navigation/bottom-tabs 40 | ``` 41 | 42 | # :wrench: Eslint and Prettier Configuration 43 | 44 | Set up ESLint and Prettier for your project: 45 | 46 | ```bash 47 | yarn add -D expo eslint eslint-config-prettier eslint-config-universe eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser 48 | ``` 49 | 50 | In your `package.json`, update the `eslintConfig` section to extend the desired ESLint configuration: 51 | 52 | ```json 53 | { 54 | "eslintConfig": { 55 | "extends": "universe/native" 56 | } 57 | } 58 | ``` 59 | 60 | Create an `.eslintrc.json` file and extend the ESLint configurations: 61 | 62 | ```json 63 | { 64 | "extends": ["universe", "plugin:react-hooks/recommended"] 65 | } 66 | ``` 67 | 68 | Install Prettier 69 | 70 | ```bash 71 | yarn add expo prettier 72 | ``` 73 | 74 | # :art: CSS Configuration 75 | 76 | ## Use Viewport Units (vw, vh, vmin, vmax) 77 | To enable viewport units in your styles, install the `react-native-viewport-units` package: 78 | 79 | ```bash 80 | yarn add react-native-viewport-units --save 81 | ``` 82 | 83 | Import the units in your code: 84 | 85 | ```javascript 86 | var { vw, vh, vmin, vmax } = require('react-native-viewport-units'); 87 | ``` 88 | 89 | # :nail_care: Tailwind CSS Setup 90 | 91 | **Choose between Nativewind or Tailwind-RN based on your preference and project requirements.** 92 | 93 | ## Nativewind 94 | 95 | ### Install Dependencies 96 | ```bash 97 | yarn add nativewind postcss autoprefixer 98 | yarn add --dev tailwindcss@3.3.2 99 | ``` 100 | 101 | ### Initialize Tailwind CSS 102 | Run the following command to initialize Tailwind CSS and create the `tailwind.config.js` file: 103 | ```bash 104 | npx tailwindcss init 105 | ``` 106 | 107 | ### Configure `tailwind.config.js` 108 | Edit your `tailwind.config.js` file to include paths to your component files: 109 | ```diff 110 | module.exports = { 111 | - content: [], 112 | + content: ["./App.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}" ".//**/*.{js,jsx,ts,tsx}", ], 113 | theme: { 114 | extend: {}, 115 | }, 116 | plugins: [], 117 | } 118 | ``` 119 | 120 | ### Update `babel.config.js` 121 | Modify your `babel.config.js` to include the Nativewind Babel plugin: 122 | ```diff 123 | module.exports = function (api) { 124 | api.cache(true); 125 | return { 126 | presets: ["babel-preset-expo"], 127 | + plugins: ["nativewind/babel"], 128 | }; 129 | }; 130 | ``` 131 | 132 | ### Create `postcss.config.js` 133 | Create a `postcss.config.js` file and add the following configuration: 134 | ```javascript 135 | module.exports = { 136 | plugins: { 137 | tailwindcss: {}, 138 | autoprefixer: {}, 139 | } 140 | } 141 | ``` 142 | 143 | ### Configure `metro.config.js` 144 | Create a `metro.config.js` file and add the following code to enable CSS support in Metro: 145 | ```javascript 146 | const { getDefaultConfig } = require('expo/metro-config'); 147 | 148 | const config = getDefaultConfig(__dirname, { 149 | isCSSEnabled: true, 150 | }); 151 | 152 | module.exports = config; 153 | ``` 154 | 155 | ### Use Tailwind CSS in Your Project 156 | Create a `globals.css` file and add the following Tailwind CSS imports: 157 | ```css 158 | @tailwind base; 159 | @tailwind components; 160 | @tailwind utilities; 161 | ``` 162 | 163 | Import the `globals.css` file in your project where needed. 164 | 165 | ### TypeScript Support 166 | If you are using TypeScript, create a `globals.d.ts` file and add the following reference: 167 | ```typescript 168 | /// 169 | ``` 170 | 171 | ## Tailwind-RN 172 | ```bash 173 | yarn add tailwind-rn 174 | ``` 175 | 176 | ```bash 177 | npx setup-tailwind-rn 178 | ``` 179 | 180 | Follow the configuration steps as described in the terminal, and run: 181 | ```bash 182 | yarn dev:tailwind 183 | ``` 184 | 185 | **Note: Keep the dev server running at all times.** 186 | 187 | In your `input.css` file, include the following Tailwind CSS imports: 188 | ```css 189 | @tailwind base; 190 | @tailwind components; 191 | @tailwind utilities; 192 | ``` 193 | 194 | In your `tailwind.config.js` file, specify the content paths for your project. 195 | 196 | This completes the setup for Tailwind CSS in your React Native project. :thumbsup: 197 | -------------------------------------------------------------------------------- /templates/readme.md: -------------------------------------------------------------------------------- 1 | # React Native Templates 2 | 3 | This repository provides a collection of React Native TypeScript templates to kickstart your mobile app development. Each template is designed for specific use cases and comes with the necessary initial configurations. 4 | 5 | ## Typescript Templates: 6 | 7 | ### 1. Blank (Pure Configuration) 8 | 9 | The **Blank** template is a minimal setup with only the essential configurations to get you started. It's ideal for those who want to build their app from scratch and configure everything according to their needs. 10 | 11 | ### 2. Navigation 12 | 13 | The **Navigation** template includes a basic navigation structure using React Navigation. It's a good starting point for apps that require navigation between multiple screens. 14 | 15 | ### 3. NativeWind Blank 16 | 17 | The **NativeWind Blank** template extends the Blank template and includes NativeWind for styling. NativeWind is a utility-first CSS framework for React Native, making it easy to style your components. 18 | 19 | ### 4. NativeWind with Navigation 20 | 21 | The **NativeWind with Navigation** template combines the NativeWind styling with a navigation setup. It's suitable for projects that need both styling and navigation out of the box. 22 | 23 | ## How to Use 24 | 25 | To use one of these templates for your project, follow these steps: 26 | 27 | 1. Clone this repository or download the template you need. 28 | 2. Navigate to the template's directory. 29 | 3. Install the project dependencies using `npm install` or `yarn install`. 30 | 4. Rename the "name" in the `package.json` to your project's name 31 | 5. Start building your app by adding components, screens, and logic based on the chosen template. 32 | 33 | ## Contributing 34 | 35 | If you'd like to contribute to this project by adding more templates or improving existing ones, please follow these guidelines: 36 | 37 | 1. Fork this repository. 38 | 2. Create a new branch for your feature or bug fix. 39 | 3. Make your changes and commit them. 40 | 4. Submit a pull request with a clear description of your contribution. 41 | 42 | ## License 43 | 44 | This project is licensed under the [MIT License](LICENSE.md). 45 | 46 | ## Acknowledgments 47 | 48 | - Special thanks to the React Native and NativeWind communities for their support and contributions. 49 | 50 | --- 51 | -------------------------------------------------------------------------------- /templates/typescript/blank/navigation/.gitignore: -------------------------------------------------------------------------------- 1 | # Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files 2 | 3 | # dependencies 4 | node_modules/ 5 | 6 | # Expo 7 | .expo/ 8 | dist/ 9 | web-build/ 10 | 11 | # Native 12 | *.orig.* 13 | *.jks 14 | *.p8 15 | *.p12 16 | *.key 17 | *.mobileprovision 18 | 19 | # Metro 20 | .metro-health-check* 21 | 22 | # debug 23 | npm-debug.* 24 | yarn-debug.* 25 | yarn-error.* 26 | 27 | # macOS 28 | .DS_Store 29 | *.pem 30 | 31 | # local env files 32 | .env*.local 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | -------------------------------------------------------------------------------- /templates/typescript/blank/navigation/App.tsx: -------------------------------------------------------------------------------- 1 | import { NavigationContainer } from "@react-navigation/native"; 2 | 3 | import RootNavigator from "./src/navigation/RootNavigator"; 4 | 5 | export default function App() { 6 | return ( 7 | 8 | 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /templates/typescript/blank/navigation/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "navigation", 4 | "slug": "navigation", 5 | "version": "1.0.0", 6 | "orientation": "portrait", 7 | "icon": "./assets/icon.png", 8 | "userInterfaceStyle": "light", 9 | "splash": { 10 | "image": "./assets/splash.png", 11 | "resizeMode": "contain", 12 | "backgroundColor": "#ffffff" 13 | }, 14 | "assetBundlePatterns": [ 15 | "**/*" 16 | ], 17 | "ios": { 18 | "supportsTablet": true 19 | }, 20 | "android": { 21 | "adaptiveIcon": { 22 | "foregroundImage": "./assets/adaptive-icon.png", 23 | "backgroundColor": "#ffffff" 24 | } 25 | }, 26 | "web": { 27 | "favicon": "./assets/favicon.png" 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /templates/typescript/blank/navigation/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flepsz/React-Native-Guide/d228abe9cdad93e68dbc78c80df488d418df2241/templates/typescript/blank/navigation/assets/adaptive-icon.png -------------------------------------------------------------------------------- /templates/typescript/blank/navigation/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flepsz/React-Native-Guide/d228abe9cdad93e68dbc78c80df488d418df2241/templates/typescript/blank/navigation/assets/favicon.png -------------------------------------------------------------------------------- /templates/typescript/blank/navigation/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flepsz/React-Native-Guide/d228abe9cdad93e68dbc78c80df488d418df2241/templates/typescript/blank/navigation/assets/icon.png -------------------------------------------------------------------------------- /templates/typescript/blank/navigation/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flepsz/React-Native-Guide/d228abe9cdad93e68dbc78c80df488d418df2241/templates/typescript/blank/navigation/assets/splash.png -------------------------------------------------------------------------------- /templates/typescript/blank/navigation/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /templates/typescript/blank/navigation/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "navigation", 3 | "version": "1.0.0", 4 | "main": "node_modules/expo/AppEntry.js", 5 | "scripts": { 6 | "start": "expo start", 7 | "android": "expo start --android", 8 | "ios": "expo start --ios", 9 | "web": "expo start --web" 10 | }, 11 | "dependencies": { 12 | "@expo/webpack-config": "^18.1.3", 13 | "@react-navigation/bottom-tabs": "^6.5.8", 14 | "@react-navigation/native": "^6.1.7", 15 | "@react-navigation/native-stack": "^6.9.13", 16 | "@react-navigation/stack": "^6.3.17", 17 | "expo": "^49.0.11", 18 | "expo-status-bar": "~1.6.0", 19 | "react": "18.2.0", 20 | "react-dom": "^18.2.0", 21 | "react-native": "0.72.4", 22 | "react-native-safe-area-context": "^4.7.2", 23 | "react-native-screens": "^3.25.0", 24 | "react-native-web": "^0.19.9" 25 | }, 26 | "devDependencies": { 27 | "@babel/core": "^7.20.0", 28 | "@tsconfig/react-native": "^3.0.2", 29 | "@types/jest": "^29.5.5", 30 | "@types/react": "^18.2.22", 31 | "@types/react-test-renderer": "^18.0.2", 32 | "typescript": "^5.2.2" 33 | }, 34 | "private": true 35 | } 36 | -------------------------------------------------------------------------------- /templates/typescript/blank/navigation/src/navigation/RootNavigator.tsx: -------------------------------------------------------------------------------- 1 | import { createNativeStackNavigator } from "@react-navigation/native-stack"; 2 | import TabNavigator from "./TabNavigator"; 3 | 4 | const RootStack = createNativeStackNavigator(); 5 | 6 | export default function RootNavigator() { 7 | return ( 8 | 9 | 10 | 11 | 12 | 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /templates/typescript/blank/navigation/src/navigation/TabNavigator.tsx: -------------------------------------------------------------------------------- 1 | import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; 2 | import { useNavigation } from "@react-navigation/native"; 3 | import { useLayoutEffect } from "react"; 4 | import TestScreen from "../screens/TestScreen"; 5 | 6 | const Tab = createBottomTabNavigator(); 7 | 8 | export default function TabNavigator() { 9 | const navigation = useNavigation(); 10 | useLayoutEffect(() => { 11 | navigation.setOptions({ 12 | headerShown: false, 13 | }); 14 | }, []); 15 | 16 | return ( 17 | 18 | 19 | 20 | ) 21 | } -------------------------------------------------------------------------------- /templates/typescript/blank/navigation/src/screens/TestScreen.tsx: -------------------------------------------------------------------------------- 1 | import { StyleSheet, Text, View } from 'react-native'; 2 | 3 | export default function TestScreen() { 4 | return ( 5 | 6 | Ready to use now :D 7 | React Native Typescript with Navigation 8 | 9 | ); 10 | } 11 | 12 | const styles = StyleSheet.create({ 13 | container: { 14 | backgroundColor: '#5c228b', 15 | }, 16 | text: { 17 | marginTop: 80, 18 | color: '#fff', 19 | fontSize: 36, 20 | }, 21 | text2: { 22 | marginTop: 20, 23 | color: '#fff', 24 | fontSize: 25, 25 | } 26 | }); -------------------------------------------------------------------------------- /templates/typescript/blank/navigation/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /templates/typescript/blank/vanilla/.gitignore: -------------------------------------------------------------------------------- 1 | # Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files 2 | 3 | # dependencies 4 | node_modules/ 5 | 6 | # Expo 7 | .expo/ 8 | dist/ 9 | web-build/ 10 | 11 | # Native 12 | *.orig.* 13 | *.jks 14 | *.p8 15 | *.p12 16 | *.key 17 | *.mobileprovision 18 | 19 | # Metro 20 | .metro-health-check* 21 | 22 | # debug 23 | npm-debug.* 24 | yarn-debug.* 25 | yarn-error.* 26 | 27 | # macOS 28 | .DS_Store 29 | *.pem 30 | 31 | # local env files 32 | .env*.local 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | -------------------------------------------------------------------------------- /templates/typescript/blank/vanilla/App.tsx: -------------------------------------------------------------------------------- 1 | import { StyleSheet, Text, View } from 'react-native'; 2 | 3 | export default function App() { 4 | return ( 5 | 6 | Ready to use now :D 7 | React Native Typescript 8 | 9 | ); 10 | } 11 | 12 | const styles = StyleSheet.create({ 13 | container: { 14 | backgroundColor: '#5c228b', 15 | }, 16 | text: { 17 | marginTop: 80, 18 | color: '#fff', 19 | fontSize: 36, 20 | }, 21 | text2: { 22 | marginTop: 20, 23 | color: '#fff', 24 | fontSize: 25, 25 | } 26 | }); 27 | -------------------------------------------------------------------------------- /templates/typescript/blank/vanilla/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "vanilla", 4 | "slug": "vanilla", 5 | "version": "1.0.0", 6 | "orientation": "portrait", 7 | "icon": "./assets/icon.png", 8 | "userInterfaceStyle": "light", 9 | "splash": { 10 | "image": "./assets/splash.png", 11 | "resizeMode": "contain", 12 | "backgroundColor": "#ffffff" 13 | }, 14 | "assetBundlePatterns": [ 15 | "**/*" 16 | ], 17 | "ios": { 18 | "supportsTablet": true 19 | }, 20 | "android": { 21 | "adaptiveIcon": { 22 | "foregroundImage": "./assets/adaptive-icon.png", 23 | "backgroundColor": "#ffffff" 24 | } 25 | }, 26 | "web": { 27 | "favicon": "./assets/favicon.png" 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /templates/typescript/blank/vanilla/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flepsz/React-Native-Guide/d228abe9cdad93e68dbc78c80df488d418df2241/templates/typescript/blank/vanilla/assets/adaptive-icon.png -------------------------------------------------------------------------------- /templates/typescript/blank/vanilla/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flepsz/React-Native-Guide/d228abe9cdad93e68dbc78c80df488d418df2241/templates/typescript/blank/vanilla/assets/favicon.png -------------------------------------------------------------------------------- /templates/typescript/blank/vanilla/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flepsz/React-Native-Guide/d228abe9cdad93e68dbc78c80df488d418df2241/templates/typescript/blank/vanilla/assets/icon.png -------------------------------------------------------------------------------- /templates/typescript/blank/vanilla/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flepsz/React-Native-Guide/d228abe9cdad93e68dbc78c80df488d418df2241/templates/typescript/blank/vanilla/assets/splash.png -------------------------------------------------------------------------------- /templates/typescript/blank/vanilla/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /templates/typescript/blank/vanilla/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vanilla", 3 | "version": "1.0.0", 4 | "main": "node_modules/expo/AppEntry.js", 5 | "scripts": { 6 | "start": "expo start", 7 | "android": "expo start --android", 8 | "ios": "expo start --ios", 9 | "web": "expo start --web" 10 | }, 11 | "dependencies": { 12 | "@expo/webpack-config": "^18.1.3", 13 | "expo": "^49.0.11", 14 | "expo-status-bar": "~1.6.0", 15 | "react": "18.2.0", 16 | "react-dom": "^18.2.0", 17 | "react-native": "0.72.4", 18 | "react-native-web": "^0.19.9" 19 | }, 20 | "devDependencies": { 21 | "@babel/core": "^7.20.0", 22 | "@tsconfig/react-native": "^3.0.2", 23 | "@types/jest": "^29.5.5", 24 | "@types/react": "^18.2.22", 25 | "@types/react-test-renderer": "^18.0.2", 26 | "typescript": "^5.2.2" 27 | }, 28 | "private": true 29 | } 30 | -------------------------------------------------------------------------------- /templates/typescript/blank/vanilla/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /templates/typescript/nativewind/navigation/.gitignore: -------------------------------------------------------------------------------- 1 | # Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files 2 | 3 | # dependencies 4 | node_modules/ 5 | 6 | # Expo 7 | .expo/ 8 | dist/ 9 | web-build/ 10 | 11 | # Native 12 | *.orig.* 13 | *.jks 14 | *.p8 15 | *.p12 16 | *.key 17 | *.mobileprovision 18 | 19 | # Metro 20 | .metro-health-check* 21 | 22 | # debug 23 | npm-debug.* 24 | yarn-debug.* 25 | yarn-error.* 26 | 27 | # macOS 28 | .DS_Store 29 | *.pem 30 | 31 | # local env files 32 | .env*.local 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | -------------------------------------------------------------------------------- /templates/typescript/nativewind/navigation/App.tsx: -------------------------------------------------------------------------------- 1 | import { NavigationContainer } from "@react-navigation/native"; 2 | 3 | import RootNavigator from "./src/navigation/RootNavigator"; 4 | 5 | export default function App() { 6 | return ( 7 | 8 | 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /templates/typescript/nativewind/navigation/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "navigation", 4 | "slug": "navigation", 5 | "version": "1.0.0", 6 | "orientation": "portrait", 7 | "icon": "./assets/icon.png", 8 | "userInterfaceStyle": "light", 9 | "splash": { 10 | "image": "./assets/splash.png", 11 | "resizeMode": "contain", 12 | "backgroundColor": "#ffffff" 13 | }, 14 | "assetBundlePatterns": [ 15 | "**/*" 16 | ], 17 | "ios": { 18 | "supportsTablet": true 19 | }, 20 | "android": { 21 | "adaptiveIcon": { 22 | "foregroundImage": "./assets/adaptive-icon.png", 23 | "backgroundColor": "#ffffff" 24 | } 25 | }, 26 | "web": { 27 | "favicon": "./assets/favicon.png" 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /templates/typescript/nativewind/navigation/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flepsz/React-Native-Guide/d228abe9cdad93e68dbc78c80df488d418df2241/templates/typescript/nativewind/navigation/assets/adaptive-icon.png -------------------------------------------------------------------------------- /templates/typescript/nativewind/navigation/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flepsz/React-Native-Guide/d228abe9cdad93e68dbc78c80df488d418df2241/templates/typescript/nativewind/navigation/assets/favicon.png -------------------------------------------------------------------------------- /templates/typescript/nativewind/navigation/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flepsz/React-Native-Guide/d228abe9cdad93e68dbc78c80df488d418df2241/templates/typescript/nativewind/navigation/assets/icon.png -------------------------------------------------------------------------------- /templates/typescript/nativewind/navigation/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flepsz/React-Native-Guide/d228abe9cdad93e68dbc78c80df488d418df2241/templates/typescript/nativewind/navigation/assets/splash.png -------------------------------------------------------------------------------- /templates/typescript/nativewind/navigation/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | plugins: ["nativewind/babel"], 6 | }; 7 | }; 8 | -------------------------------------------------------------------------------- /templates/typescript/nativewind/navigation/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /templates/typescript/nativewind/navigation/globals.d.ts: -------------------------------------------------------------------------------- 1 | /// -------------------------------------------------------------------------------- /templates/typescript/nativewind/navigation/metro.config.js: -------------------------------------------------------------------------------- 1 | const { getDefaultConfig } = require('expo/metro-config'); 2 | 3 | /** @type {import('expo/metro-config').MetroConfig} */ 4 | const config = getDefaultConfig(__dirname, { 5 | // [Web-only]: Enables CSS support in Metro. 6 | isCSSEnabled: true, 7 | }); 8 | 9 | module.exports = config; -------------------------------------------------------------------------------- /templates/typescript/nativewind/navigation/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "navigation", 3 | "version": "1.0.0", 4 | "main": "node_modules/expo/AppEntry.js", 5 | "scripts": { 6 | "start": "expo start", 7 | "android": "expo start --android", 8 | "ios": "expo start --ios", 9 | "web": "expo start --web" 10 | }, 11 | "dependencies": { 12 | "@expo/webpack-config": "^18.1.3", 13 | "@react-navigation/bottom-tabs": "^6.5.8", 14 | "@react-navigation/native": "^6.1.7", 15 | "@react-navigation/native-stack": "^6.9.13", 16 | "@react-navigation/stack": "^6.3.17", 17 | "autoprefixer": "^10.4.15", 18 | "expo": "^49.0.11", 19 | "expo-status-bar": "~1.6.0", 20 | "nativewind": "^2.0.11", 21 | "postcss": "^8.4.30", 22 | "react": "18.2.0", 23 | "react-dom": "^18.2.0", 24 | "react-native": "0.72.4", 25 | "react-native-safe-area-context": "^4.7.2", 26 | "react-native-screens": "^3.25.0", 27 | "react-native-web": "^0.19.9" 28 | }, 29 | "devDependencies": { 30 | "@babel/core": "^7.20.0", 31 | "@tsconfig/react-native": "^3.0.2", 32 | "@types/jest": "^29.5.5", 33 | "@types/react": "^18.2.22", 34 | "@types/react-test-renderer": "^18.0.2", 35 | "tailwindcss": "3.3.2", 36 | "typescript": "^5.2.2" 37 | }, 38 | "private": true 39 | } 40 | -------------------------------------------------------------------------------- /templates/typescript/nativewind/navigation/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | } 6 | } -------------------------------------------------------------------------------- /templates/typescript/nativewind/navigation/src/navigation/RootNavigator.tsx: -------------------------------------------------------------------------------- 1 | import { createNativeStackNavigator } from "@react-navigation/native-stack"; 2 | import TabNavigator from "./TabNavigator"; 3 | import "../../globals.css" 4 | 5 | const RootStack = createNativeStackNavigator(); 6 | 7 | export default function RootNavigator() { 8 | return ( 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /templates/typescript/nativewind/navigation/src/navigation/TabNavigator.tsx: -------------------------------------------------------------------------------- 1 | import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; 2 | import { useNavigation } from "@react-navigation/native"; 3 | import { useLayoutEffect } from "react"; 4 | import TestScreen from "../screens/TestScreen"; 5 | 6 | const Tab = createBottomTabNavigator(); 7 | 8 | export default function TabNavigator() { 9 | const navigation = useNavigation(); 10 | useLayoutEffect(() => { 11 | navigation.setOptions({ 12 | headerShown: false, 13 | }); 14 | }, []); 15 | 16 | return ( 17 | 18 | 19 | 20 | ) 21 | } -------------------------------------------------------------------------------- /templates/typescript/nativewind/navigation/src/screens/TestScreen.tsx: -------------------------------------------------------------------------------- 1 | import { View, Text } from "react-native"; 2 | 3 | export default function TestScreen() { 4 | return ( 5 | 6 | Ready to use now :D 7 | React Native Typescript with Nativewind and Navigation 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /templates/typescript/nativewind/navigation/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./App.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | } 9 | 10 | -------------------------------------------------------------------------------- /templates/typescript/nativewind/navigation/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /templates/typescript/nativewind/vanilla/.gitignore: -------------------------------------------------------------------------------- 1 | # Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files 2 | 3 | # dependencies 4 | node_modules/ 5 | 6 | # Expo 7 | .expo/ 8 | dist/ 9 | web-build/ 10 | 11 | # Native 12 | *.orig.* 13 | *.jks 14 | *.p8 15 | *.p12 16 | *.key 17 | *.mobileprovision 18 | 19 | # Metro 20 | .metro-health-check* 21 | 22 | # debug 23 | npm-debug.* 24 | yarn-debug.* 25 | yarn-error.* 26 | 27 | # macOS 28 | .DS_Store 29 | *.pem 30 | 31 | # local env files 32 | .env*.local 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | -------------------------------------------------------------------------------- /templates/typescript/nativewind/vanilla/App.tsx: -------------------------------------------------------------------------------- 1 | import { Text, View } from 'react-native'; 2 | import "./globals.css" 3 | 4 | export default function App() { 5 | return ( 6 | 7 | Ready to use now :D 8 | React Native Typescript with Nativewind 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /templates/typescript/nativewind/vanilla/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "vanilla", 4 | "slug": "vanilla", 5 | "version": "1.0.0", 6 | "orientation": "portrait", 7 | "icon": "./assets/icon.png", 8 | "userInterfaceStyle": "light", 9 | "splash": { 10 | "image": "./assets/splash.png", 11 | "resizeMode": "contain", 12 | "backgroundColor": "#ffffff" 13 | }, 14 | "assetBundlePatterns": [ 15 | "**/*" 16 | ], 17 | "ios": { 18 | "supportsTablet": true 19 | }, 20 | "android": { 21 | "adaptiveIcon": { 22 | "foregroundImage": "./assets/adaptive-icon.png", 23 | "backgroundColor": "#ffffff" 24 | } 25 | }, 26 | "web": { 27 | "favicon": "./assets/favicon.png" 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /templates/typescript/nativewind/vanilla/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flepsz/React-Native-Guide/d228abe9cdad93e68dbc78c80df488d418df2241/templates/typescript/nativewind/vanilla/assets/adaptive-icon.png -------------------------------------------------------------------------------- /templates/typescript/nativewind/vanilla/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flepsz/React-Native-Guide/d228abe9cdad93e68dbc78c80df488d418df2241/templates/typescript/nativewind/vanilla/assets/favicon.png -------------------------------------------------------------------------------- /templates/typescript/nativewind/vanilla/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flepsz/React-Native-Guide/d228abe9cdad93e68dbc78c80df488d418df2241/templates/typescript/nativewind/vanilla/assets/icon.png -------------------------------------------------------------------------------- /templates/typescript/nativewind/vanilla/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flepsz/React-Native-Guide/d228abe9cdad93e68dbc78c80df488d418df2241/templates/typescript/nativewind/vanilla/assets/splash.png -------------------------------------------------------------------------------- /templates/typescript/nativewind/vanilla/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | plugins: ["nativewind/babel"], 6 | }; 7 | }; 8 | -------------------------------------------------------------------------------- /templates/typescript/nativewind/vanilla/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /templates/typescript/nativewind/vanilla/globals.d.ts: -------------------------------------------------------------------------------- 1 | /// -------------------------------------------------------------------------------- /templates/typescript/nativewind/vanilla/metro.config.js: -------------------------------------------------------------------------------- 1 | const { getDefaultConfig } = require('expo/metro-config'); 2 | 3 | /** @type {import('expo/metro-config').MetroConfig} */ 4 | const config = getDefaultConfig(__dirname, { 5 | // [Web-only]: Enables CSS support in Metro. 6 | isCSSEnabled: true, 7 | }); 8 | 9 | module.exports = config; -------------------------------------------------------------------------------- /templates/typescript/nativewind/vanilla/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vanilla", 3 | "version": "1.0.0", 4 | "main": "node_modules/expo/AppEntry.js", 5 | "scripts": { 6 | "start": "expo start", 7 | "android": "expo start --android", 8 | "ios": "expo start --ios", 9 | "web": "expo start --web" 10 | }, 11 | "dependencies": { 12 | "@expo/webpack-config": "^18.1.3", 13 | "autoprefixer": "^10.4.15", 14 | "expo": "^49.0.11", 15 | "expo-status-bar": "~1.6.0", 16 | "nativewind": "^2.0.11", 17 | "postcss": "^8.4.30", 18 | "react": "18.2.0", 19 | "react-dom": "^18.2.0", 20 | "react-native": "0.72.4", 21 | "react-native-web": "^0.19.9" 22 | }, 23 | "devDependencies": { 24 | "@babel/core": "^7.20.0", 25 | "@tsconfig/react-native": "^3.0.2", 26 | "@types/jest": "^29.5.5", 27 | "@types/react": "^18.2.22", 28 | "@types/react-test-renderer": "^18.0.2", 29 | "tailwindcss": "3.3.2", 30 | "typescript": "^5.2.2" 31 | }, 32 | "private": true 33 | } 34 | -------------------------------------------------------------------------------- /templates/typescript/nativewind/vanilla/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | } 6 | } -------------------------------------------------------------------------------- /templates/typescript/nativewind/vanilla/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./App.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | } 9 | 10 | -------------------------------------------------------------------------------- /templates/typescript/nativewind/vanilla/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | --------------------------------------------------------------------------------