Initial commit

.eslintignore

@@ -0,0 +1 @@
+metro.config.js

.eslintrc.js

@@ -0,0 +1,12 @@
+// https://docs.expo.dev/guides/using-eslint/
+module.exports = {
+  extends: ['expo', 'prettier', 'eslint:recommended'],
+  plugins: ['prettier', '@typescript-eslint'],
+  parser: '@typescript-eslint/parser',
+  rules: {
+    // add project-specific linting rules here
+    'prettier/prettier': 'error',
+    '@typescript-eslint/no-explicit-any': 'warn',
+    '@typescript-eslint/no-shadow': 'error',
+  },
+};

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.github/pull_request_template.md

@@ -0,0 +1,35 @@
+## What's new in this PR
+### Description
+[//]: # "Required - Describe what's new in this PR in a few lines. A description and bullet points for specifics will suffice."
+
+
+
+### Screenshots
+[//]: # "Required for frontend changes, otherwise optional but strongly recommended. Add screenshots of expected behavior - GIFs if you're feeling fancy! Use the provided image template. Drag the desired image into the PR, then copy the link into the placeholder."
+
+[image placeholder]: <img src="place image link here!!!" width="240" height="540">
+
+
+
+## How to review
+[//]: # 'Required - Describe the order in which to review files and what to expect when testing locally. Is there anything specifically you want feedback on? Should this be reviewed commit by commit, or all at once? What are some user flows to test? What are some edge cases to look out for?'
+
+
+
+## Next steps
+[//]: # "Optional - What's NOT in this PR, doesn't work yet, and/or still needs to be done. Note any temporary fixes in this PR that should be cleaned up later."
+
+
+
+## Relevant links
+### Online sources
+[//]: # 'Copy links to any tutorials or documentation that was useful to you when working on this PR'
+
+
+
+### Related PRs
+[//]: # "Add related PRs you're waiting on/ PRs that will conflict, etc; if this is a refactor, feel free to add PRs that previously modified this code"
+
+
+
+CC: @insert pl github username here

.github/workflows/lint.yml

@@ -0,0 +1,56 @@
+---
+name: Lint
+
+#############################
+# Start the job on push #
+#############################
+on:
+  push:
+    branches-ignore: [main]
+  pull_request:
+    branches: [main]
+
+###############
+# Set the Job #
+###############
+jobs:
+  build:
+    # Name the Job
+    name: Run ESLint, Prettier, and TypeScript compiler
+    # Set the agent to run on
+    runs-on: ubuntu-latest
+
+    ##################
+    # Load all steps #
+    ##################
+    steps:
+      ##########################
+      # Checkout the code base #
+      ##########################
+      - name: Checkout Code
+        uses: actions/checkout@v4
+        with:
+          # Full git history is needed to get a proper
+          # list of changed files within `super-linter`
+          fetch-depth: 0
+
+      ################################
+      # Install packages #
+      ################################
+      - name: Install packages
+        run: npm ci
+      ################################
+      # Lint codebase #
+      ################################
+      - name: Run ESLint
+        run: npx eslint .
+      ################################
+      # Check Prettier on codebase #
+      ################################
+      - name: Run Prettier
+        run: npx prettier --check .
+      ################################
+      # Check for TypeScript errors #
+      ################################
+      - name: Run TypeScript compiler (tsc)
+        run: npx tsc --noEmit

.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

.husky/post-checkout

@@ -0,0 +1 @@
+npx yarnhook

.husky/post-merge

@@ -0,0 +1 @@
+npx yarnhook

.husky/post-rewrite

@@ -0,0 +1 @@
+npx yarnhook

.husky/pre-commit

@@ -0,0 +1 @@
+npm run pre-commit

.prettierignore

@@ -0,0 +1,3 @@
+# ignore formatting of the following markdown files
+README.md
+.github/pull_request_template.md

.prettierrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+  arrowParens: 'avoid',
+  bracketSameLine: false,
+  bracketSpacing: true,
+  printWidth: 80,
+  semi: true,
+  singleQuote: true,
+  trailingComma: 'all',
+  importOrder: [
+    '<TYPES>^(node:)',
+    '<TYPES>',
+    '<TYPES>^[.]',
+    '^react$',
+    '^react-native$',
+    '^expo$',
+    '^react[-/]{1}.*$',
+    '^react-native[-/]{1}.*$',
+    '^expo[-/]{1}.*',
+    '<BUILTIN_MODULES>',
+    '<THIRD_PARTY_MODULES>',
+    '^@/.*$',
+    '^~/.*$',
+    '^[.]',
+  ],
+  plugins: ['@ianvs/prettier-plugin-sort-imports'],
+};

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "editor.tabSize": 2,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.formatDocument": "explicit"
+  }
+}

App.tsx

@@ -0,0 +1,5 @@
+import AppNavigator from '@/navigation/AppNavigator';
+
+export default function App() {
+  return <AppNavigator />;
+}

README.md

@@ -0,0 +1,68 @@
+# Mobile Application Template
+
+### Overview
+
+This is a template for building mobile applications using an Expo and React-Native. It provides eslint, typescript, and prettier configs, as well as git hooks, github actions, and PR templates.
+
+**Note: This template is a work in progress. Code formatting configurations are opinionated and shouldn't be treated as truth.**
+
+### Navigation
+
+**As of 8/20/2024**, this repo does not have a navigation framework configured. The main navigation frameworks supported by Expo (previously used in Blueprint projects) are [React Navigation](https://reactnavigation.org/) and [Expo Router](https://docs.expo.dev/router/introduction/):
+
+1. (Preferred) React Navigation provides a **stack-based navigation model**, allowing screens to be pushed onto and popped out of a navigation stack. 
+    1. **NOTE: This framework provides more flexibility at the expense of more boilerplate code. However, being the more popular option, there is significant documentation and examples of mobile projects using React Navigation online.**
+2. Expo Router uses a **file-based router** for React Native and web applications. This framework allows applications to be accessible across platforms (iOS, Android, Web). When a file is added to the app directory, the file automatically becomes a route in your navigation. 
+    1. **NOTE: Expo Router is built on top of React Navigation and was released more recently. It may be easier to use out of the box, but it has rigid opinions regarding certain navigation features.**  
+
+### Backend
+
+**As of 8/20/2024**, this template is not connected to a backend framework. Blueprint projects typically use Supabase backend/databases. See past mobile projects for examples.
+
+---
+## Getting Started
+
+### Prerequisites
+
+Check your installation of `npm` and `node`:
+
+```sh
+node -v
+npm -v
+```
+
+We strongly recommend using a Node version manager like [nvm](https://github.com/nvm-sh/nvm) (for Mac) or [nvm-windows](https://github.com/coreybutler/nvm-windows) (for Windows) to install Node.js and npm. See [Downloading and installing Node.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
+
+### Installation
+
+1. Fork/copy the repo.
+    1. [GitHub: Cloning a Repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository#cloning-a-repository)
+    2. [GitHub: Generating SSH keys](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent)
+
+2. Install project dependencies. This command installs all packages from [`package.json`](package.json).
+      ```sh
+      npm install
+      ```
+3. [in progress...] Set up secrets 
+
+### Development environment
+
+- **[VSCode](https://code.visualstudio.com/) (recommended)**
+  1. Open the project in VSCode.
+  2. Install recommended workspace VSCode extensions. You should see a pop-up on the bottom right to "install the recommended extensions for this repository".
+
+### Running the app
+
+1. In the project directory, run:
+   ```shell
+    npx expo start
+   ```
+2. [Download Expo Go](https://docs.expo.dev/get-started/installation/#2-expo-go-app-for-android-and) on your phone, **connect to same network as your laptop**, and use your phone camera to scan the QR code displayed in the command line.
+
+### Development tools
+
+View the list of development scripts in the `package.json` file. Each script can be run through the terminal in the root of the project directory using the command below:
+
+```sh
+npm run <insert script name here>
+```

app.json

@@ -0,0 +1,28 @@
+{
+  "expo": {
+    "name": "mobile-app-template",
+    "slug": "mobile-app-template",
+    "owner": "mobileapptemplate",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/bp-icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/bp-splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/bp-adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/bp-favicon.png"
+    }
+  }
+}

babel.config.js

@@ -0,0 +1,20 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        'module-resolver',
+        {
+          root: ['./'],
+          alias: {
+            '@': './src',
+            '~': './',
+          },
+          include: ['./'],
+          extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
+        },
+      ],
+    ],
+  };
+};

graphics.d.ts

@@ -0,0 +1,25 @@
+declare module '*.png' {
+  import { ImageSourcePropType } from 'react-native';
+  const value: ImageSourcePropType;
+  export default value;
+}
+
+declare module '*.svg' {
+  import React from 'react';
+  import { SvgProps } from 'react-native-svg';
+
+  const content: React.FC<SvgProps>;
+  export default content;
+}
+
+declare module '*.jpg' {
+  import { ImageSourcePropType } from 'react-native';
+  const value: ImageSourcePropType;
+  export default value;
+}
+
+declare module '*.jpeg' {
+  import { ImageSourcePropType } from 'react-native';
+  const value: ImageSourcePropType;
+  export default value;
+}

metro.config.js

@@ -0,0 +1,21 @@
+const {
+  getDefaultConfig: getDefaultExpoConfig,
+} = require('@expo/metro-config');
+
+module.exports = (() => {
+  const config = getDefaultExpoConfig(__dirname);
+
+  const { transformer, resolver } = config;
+
+  config.transformer = {
+    ...transformer,
+    babelTransformerPath: require.resolve('react-native-svg-transformer'),
+  };
+  config.resolver = {
+    ...resolver,
+    assetExts: resolver.assetExts.filter(ext => ext !== 'svg'),
+    sourceExts: [...resolver.sourceExts, 'svg'],
+  };
+
+  return config;
+})();