nextjs-nativewind 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Mawuko Senyo Hayibor
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,23 @@
+# nextjs-nativewind
+
+A **medium-weight Expo template** preconfigured with:
+
+- [Expo Router](https://expo.github.io/router) for file-based navigation
+- [NativeWind](https://www.nativewind.dev/) (Tailwind CSS for React Native)
+- [Expo Vector Icons](https://docs.expo.dev/guides/icons/) for icons
+- [React Native Reanimated](https://docs.expo.dev/versions/latest/sdk/reanimated/) for animations
+- A few other common Expo dependencies like `expo-constants`, `expo-linking`, `expo-status-bar`
+
+---
+
+## 🚀 Getting Started
+
+Create a new Expo app using this template:
+
+```bash
+npx create-expo-app my-app --template nextjs-nativewind
+
+
+
+---
+

package/app/_layout.jsx

@@ -0,0 +1,18 @@
+import "../global.css";
+import { Slot } from "expo-router";
+import { StyleSheet, Text, View } from "react-native";
+import NavBar from "../components/navBar";
+const RootLayout = () => {
+  return (
+    <View>
+      <View className="flex-1">
+        <Slot />
+        <NavBar />
+      </View>
+    </View>
+  );
+};
+
+export default RootLayout;
+
+const styles = StyleSheet.create({});

package/app/index.jsx

@@ -0,0 +1,21 @@
+import { Dimensions, StyleSheet, Text, View } from "react-native";
+
+
+const { width, height } = Dimensions.get("screen");
+
+const Home = () => {
+  return (
+    <View
+      className="justify-center items-center"
+      style={{ width: width, height: height }}
+    >
+      <View>
+        <Text className="text-gray-500">Welcome to the Home Page!</Text>
+      </View>
+    </View>
+  );
+};
+
+export default Home;
+
+const styles = StyleSheet.create({});

package/app/profile/index.jsx

@@ -0,0 +1,26 @@
+import { useLocalSearchParams } from "expo-router";
+import { Dimensions, StyleSheet, Text, View } from "react-native";
+
+const { width, height } = Dimensions.get("screen");
+const Profile = () => {
+  const { params } = useLocalSearchParams();
+  
+  return (
+    <View
+      className="justify-center items-center p-4 gap-4"
+      style={{ width: width, height: height }}
+    >
+      <Text className="text-gray-500">
+        Welcome to the Profile Page. This page is to show that the flie-based
+        routing works🥳🥳🥳
+      </Text>
+      <Text className="text-gray-500">
+        <Text className="font-bold">Passed Params:</Text> {params}
+      </Text>
+    </View>
+  );
+};
+
+export default Profile;
+
+const styles = StyleSheet.create({});

package/app.json

@@ -0,0 +1,34 @@
+{
+  "expo": {
+    "scheme": "{{{ projectName }}}",
+    "name": "{{{ projectName }}}",
+    "slug": "{{{ projectName }}}",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/msh.png",
+    "userInterfaceStyle": "light",
+    "newArchEnabled": true,
+    "splash": {
+      "image": "./assets/msh.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "edgeToEdgeEnabled": true
+    },
+    "web": {
+      "bundler": "metro",
+      "favicon": "./assets/favicon.png"
+    },
+    "plugins": [
+      "expo-router"
+    ]
+  }
+}

package/babel.config.js

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

package/components/navBar.jsx

@@ -0,0 +1,48 @@
+import { View, Text, TouchableOpacity, Dimensions } from "react-native";
+import AntDesign from "@expo/vector-icons/AntDesign";
+import { usePathname, useRouter } from "expo-router";
+const { width, height } = Dimensions.get("screen");
+const NavBar = () => {
+  const pathname = usePathname();
+  const router=useRouter()
+
+  const params="This is just to show how to pass parameters: Hello World" //Example parameter to be passed 
+
+  // handling onPress Routing
+  const handlePress=(path)=>{
+    router.push({pathname:path,params:{params:params}})
+  }
+
+
+  // Naming the pathnames
+  const homePathname = "/";
+  const profilePathname = "/profile";
+
+  return (
+    <View className="items-center">
+      <View
+        className="absolute bottom-16 flex-row justify-around items-center text-[#ccc9c9] bg-gray-700 border border-white p-4 rounded-full gap-4 shadow-2xl"
+        style={{ maxWidth: width, minWidth: width * 0.4 }}
+      >
+        <View>
+          <TouchableOpacity onPress={()=>handlePress("/")} className="justify-center items-center gap-1">
+            <AntDesign
+              name="home"
+              size={20}
+              color={pathname === homePathname ? "white":"#ccc9c9" }
+            />
+            <Text className={`${pathname===homePathname?"text-white":"text-[#ccc9c9]"} text-xs`}> Home</Text>
+          </TouchableOpacity>
+        </View>
+        <View>
+          <TouchableOpacity onPress={()=>handlePress("/profile")} className="justify-center items-center gap-1">
+            <AntDesign name="user" size={20} color={pathname === profilePathname ?"white": "#ccc9c9" } />
+            <Text className={`${pathname===profilePathname?"text-[#ccc9c9]":"text-white"} text-xs`}>  Profile</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default NavBar;

package/global.css

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

package/metro.config.js

@@ -0,0 +1,6 @@
+const { getDefaultConfig } = require("expo/metro-config");
+const { withNativeWind } = require('nativewind/metro');
+ 
+const config = getDefaultConfig(__dirname)
+ 
+module.exports = withNativeWind(config, { input: './global.css' })

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "nextjs-nativewind",
+  "version": "1.0.0",
+  "description": "Expo template with Expo Router (Next.js-style routing) and NativeWind preconfigured.",
+  "keywords": [
+    "expo",
+    "template",
+    "nativewind",
+    "nextjs",
+    "javascript"
+  ],
+  "main": "expo-router/entry",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@expo/vector-icons": "^15.0.0",
+    "expo": "~53.0.20",
+    "expo-constants": "~17.1.7",
+    "expo-linking": "~7.1.7",
+    "expo-router": "~5.1.4",
+    "expo-status-bar": "~2.2.3",
+    "nativewind": "^4.1.23",
+    "prettier-plugin-tailwindcss": "^0.5.14",
+    "react": "18.2.0",
+    "react-native": "0.79.5",
+    "react-native-reanimated": "~3.17.4",
+    "react-native-safe-area-context": "^5.4.0",
+    "react-native-screens": "~4.11.1",
+    "tailwindcss": "^3.4.17"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Harry-Daniel/nextjs-nativewind.git"
+  },
+  "author": {
+    "name": "Mawuko Senyo Hayibor",
+    "email": "hayiborkomla@gmail.com",
+    "url": "https://github.com/Harry-Daniel"
+  }
+}

package/tailwind.config.js

@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  // NOTE: Update this to include the paths to all files that contain Nativewind classes.
+  content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
+  presets: [require("nativewind/preset")],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}