Add React Native app

Makefile

@@ -20,6 +20,12 @@ svelte: svelte/dist/*
 cleanSvelte:
 	rm -rf ./svelte/dist
 
+reactNative/dist/*: ./reactNative/* 
+	cd reactNative && npm install && npm run export
+reactNative: reactNative/dist/*
+cleanReactNative:
+	rm -rf ./reactNative/dist
+
 cleandist:
 	rm -rf dist
 dist: 
@@ -45,9 +51,12 @@ dist/svelte: dist svelte/dist/*
 dist/index.html: dist index.tmpl
 	go run server.go generate
 	mv index.html dist/
+dist/reactNative: dist reactNative/dist/*
+	rm -rf ./dist/reactNative && \
+		cp -r ./reactNative/dist ./dist/reactNative
 
-export: dist/vanillaJS dist/react dist/alpinejs dist/reactNextJS dist/assets dist/vuejs dist/svelte dist/index.html
-web: ./svelte/dist/* ./vuejs/dist/* ./reactNextJS/out/* vanillaJS/index.html react/index.html alpinejs/index.html
+export: dist/vanillaJS dist/react dist/alpinejs dist/reactNextJS dist/vuejs dist/svelte dist/index.html dist/reactNative
+web: ./reactNative/dist/* ./svelte/dist/* ./vuejs/dist/* ./reactNextJS/out/* vanillaJS/index.html react/index.html alpinejs/index.html
 build: web server.go
 	go build server.go
 run: web server.go

reactNative/.gitignore

@@ -0,0 +1,20 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store
+
+# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
+# The following patterns were generated by expo-cli
+
+expo-env.d.ts
+# @end expo-cli

reactNative/README.md

@@ -0,0 +1,50 @@
+# Welcome to your Expo app 👋
+
+This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+
+## Get started
+
+1. Install dependencies
+
+   ```bash
+   npm install
+   ```
+
+2. Start the app
+
+   ```bash
+    npx expo start
+   ```
+
+In the output, you'll find options to open the app in a
+
+- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
+- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
+- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
+- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
+
+You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
+
+## Get a fresh project
+
+When you're ready, run:
+
+```bash
+npm run reset-project
+```
+
+This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
+
+## Learn more
+
+To learn more about developing your project with Expo, look at the following resources:
+
+- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
+- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
+
+## Join the community
+
+Join our community of developers creating universal apps.
+
+- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
+- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.

reactNative/app.json

@@ -0,0 +1,37 @@
+{
+  "expo": {
+    "name": "reactNativeApp",
+    "slug": "reactNativeApp",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "scheme": "myapp",
+    "userInterfaceStyle": "automatic",
+    "splash": {
+      "image": "./assets/images/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "bundler": "metro",
+      "output": "static",
+      "favicon": "./assets/images/favicon.png"
+    },
+    "plugins": [
+      "expo-router"
+    ],
+    "experiments": {
+      "typedRoutes": true,
+      "baseUrl": "/reactNative"
+    }
+  }
+}

reactNative/app/_layout.tsx

@@ -0,0 +1,9 @@
+import { Stack } from "expo-router";
+
+export default function RootLayout() {
+  return (
+    <Stack>
+      <Stack.Screen name="index" options={{ title:'Hello World!'}}/>
+    </Stack>
+  );
+}

reactNative/app/index.tsx

@@ -0,0 +1,33 @@
+import { Text, View, Button } from "react-native";
+import React, {useState} from 'react';
+import { ThemedText } from "@/components/ThemedText"
+import Blurb, {BlurbData} from "@/components/Blurb"
+
+const default_blurb: BlurbData = {
+  title: "Fart Man Comes To Town!",
+  blurb: "Will this controversial figure finally cause the downfall of the town? Sally Smith from town center says that she can already smell trouble brewing but other members of the town believe the imminent winds of change will revitalize the towns central business district."
+};
+
+export default function Index() {
+  const [blurbs, setBlurbs] = useState([default_blurb])
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      {blurbs.map((blurb, i) => (
+        <Blurb key={i} {...blurb} />
+      ))}
+      <Button 
+        onPress={() => {
+          setBlurbs(blurbs.concat([default_blurb]));
+        }}
+        title="Load More"
+      />
+    </View>
+  );
+}
+

reactNative/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

reactNative/components/Blurb.jsx

@@ -0,0 +1,31 @@
+import React, {useState} from 'react';
+import {Text, StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  baseText: {
+    fontFamily: 'Cochin',
+  },
+  titleText: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+});
+
+type BlurbData = {
+  title: string;
+  blurb: string;
+}
+
+const Blurb = (props: BlurbData) => {
+    return(
+    <Text style={styles.baseText}>
+      <Text style={styles.titleText}>{props.title}</Text>
+      {'\n'}
+      {props.blurb}
+      {'\n'}
+      {'\n'}
+    </Text>
+  );
+}
+
+export default Blurb;

reactNative/constants/Colors.ts

@@ -0,0 +1,26 @@
+/**
+ * Below are the colors that are used in the app. The colors are defined in the light and dark mode.
+ * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
+ */
+
+const tintColorLight = '#0a7ea4';
+const tintColorDark = '#fff';
+
+export const Colors = {
+  light: {
+    text: '#11181C',
+    background: '#fff',
+    tint: tintColorLight,
+    icon: '#687076',
+    tabIconDefault: '#687076',
+    tabIconSelected: tintColorLight,
+  },
+  dark: {
+    text: '#ECEDEE',
+    background: '#151718',
+    tint: tintColorDark,
+    icon: '#9BA1A6',
+    tabIconDefault: '#9BA1A6',
+    tabIconSelected: tintColorDark,
+  },
+};

reactNative/hooks/useColorScheme.ts

