From 4496b365738e9a486abd65cfe2cb0678fcbb9c5f Mon Sep 17 00:00:00 2001 From: Matthias Giger Date: Thu, 15 Aug 2024 22:03:48 +0200 Subject: [PATCH] feat(template): add Animations and Gestures to template Remove workaround to download template required in 0.75.0. release-npm --- package.json | 10 ++-- template-cache.ts | 6 +-- template/app/markup/Animation.tsx | 84 +++++++++++++++++++++++++++++++ template/app/markup/Gesture.tsx | 48 ++++++++++++++++++ template/app/package.json | 4 +- template/app/screen/Overview.tsx | 6 +++ template/app/screen/Settings.tsx | 6 +-- template/app/test/app.test.tsx | 2 +- template/app/tsconfig.json | 9 ++-- template/default/package.json | 2 +- 10 files changed, 155 insertions(+), 22 deletions(-) create mode 100644 template/app/markup/Animation.tsx create mode 100644 template/app/markup/Gesture.tsx diff --git a/package.json b/package.json index 9900c30..bc72e9b 100644 --- a/package.json +++ b/package.json @@ -28,10 +28,10 @@ }, "dependencies": { "@react-native-community/cli": "^14.0.0", - "@react-native/babel-preset": "^0.75.0", - "@react-native/eslint-config": "^0.75.0", - "@react-native/metro-config": "^0.75.0", - "@react-native/typescript-config": "^0.75.0", + "@react-native/babel-preset": "^0.75.1", + "@react-native/eslint-config": "^0.75.1", + "@react-native/metro-config": "^0.75.1", + "@react-native/typescript-config": "^0.75.1", "arg": "^5.0.2", "command-exists": "^1.2.9", "deepmerge": "^4.3.1", @@ -57,7 +57,7 @@ "@types/semver": "^7.5.8", "jest-fixture": "^4.1.0", "padua": "^4.0.1", - "react-native": "^0.75.0", + "react-native": "^0.75.1", "vitest": "^2.0.5" }, "peerDependencies": { diff --git a/template-cache.ts b/template-cache.ts index c39ad05..45bab91 100644 --- a/template-cache.ts +++ b/template-cache.ts @@ -3,7 +3,6 @@ import semverSort from 'semver-sort' import { rmSync, readdirSync, renameSync, existsSync, mkdirSync } from 'node:fs' import { join } from 'node:path' import { execSync } from 'node:child_process' -import { gte } from 'semver' import { log } from './helper' import { NativeOptions } from './types' @@ -44,7 +43,6 @@ export const cacheTemplate = (nativeOptions: NativeOptions) => { // DOC https://github.com/react-native-community/cli/blob/master/packages/cli/src/commands/init/index.ts try { - const separateTemplate = gte(nativeOptions.version, '0.75.0') const usesBun = typeof Bun !== 'undefined' execSync( @@ -52,9 +50,7 @@ export const cacheTemplate = (nativeOptions: NativeOptions) => { nativeOptions.appName } --skip-install --install-pods false --skip-git-init true --version ${ nativeOptions.version - } --directory "${join(directory, nativeOptions.appName)}"${ - separateTemplate ? ' --template @react-native-community/template' : '' - }${usesBun ? ' --pm bun' : ''}`, + } --directory "${join(directory, nativeOptions.appName)}"${usesBun ? ' --pm bun' : ''}`, { cwd: process.cwd(), encoding: 'utf8', diff --git a/template/app/markup/Animation.tsx b/template/app/markup/Animation.tsx new file mode 100644 index 0000000..4acf2a9 --- /dev/null +++ b/template/app/markup/Animation.tsx @@ -0,0 +1,84 @@ +import React, { LegacyRef, MutableRefObject, useEffect, useRef } from 'react' +import { Text, View, Animated } from 'react-native' +import { createStyles } from 'responsive-react-native' +import { Color, Space } from '../style' + +const styles = createStyles({ + wrapper: { + flexDirection: 'row', + gap: Space.medium, + }, + box: { + justifyContent: 'center', + padding: Space.medium, + borderRadius: Space.medium, + backgroundColor: Color.highlight, + }, + text: { + fontFamily: { ios: 'Courier', android: 'monospace' }, + }, +}) + +function animateNativeProps(view?: MutableRefObject) { + if (!view?.current) { + return null + } + + let opacity = 0 + let increasing = true + + return setInterval(() => { + if (increasing) { + opacity += 0.01 + if (opacity >= 1) { + increasing = false + } + } else { + opacity -= 0.01 + if (opacity <= 0) { + increasing = true + } + } + + view.current?.setNativeProps({ + style: { opacity }, + }) + }, 10) +} + +export function Animation() { + const firstBox = useRef() + const opacityValue = useRef(new Animated.Value(0)).current + + useEffect(() => { + const intervalId = animateNativeProps(firstBox) + + Animated.loop( + Animated.sequence([ + Animated.timing(opacityValue, { + toValue: 1, + duration: 1500, + useNativeDriver: true, + }), + Animated.timing(opacityValue, { + toValue: 0, + duration: 1500, + useNativeDriver: true, + }), + ]) + ).start() + + return () => (intervalId ? clearInterval(intervalId) : undefined) + }, [opacityValue]) + + return ( + + } style={styles.box}> + setNativeProps + + + Animated.Value + + + ) +} diff --git a/template/app/markup/Gesture.tsx b/template/app/markup/Gesture.tsx new file mode 100644 index 0000000..cc0b6fd --- /dev/null +++ b/template/app/markup/Gesture.tsx @@ -0,0 +1,48 @@ +import React, { LegacyRef, useRef } from 'react' +import { PanResponder, Text, View } from 'react-native' +import { createStyles } from 'responsive-react-native' +import { Color, Font, Space } from '../style' + +const styles = createStyles({ + wrapper: { + flexDirection: 'row', + gap: Space.medium, + }, + box: { + justifyContent: 'center', + padding: Space.medium, + borderRadius: Space.medium, + backgroundColor: Color.highlight, + }, +}) + +export function Gesture() { + const box = useRef() + const panResponder = React.useRef( + PanResponder.create({ + onStartShouldSetPanResponder: () => true, + onPanResponderMove: (_event, gestureState) => { + box.current?.setNativeProps({ + style: { + transform: [{ translateX: gestureState.dx }, { translateY: gestureState.dy }], + }, + }) + }, + onPanResponderRelease: () => { + box.current?.setNativeProps({ + style: { + transform: [{ translateX: 0 }, { translateY: 0 }], + }, + }) + }, + }) + ).current + + return ( + + } {...panResponder.panHandlers} style={styles.box}> + Drag around! + + + ) +} diff --git a/template/app/package.json b/template/app/package.json index f345e24..8afb6fb 100644 --- a/template/app/package.json +++ b/template/app/package.json @@ -15,9 +15,9 @@ "mobx": "^6.13.1", "mobx-react-lite": "^4.0.7", "react": "^18.3.1", - "react-native": "^0.75.0", + "react-native": "^0.75.1", "reactigation": "^4.0.3", - "responsive-react-native": "^1.0.5" + "responsive-react-native": "^1.0.6" }, "devDependencies": { "@testing-library/jest-native": "^5.4.3", diff --git a/template/app/screen/Overview.tsx b/template/app/screen/Overview.tsx index 19bcb96..50f8960 100644 --- a/template/app/screen/Overview.tsx +++ b/template/app/screen/Overview.tsx @@ -5,6 +5,8 @@ import { createStyles } from 'responsive-react-native' import { Screen } from '../markup/Screen' import { Button } from '../markup/Button' import { Header } from '../markup/Header' +import { Animation } from '../markup/Animation' +import { Gesture } from '../markup/Gesture' import { Label } from '../label' import logo from '../logo.png' import { Font, Space, Color } from '../style' @@ -36,6 +38,10 @@ export function Overview() { Welcome to numic! Running in {__DEV__ ? 'Debug' : 'Release'} Mode + Animations + + Gestures + ) } diff --git a/template/app/screen/Settings.tsx b/template/app/screen/Settings.tsx index 9bfc4d4..19fae4d 100644 --- a/template/app/screen/Settings.tsx +++ b/template/app/screen/Settings.tsx @@ -62,17 +62,17 @@ export const Settings = observer(() => { {translate('settingsLanguage', undefined, Data.language)} Data.setLanguage(Language.en)} /> Data.setLanguage(Language.es)} /> Data.setLanguage(Language.zh)} /> diff --git a/template/app/test/app.test.tsx b/template/app/test/app.test.tsx index e5d2fc6..16524d7 100644 --- a/template/app/test/app.test.tsx +++ b/template/app/test/app.test.tsx @@ -17,7 +17,7 @@ test('App renders without crashing.', async () => { title = app.getByLabelText(Label.screenTitle) expect(title).toHaveTextContent('Settings') // Switch language. - const spanishButton = app.getByText(readableLanguage[Language.es]) + const spanishButton = app.getByText(readableLanguage[Language.es].local) fireEvent.press(spanishButton) title = app.getByLabelText(Label.screenTitle) expect(title).toHaveTextContent('Ajustes') diff --git a/template/app/tsconfig.json b/template/app/tsconfig.json index e750666..500c354 100644 --- a/template/app/tsconfig.json +++ b/template/app/tsconfig.json @@ -1,8 +1,7 @@ { -"extends": "@react-native/typescript-config/tsconfig.json", -"compilerOptions": { - "module": "NodeNext", - "moduleResolution": "Bundler" -} + "extends": "@react-native/typescript-config/tsconfig.json", + "compilerOptions": { + "module": "ESNext" + } } \ No newline at end of file diff --git a/template/default/package.json b/template/default/package.json index 2b65513..699ecbe 100644 --- a/template/default/package.json +++ b/template/default/package.json @@ -12,7 +12,7 @@ }, "dependencies": { "react": "^18.3.1", - "react-native": "^0.75.0" + "react-native": "^0.75.1" }, "type": "module", "devDependencies": {