feat(template): add template app that includes more features

release-npm

README.md

@@ -14,14 +14,15 @@ Utility to manage React Native projects. Commit only the changes made to native
 
 Run the following in your React Native project and it will automatically add the necessary configurations and commands to your `package.json`.
 
-```
+```sh
 npm install numic --save-dev --foreground-scripts --legacy-peer-deps
 ```
 
 This will also create fresh `/android` and `/ios` native folders and generate a patch if any changes are found. See [Migration of an Existing Project](#migration-of-an-existing-project) for more details. When **starting from scratch** the following will setup a React Native TypeScript installation with numic preinstalled and much of the default bloat removed.
 
-```
-npm init --yes now numic ./my-app
+```sh
+npm init --yes now numic ./my-app # Basic default template with tests.
+npm init --yea now numic ./my-starter-app app # Tempalte with navigation, data, responsive and styles.
 ```
 
 This will prompt for an app name that can only contain **alphanumeric** characters and will be used as the initial bundle identifier. Using `NumicApp` as the name will result in `com.numicapp` as the bundle identifier. The name as well as the display name can later be configured in `app.json`.

package.json

@@ -27,7 +27,7 @@
  }
  },
  "dependencies": {
- "@react-native/eslint-config": "^0.72.2",
+ "@react-native/eslint-config": "^0.73.1",
  "@tsconfig/react-native": "^3.0.2",
  "arg": "^5.0.2",
  "command-exists": "^1.2.9",
@@ -47,12 +47,12 @@
  },
  "devDependencies": {
  "@types/command-exists": "^1.2.1",
- "@types/prompts": "^2.4.4",
- "@types/semver": "^7.5.1",
+ "@types/prompts": "^2.4.5",
+ "@types/semver": "^7.5.3",
  "jest-fixture": "^4.1.0",
- "padua": "^2.0.3",
- "react-native": "^0.72.4",
- "vitest": "^0.34.3"
+ "padua": "^2.0.4",
+ "react-native": "^0.72.5",
+ "vitest": "^0.34.6"
  },
  "peerDependencies": {
  "react-native": ">= 0.69"
@@ -85,6 +85,6 @@
  "provenance": true
  },
  "engines": {
- "node": ">= 16"
+ "node": ">= 18"
  }
 }

template/app/App.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import Reactigation, { register } from 'reactigation'
+import { Overview } from './screen/Overview'
+import { Settings } from './screen/Settings'
+
+register(<Overview />, 'Overview')
+register(<Settings />, 'Settings')
+
+export const App = Reactigation

template/app/app.json

@@ -0,0 +1,4 @@
+{
+ "name": "<%= name %>",
+ "displayName": "<%= name %>"
+}

template/app/babel.config.cjs

@@ -0,0 +1,4 @@
+module.exports = {
+ // Preset still required for jest, but leads to JSX runtime errors in regular app.
+ presets: process.env.NODE_ENV === 'test' ? ['module:metro-react-native-babel-preset'] : [],
+}

template/app/data/Data.ts

@@ -0,0 +1,14 @@
+import { makeAutoObservable } from 'mobx'
+import { Language } from '../types'
+
+export const Data = new (class {
+ language = Language.English
+
+ constructor() {
+ makeAutoObservable(this, {}, { autoBind: true })
+ }
+
+ setLanguage(language: Language) {
+ this.language = language
+ }
+})()

template/app/global.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png' {
+ const value: import('react-native').ImageSourcePropType
+ export default value
+}

template/app/index.js

@@ -0,0 +1,5 @@
+import { AppRegistry } from 'react-native'
+import { App } from './App'
+import { name as appName } from './app.json'
+
+AppRegistry.registerComponent(appName, () => App)

template/app/label.ts

@@ -0,0 +1,5 @@
+export const Label = {
+ screenTitle: 'screen-title',
+ openSettingsButton: 'open-settings-button',
+ settingsBackButton: 'settings-back-button',
+}

template/app/markup/Button.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from 'react'
+import { Pressable, Text } from 'react-native'
+import { Styled } from 'responsive-react-native'
+import { Color, Font, Space } from '../style'
+
+const CustomPressable = Styled(
+ Pressable,
+ {
+ padding: Space.small,
+ borderRadius: Space.medium,
+ },
+ {
+ background: {
+ backgroundColor: Color.lightgray,
+ paddingVertical: Space.small,
+ paddingHorizontal: Space.medium,
+ },
+ pressed: {
+ backgroundColor: Color.gray,
+ },
+ }
+)
+
+export function Button({ title, onPress, background, ...props }: any) {
+ const [pressed, setPressed] = useState(false)
+
+ return (
+ <CustomPressable
+ background={background}
+ onPress={onPress}
+ onPressIn={() => setPressed(true)}
+ onPressOut={() => setPressed(false)}
+ pressed={pressed}
+ {...props}
+ >
+ <Text style={[Font.text, Font.bold, Font.interact, pressed && Font.highlight]}>{title}</Text>
+ </CustomPressable>
+ )
+}

template/app/markup/Header.tsx