@@ -0,0 +1 @@
+export { useColorScheme } from 'react-native';

reactNative/hooks/useColorScheme.web.ts

@@ -0,0 +1,8 @@
+// NOTE: The default React Native styling doesn't support server rendering.
+// Server rendered styles should not change between the first render of the HTML
+// and the first render on the client. Typically, web developers will use CSS media queries
+// to render different styles on the client and server, these aren't directly supported in React Native
+// but can be achieved using a styling library like Nativewind.
+export function useColorScheme() {
+  return 'light';
+}

reactNative/hooks/useThemeColor.ts

@@ -0,0 +1,22 @@
+/**
+ * Learn more about light and dark modes:
+ * https://docs.expo.dev/guides/color-schemes/
+ */
+
+import { useColorScheme } from 'react-native';
+
+import { Colors } from '@/constants/Colors';
+
+export function useThemeColor(
+  props: { light?: string; dark?: string },
+  colorName: keyof typeof Colors.light & keyof typeof Colors.dark
+) {
+  const theme = useColorScheme() ?? 'light';
+  const colorFromProps = props[theme];
+
+  if (colorFromProps) {
+    return colorFromProps;
+  } else {
+    return Colors[theme][colorName];
+  }
+}

reactNative/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "reactnativeapp",
+  "main": "expo-router/entry",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "expo start",
+    "export": "expo export",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "test": "jest --watchAll",
+    "lint": "expo lint"
+  },
+  "jest": {
+    "preset": "jest-expo"
+  },
+  "dependencies": {
+    "@expo/vector-icons": "^14.0.0",
+    "@react-navigation/native": "^6.0.2",
+    "expo": "~51.0.14",
+    "expo-constants": "~16.0.2",
+    "expo-font": "~12.0.7",
+    "expo-linking": "~6.3.1",
+    "expo-router": "~3.5.16",
+    "expo-splash-screen": "~0.27.5",
+    "expo-status-bar": "~1.12.1",
+    "expo-system-ui": "~3.0.6",
+    "expo-web-browser": "~13.0.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.74.2",
+    "react-native-gesture-handler": "~2.16.1",
+    "react-native-reanimated": "~3.10.1",
+    "react-native-safe-area-context": "4.10.1",
+    "react-native-screens": "3.31.1",
+    "react-native-web": "~0.19.10"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@types/jest": "^29.5.12",
+    "@types/react": "~18.2.45",
+    "@types/react-test-renderer": "^18.0.7",
+    "jest": "^29.2.1",
+    "jest-expo": "~51.0.1",
+    "react-test-renderer": "18.2.0",
+    "typescript": "~5.3.3"
+  },
+  "private": true
+}

reactNative/scripts/reset-project.js

@@ -0,0 +1,73 @@
+#!/usr/bin/env node
+
+/**
+ * This script is used to reset the project to a blank state.
+ * It moves the /app directory to /app-example and creates a new /app directory with an index.tsx and _layout.tsx file.
+ * You can remove the `reset-project` script from package.json and safely delete this file after running it.
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const root = process.cwd();
+const oldDirPath = path.join(root, 'app');
+const newDirPath = path.join(root, 'app-example');
+const newAppDirPath = path.join(root, 'app');
+
+const indexContent = `import { Text, View } from "react-native";
+
+export default function Index() {
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Text>Edit app/index.tsx to edit this screen.</Text>
+    </View>
+  );
+}
+`;
+
+const layoutContent = `import { Stack } from "expo-router";
+
+export default function RootLayout() {
+  return (
+    <Stack>
+      <Stack.Screen name="index" />
+    </Stack>
+  );
+}
+`;
+
+fs.rename(oldDirPath, newDirPath, (error) => {
+  if (error) {
+    return console.error(`Error renaming directory: ${error}`);
+  }
+  console.log('/app moved to /app-example.');
+
+  fs.mkdir(newAppDirPath, { recursive: true }, (error) => {
+    if (error) {
+      return console.error(`Error creating new app directory: ${error}`);
+    }
+    console.log('New /app directory created.');
+
+    const indexPath = path.join(newAppDirPath, 'index.tsx');
+    fs.writeFile(indexPath, indexContent, (error) => {
+      if (error) {
+        return console.error(`Error creating index.tsx: ${error}`);
+      }
+      console.log('app/index.tsx created.');
+
+      const layoutPath = path.join(newAppDirPath, '_layout.tsx');
+      fs.writeFile(layoutPath, layoutContent, (error) => {
+        if (error) {
+          return console.error(`Error creating _layout.tsx: ${error}`);
+        }
+        console.log('app/_layout.tsx created.');
+      });
+    });
+  });
+});

reactNative/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    ".expo/types/**/*.ts",
+    "expo-env.d.ts"
+  ]
+}

server.go

@@ -29,6 +29,9 @@ var alpineFiles embed.FS
 //go:embed "react"
 var reactFiles embed.FS
 
+//go:embed "all:reactNative/dist"
+var reactNativeFiles embed.FS
+
 type frontendInfo struct {
 	Name, Mountpoint string
 	Filesystem       fs.FS
@@ -39,6 +42,7 @@ var frontends = []frontendInfo{
 	{"Alpine.js", "/alpinejs/", getSubFS(alpineFiles, "alpinejs")},
 	{"React", "/react/", getSubFS(reactFiles, "react")},
 	{"React (Next)", "/reactNextJS/", getSubFS(nextFiles, "reactNextJS/out")},
+	{"React Native", "/reactNative/", getSubFS(reactNativeFiles, "reactNative/dist")},
 	{"Vue.js", "/vuejs/", getSubFS(vueFiles, "vuejs/dist")},
 	{"Svelte", "/svelte/", getSubFS(svelteFiles, "svelte/dist")},
 }