49.0.6

Updated expo 49

Author: matsyui

.gitignore

@@ -1,15 +1,35 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
 node_modules/
+
+# Expo
 .expo/
-.vscode/
 dist/
-npm-debug.*
+web-build/
+
+# Native
+*.orig.*
 *.jks
 *.p8
 *.p12
 *.key
 *.mobileprovision
-*.orig.*
-web-build/
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
 
 # macOS
 .DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo

App.tsx

@@ -1,14 +1,14 @@
-/// <reference types="nativewind/types" />
-import { StatusBar } from 'expo-status-bar';
-import { Text, View } from 'react-native';
+import React from 'react';
+import { SafeAreaView, Text } from 'react-native';
+import { styled } from 'nativewind';
 
-export default function App() {
-  
-  return (
-    <View className="flex-1 items-center justify-center bg-white">
-      <Text>Open up App.js to start working on your app!</Text>
-      <StatusBar style="auto" />
-    </View>
-  );
+const StyledSafeArea = styled(SafeAreaView);
+const StyledText = styled(Text);
 
-}
+export default function App() {
+    return (
+        <StyledSafeArea className='flex bg-white items-center justify-center'>
+            <StyledText className='text-black text-center text-lg p-4'>React Native Expo in TypeScript with Tailwind CSS</StyledText>
+        </StyledSafeArea>
+    );
+}

README.md

@@ -1,5 +1,3 @@
-
-
 <br />
 <div align="center">
 <br />
@@ -17,57 +15,68 @@
   </p>
 </div>
 
-
-
 [![Contributors][contributors-shield]][contributors-url]
 [![Forks][forks-shield]][forks-url]
 [![Stargazers][stars-shield]][stars-url]
 [![Issues][issues-shield]][issues-url]
 [![MIT License][license-shield]][license-url]
 
-
 <!-- GETTING STARTED -->
+
 ## Getting Started
 
 This is the instructions on setting up your project locally.
 To get a local copy up and running follow these simple example steps.
 
 ### Installation
 
-1. Install Expo CLI Global 
+1. Install Expo CLI Global
    ```sh
    npm install -g expo-cli
    ```
 2. Clone the repo
    ```sh
    git clone https://github.com/mashwishi/React-Native-Expo-with-TailwindCSS.git
    ```
-3. Install NPM packages 
+3. Install NPM packages
    ```sh
    yarn install
    ```
-4. Run on your terminal to test 
+4. Run on your Development Environment
+   - Windows with iPhone App (Expo Go) run
    ```sh
-   npx expo start
+   npx expo start --tunnel
    ```
+   - Windows/Mac with Android run
+   ```sh
+   npx expo start --android
+   ```
+   - Windows/Mac with Browser run
+   ```sh
+   npx expo start --web
+   ```
+   - Mac with iPhone run
+   ```sh
+   npx expo start --ios
+   ```
+   Tailwind (Nativewind Docs): https://www.nativewind.dev
 
 ### Built With
 
-This section list of major things that we used to this project. 
-
-* [![React Native][ReactNative]][ReactNative-url]
-* [![NativeWind][NativeWind]][NativeWind-url]
-* [![Tailwind][Tailwind]][Tailwind-url]
-* [![Expo][Expo]][Expo-url]
-* [![Typescript][Typescript]][Typescript-url]
-* [![Javascript][Javascript]][Javascript-url]
-* [![Yarn][Yarn]][Yarn-url]
+This section list of major things that we used to this project.
 