@@ -0,0 +1,27 @@
+import React, { ReactNode } from 'react'
+import { Text, View } from 'react-native'
+import { createStyles } from 'responsive-react-native'
+import { Font } from '../style'
+import { Label } from '../label'
+
+const styles = createStyles({
+ wrapper: {
+ alignSelf: 'stretch',
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ },
+})
+
+export function Header({ title, children }: { title?: string; children: ReactNode }) {
+ return (
+ <View style={styles.wrapper}>
+ {title && (
+ <Text accessibilityLabel={Label.screenTitle} style={Font.title}>
+ {title}
+ </Text>
+ )}
+ {children}
+ </View>
+ )
+}

template/app/markup/Screen.tsx

@@ -0,0 +1,25 @@
+import React, { ReactNode } from 'react'
+import { SafeAreaView, StatusBar, View } from 'react-native'
+import { createStyles } from 'responsive-react-native'
+import { Color, Space } from '../style'
+
+const styles = createStyles({
+ safeArea: {
+ backgroundColor: Color.white,
+ flex: 1,
+ },
+ wrapper: {
+ padding: Space.large,
+ alignItems: 'center',
+ gap: Space.huge,
+ },
+})
+
+export function Screen({ children }: { children: ReactNode }) {
+ return (
+ <SafeAreaView style={styles.safeArea}>
+ <StatusBar barStyle="dark-content" backgroundColor="#FFFFFF" />
+ <View style={styles.wrapper}>{children}</View>
+ </SafeAreaView>
+ )
+}

template/app/package.json

@@ -0,0 +1,71 @@
+{
+ "name": "<%= name %>",
+ "scripts": {
+ "test": "jest"
+ },
+ "numic": {
+ "icon-numic-plugin": {
+ "androidForeground": "adaptive-icon.svg",
+ "androidBackgroundColor": "#e9e9e9"
+ },
+ "android-sdk-numic-plugin": {
+ "compileSdkVersion": 33,
+ "targetSdkVersion": 33
+ }
+ },
+ "dependencies": {
+ "mobx": "^6.10.2",
+ "mobx-react-lite": "^4.0.5",
+ "react": "^18.2.0",
+ "react-native": "^0.72.5",
+ "reactigation": "^4.0.1",
+ "responsive-react-native": "^1.0.1"
+ },
+ "devDependencies": {
+ "@react-native/eslint-config": "^0.73.1",
+ "@testing-library/jest-native": "^5.4.3",
+ "@testing-library/react-native": "^12.3.0",
+ "@tsconfig/react-native": "^3.0.2",
+ "@types/jest": "^29.5.5",
+ "@types/react-native": "^0.72.3",
+ "@typescript-eslint/eslint-plugin": "^6.7.3",
+ "@typescript-eslint/parser": "^6.7.3",
+ "android-sdk-numic-plugin": "^1.0.2",
+ "babel-jest": "^29.7.0",
+ "eslint": "^8.50.0",
+ "eslint-plugin-prettier": "^5.0.0",
+ "icon-numic-plugin": "^1.4.3",
+ "jest": "^29.7.0",
+ "metro-react-native-babel-preset": "^0.77.0",
+ "numic": "latest",
+ "react-test-renderer": "^18.2.0",
+ "typescript": "^5.2.2"
+ },
+ "type": "module",
+ "prettier": "./node_modules/numic/configuration/.prettierrc.json",
+ "eslintConfig": {
+ "extends": "./node_modules/numic/configuration/.eslintrc.json"
+ },
+ "metro": {},
+ "jest": {
+ "moduleFileExtensions": [
+ "ts",
+ "tsx",
+ "js",
+ "jsx",
+ "json",
+ "node"
+ ],
+ "moduleNameMapper": {
+ "react-dom": "react-native",
+ "\\.(png|jpg|ico|jpeg|gif|svg|woff|woff2|mp4)$": "<rootDir>/test/ImageMock.tsx"
+ },
+ "preset": "react-native",
+ "setupFilesAfterEnv": [
+ "@testing-library/jest-native/extend-expect"
+ ],
+ "transformIgnorePatterns": [
+ "node_modules/(?!react-native|@react-native|responsive-react-native|reactigation)"
+ ]
+ }
+}

template/app/screen/Overview.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { Text, Image } from 'react-native'
+import { go } from 'reactigation'
+import { createStyles } from 'responsive-react-native'
+import { Screen } from '../markup/Screen'
+import { Button } from '../markup/Button'
+import { Header } from '../markup/Header'
+import { Label } from '../label'
+import logo from '../logo.png'
+import { Font, Space, Color } from '../style'
+
+const styles = createStyles({
+ image: {
+ width: 100,
+ height: 100,
+ marginTop: Space.huge,
+ },
+ green: {
+ color: Color.highlight,
+ },
+})
+
+export function Overview() {
+ return (
+ <Screen>
+ <Header title="Overview">
+ <Button
+ background
+ accessibilityLabel={Label.openSettingsButton}
+ onPress={() => go('Settings')}
+ title="Settings"
+ />
+ </Header>
+ <Image style={styles.image} source={logo} />
+ <Text style={Font.title}>
+ Welcome to <Text style={Font.highlight}>numic</Text>!
+ </Text>
+ <Text style={Font.text}>Running in {__DEV__ ? 'Debug' : 'Release'} Mode</Text>
+ </Screen>
+ )
+}