Add react native directory (#678)

* Add react native directory

* Add to readme

* dockerize

* dockerize

* nvmrc file

* update doc

* update entry config

* update entry config

* add test and action

* remove versioning

* remove versioning

.github/workflows/native.yml

@@ -0,0 +1,49 @@
+name: native
+
+on:
+  push:
+    branches:
+      - main
+      - master
+  pull_request:
+    branches:
+      - main
+      - master
+
+jobs:
+  changes:
+    runs-on: ubuntu-latest
+    outputs:
+      backend: ${{ steps.filter.outputs.backend }}
+      native: ${{ steps.filter.outputs.native }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: dorny/paths-filter@v2
+        id: filter
+        with:
+          filters: |
+            backend:
+              - 'backend/**'
+              - '.github/workflows/**'
+            native:
+              - 'native/**'
+              - '.github/workflows/**'
+
+  test-app:
+    name: Test app
+    needs: changes
+    if: ${{ needs.changes.outputs.native == 'true' }}
+    runs-on: ubuntu-latest
+    timeout-minutes: 7
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: npm
+          cache-dependency-path: native/package-lock.json
+      - run: npm install -g npm
+      - run: npm install
+        working-directory: ./native
+      - run: npm run test
+        working-directory: ./native

README.md

@@ -59,6 +59,13 @@ cd frontend
 npm install
 ```
 
+### React Native
+
+```bash
+cd native
+npm install
+```
+
 ## Running / Development
 
 ### General
@@ -76,6 +83,19 @@ This will build and run all the containers necessary to run the application loca
 
 Visit your app at [http://localhost:4300](http://localhost:4300)
 
+
+### Docker (React Native)
+
+From the project root:
+
+```bash
+docker compose --profile dev native
+``` 
+
+This will build and run all the containers necessary to run the application locally.
+
+Visit your app at [http://localhost:19006](http://localhost:19006)
+
 ### Local Machine Installation
 
 From the project root:

docker-compose.yml

@@ -19,6 +19,7 @@ services:
     environment: *backend-services-hosts
     profiles:
       - dev
+      - native
   workers:
     build: backend
     command: bundle exec sidekiq -C config/sidekiq.yml
@@ -31,6 +32,7 @@ services:
     environment: *backend-services-hosts
     profiles:
       - dev
+      - native
   tunnel:
     build: backend
     command: bundle exec bin/localtunnel
@@ -53,6 +55,29 @@ services:
     command: sh -c "cd /app && rm -rfd ./dist && ./node_modules/.bin/ember serve --port 4300 --proxy http://backend:3000 --live-reload-host frontend --live-reload-port 65535"
     profiles:
       - dev
+  native: 
+    build:
+      context: ./native
+      args:
+        - NODE_ENV=development
+    environment:
+      - NODE_ENV=development
+    tty: true
+    ports:
+      - '19006:19006'
+      - '19001:19001'
+      - '19002:19002'
+    depends_on:
+      - backend
+    volumes:
+      - ./native:/opt/native/app:delegated
+      - ./native/package.json:/opt/native/package.json
+      - ./native/package-lock.json:/opt/native/package-lock.json
+      - notused:/opt/native/app/node_modules
+    healthcheck:
+      disable: true
+    profiles:
+      - native
   app-setup:
     build: backend
     command: bundle exec rails app:setup
@@ -87,3 +112,4 @@ volumes:
   postgres:
   mongodb:
   redis:
+  notused:

native/.dockerignore

@@ -0,0 +1,8 @@
+bower_components
+node_modules
+dist
+tmp
+.git
+README.md
+LICENSE
+.gitignore

native/.gitignore

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

native/.nvmrc

@@ -0,0 +1 @@
+v18.18.0

native/App.js

@@ -0,0 +1,20 @@
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View } from 'react-native';
+
+export default function App() {
+  return (
+    <View style={styles.container}>
+      <Text>Welcome to Flaredown</Text>
+      <StatusBar style="auto" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

native/App.test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import App from './App';
+
+describe('<App />', () => {
+  it('has 1 child', () => {
+    const tree = renderer.create(<App />).toJSON();
+    expect(tree.children.length).toBe(1);
+  });
+});

native/AppEntry.js

@@ -0,0 +1,5 @@
+import registerRootComponent from 'expo/build/launch/registerRootComponent';
+
+import App from './App';
+
+registerRootComponent(App);

native/Dockerfile

@@ -0,0 +1,33 @@
+# pull base image
+FROM node:18.18.0
+
+# set our node environment, either development or production
+# defaults to production, compose overrides this to development on build and run
+ARG NODE_ENV=production
+ENV NODE_ENV $NODE_ENV
+
+# default to port 19006 for node, and 19001 and 19002 (tests) for debug
+ARG PORT=19006
+ENV PORT $PORT
+EXPOSE $PORT 19001 19002
+
+# install global packages
+ENV NPM_CONFIG_PREFIX=/home/node/.npm-global
+ENV PATH /home/node/.npm-global/bin:$PATH
+RUN npm i --unsafe-perm --allow-root -g npm@latest expo-cli@latest
+
+# install dependencies first, in a different location for easier app bind mounting for local development
+# due to default /opt permissions we have to create the dir with root and change perms
+RUN mkdir /opt/native
+WORKDIR /opt/native
+ENV PATH /opt/native/.bin:$PATH
+COPY ./package.json ./package-lock.json ./
+RUN npm install
+
+# copy in our source code last, as it changes the most
+WORKDIR /opt/native/app
+# for development, we bind mount volumes; comment out for production
+COPY . .
+
+ENTRYPOINT ["npm", "run"]
+CMD ["web"]

native/app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "native",
+    "slug": "native",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

native/babel.config.js

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