+- [![React Native][ReactNative]][ReactNative-url]
+- [![NativeWind][NativeWind]][NativeWind-url]
+- [![Tailwind][Tailwind]][Tailwind-url]
+- [![Expo][Expo]][Expo-url]
+- [![Typescript][Typescript]][Typescript-url]
+- [![Javascript][Javascript]][Javascript-url]
+- [![Yarn][Yarn]][Yarn-url]
 
 See the [open issues](https://github.com/mashwishi/kohee/issues) for a full list of proposed features (and known issues).
 
-
 <!-- CONTRIBUTING -->
+
 ## Contributing
 
 Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
@@ -83,6 +92,7 @@ Don't forget to give the project a star! Thanks again!
 
 <!-- MARKDOWN LINKS & IMAGES -->
 <!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
+
 [contributors-shield]: https://img.shields.io/github/contributors/mashwishi/React-Native-Expo-with-TailwindCSS.svg?style=for-the-badge
 [contributors-url]: https://github.com/mashwishi/React-Native-Expo-with-TailwindCSS/graphs/contributors
 [forks-shield]: https://img.shields.io/github/forks/mashwishi/React-Native-Expo-with-TailwindCSS.svg?style=for-the-badge
@@ -93,27 +103,17 @@ Don't forget to give the project a star! Thanks again!
 [issues-url]: https://github.com/mashwishi/React-Native-Expo-with-TailwindCSS/issues
 [license-shield]: https://img.shields.io/github/license/mashwishi/React-Native-Expo-with-TailwindCSS.svg?style=for-the-badge
 [license-url]: https://github.com/mashwishi/React-Native-Expo-with-TailwindCSS/blob/main/LICENSE
-
 [ReactNative]: https://img.shields.io/badge/React_Native-20232A?style=for-the-badge&logo=react&logoColor=61DAFB
 [ReactNative-url]: https://reactnative.dev/
-
 [NativeWind]: https://img.shields.io/badge/NativeWind-20232A?style=for-the-badge&logo=react&logoColor=61DAFB
 [NativeWind-url]: https://www.nativewind.dev/quick-starts/expo
-
 [Tailwind]: https://img.shields.io/badge/Tailwind-0EA5E9?style=for-the-badge&logo=TailwindCSS&logoColor=white
 [Tailwind-url]: https://tailwindcss.com/
-
 [Expo]: https://img.shields.io/badge/Expo-FFFFFF?style=for-the-badge&logo=Expo&logoColor=01001F
 [Expo-url]: https://expo.io/
-
 [Typescript]: https://img.shields.io/badge/Typescript-3178C6?style=for-the-badge&logo=Typescript&logoColor=FFFFFF
 [Typescript-url]: https://www.typescriptlang.org/
-
 [Javascript]: https://img.shields.io/badge/Javascript-EAD51C?style=for-the-badge&logo=Javascript&logoColor=01001F
 [Javascript-url]: https://youtu.be/dQw4w9WgXcQ
-
 [Yarn]: https://img.shields.io/badge/Yarn-2C8EBB?style=for-the-badge&logo=Yarn&logoColor=FFFFFF
 [Yarn-url]: https://classic.yarnpkg.com/lang/en/docs/install/
-
-
-

app.json

@@ -1,7 +1,7 @@
 {
   "expo": {
-    "name": "react-native-ts-app",
-    "slug": "react-native-ts-app",
+    "name": "react-native-expo-with-tailwindcss",
+    "slug": "react-native-expo-with-tailwindcss",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
@@ -11,9 +11,6 @@
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
-    "updates": {
-      "fallbackToCacheTimeout": 0
-    },
     "assetBundlePatterns": [
       "**/*"
     ],
@@ -23,7 +20,7 @@
     "android": {
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
-        "backgroundColor": "#FFFFFF"
+        "backgroundColor": "#ffffff"
       }
     },
     "web": {

babel.config.js

@@ -1,7 +1,7 @@
-module.exports = function(api) {
-  api.cache(true);
-  return {
-    presets: ['babel-preset-expo'],
-    plugins: ["nativewind/babel"],
-  };
+module.exports = function (api) {
+    api.cache(true);
+    return {
+        presets: ['babel-preset-expo'],
+        plugins: ['nativewind/babel'],
+    };
 };

global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

metro.config.js

@@ -0,0 +1,8 @@
+// metro.confgi.js
+const { getDefaultConfig } = require('expo/metro-config');
+
+const config = getDefaultConfig(__dirname, {
+    isCSSEnabled: true,
+});
+
+module.exports = config;