chore: update example app to SDK 51

jamsch · Oct 13, 2024 · 111f6a7 · 111f6a7
1 parent 446e120
commit 111f6a7
Show file tree

Hide file tree

Showing 4 changed files with 1,672 additions and 1,878 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-20.11.1
+20.16.0
diff --git a/example/package.json b/example/package.json
@@ -9,17 +9,17 @@
     "web": "expo start --web"
   },
   "dependencies": {
-    "expo": "^49.0.21",
-    "expo-status-bar": "~1.6.0",
+    "expo": "^51.0.37",
+    "expo-status-bar": "~1.12.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.72.10",
-    "react-native-gesture-handler": "~2.12.0",
-    "react-native-reanimated": "~3.3.0",
-    "react-native-svg": "13.9.0"
+    "react-native": "0.74.5",
+    "react-native-gesture-handler": "~2.16.1",
+    "react-native-reanimated": "~3.10.1",
+    "react-native-svg": "15.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.7",
+    "@babel/core": "^7.24.0",
     "babel-plugin-module-resolver": "^4.1.0"
   },
   "private": true

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -5,8 +5,9 @@ import {
   StyleSheet,
   View,
   TextInput,
-  StyleProp,
-  ViewStyle,
+  type StyleProp,
+  type ViewStyle,
+  SafeAreaView,
 } from 'react-native';
 import {
   GestureHandlerRootView,
@@ -56,98 +57,100 @@ export default function App() {
 
   return (
     <GestureHandlerRootView style={styles.container}>
-      <ScrollView style={styles.container}>
-        <View style={[styles.optionsContainer, styles.mt20]}>
-          <View style={[styles.row, styles.wrap, styles.justifyCenter]}>
-            <CheckboxButton
-              title="Gridlines"
-              onPress={() => setShowGridLines((show) => !show)}
-              checked={showGridLines}
-            />
+      <SafeAreaView style={styles.container}>
+        <ScrollView style={styles.container}>
+          <View style={[styles.optionsContainer, styles.mt20]}>
+            <View style={[styles.row, styles.wrap, styles.justifyCenter]}>
+              <CheckboxButton
+                title="Gridlines"
+                onPress={() => setShowGridLines((show) => !show)}
+                checked={showGridLines}
+              />
 
-            <CheckboxButton
-              title="Character"
-              onPress={() => setShowCharacter((show) => !show)}
-              checked={showCharacter}
-            />
+              <CheckboxButton
+                title="Character"
+                onPress={() => setShowCharacter((show) => !show)}
+                checked={showCharacter}
+              />
 
-            <CheckboxButton
-              title="Outline"
-              onPress={() => setShowOutline((show) => !show)}
-              checked={showOutline}
-            />
+              <CheckboxButton
+                title="Outline"
+                onPress={() => setShowOutline((show) => !show)}
+                checked={showOutline}
+              />
+            </View>
           </View>
-        </View>
-        <HanziWriter
-          writer={writer}
-          loading={<Text>Loading...</Text>}
-          error={<Text>Error loading character</Text>}
-          style={styles.writerContainer}
-        >
-          {showGridLines && <HanziWriter.GridLines color="#ddd" />}
-          <HanziWriter.Svg>
-            {showOutline && <HanziWriter.Outline color="#ccc" />}
-            {showCharacter && (
-              <HanziWriter.Character color="#555" radicalColor="green" />
-            )}
-            <HanziWriter.QuizStrokes radicalColor="green" />
-            <HanziWriter.QuizMistakeHighlighter color="#539bf5" />
-          </HanziWriter.Svg>
-        </HanziWriter>
+          <HanziWriter
+            writer={writer}
+            loading={<Text>Loading...</Text>}
+            error={<Text>Error loading character</Text>}
+            style={styles.writerContainer}
+          >
+            {showGridLines && <HanziWriter.GridLines color="#ddd" />}
+            <HanziWriter.Svg>
+              {showOutline && <HanziWriter.Outline color="#ccc" />}
+              {showCharacter && (
+                <HanziWriter.Character color="#555" radicalColor="green" />
+              )}
+              <HanziWriter.QuizStrokes radicalColor="green" />
+              <HanziWriter.QuizMistakeHighlighter color="#539bf5" />
+            </HanziWriter.Svg>
+          </HanziWriter>
 
-        <View style={styles.optionsContainer}>
-          <View style={styles.row}>
-            <View>
-              <Text style={styles.heading}>QUIZ</Text>
-              <View style={styles.itemsStart}>
-                <CheckboxButton
-                  title="Backwards strokes"
-                  disabled={quizActive}
-                  onPress={() => setEnableBackwardsStrokes((state) => !state)}
-                  checked={enableBackwardsStrokes}
-                />
-                <Button
-                  disabled={animatorState === 'playing'}
-                  onPress={quizActive ? writer.quiz.stop : startQuiz}
-                  title={quizActive ? 'Stop Quiz' : 'Start Quiz'}
-                />
+          <View style={styles.optionsContainer}>
+            <View style={styles.row}>
+              <View>
+                <Text style={styles.heading}>QUIZ</Text>
+                <View style={styles.itemsStart}>
+                  <CheckboxButton
+                    title="Backwards strokes"
+                    disabled={quizActive}
+                    onPress={() => setEnableBackwardsStrokes((state) => !state)}
+                    checked={enableBackwardsStrokes}
+                  />
+                  <Button
+                    disabled={animatorState === 'playing'}
+                    onPress={quizActive ? writer.quiz.stop : startQuiz}
+                    title={quizActive ? 'Stop Quiz' : 'Start Quiz'}
+                  />
+                </View>
               </View>
-            </View>
-            <View style={styles.mlAuto}>
-              <Text style={[styles.heading, styles.textRight]}>ANIMATE</Text>
-              <View style={styles.row}>
-                <Button
-                  disabled={quizActive}
-                  onPress={() => {
-                    if (animatorState === 'playing') {
-                      writer.animator.cancelAnimation();
-                    } else {
-                      writer.animator.animateCharacter({
-                        delayBetweenStrokes: 800,
-                        strokeDuration: 500,
-                        onComplete() {
-                          console.log('Animation complete!');
-                        },
-                      });
+              <View style={styles.mlAuto}>
+                <Text style={[styles.heading, styles.textRight]}>ANIMATE</Text>
+                <View style={styles.row}>
+                  <Button
+                    disabled={quizActive}
+                    onPress={() => {
+                      if (animatorState === 'playing') {
+                        writer.animator.cancelAnimation();
+                      } else {
+                        writer.animator.animateCharacter({
+                          delayBetweenStrokes: 800,
+                          strokeDuration: 500,
+                          onComplete() {
+                            console.log('Animation complete!');
+                          },
+                        });
+                      }
+                    }}
+                    title={
+                      animatorState === 'playing'
+                        ? 'Stop animating'
+                        : 'Animate Strokes'
                     }
-                  }}
-                  title={
-                    animatorState === 'playing'
-                      ? 'Stop animating'
-                      : 'Animate Strokes'
-                  }
-                />
+                  />
+                </View>
               </View>
             </View>
+            <Text style={styles.heading}>LOAD CHARACTER</Text>
+            <TextInput
+              value={character}
+              onChangeText={setCharacter}
+              style={[styles.bgGrey, styles.p4, styles.m4, styles.rounded]}
+            />
           </View>
-          <Text style={styles.heading}>LOAD CHARACTER</Text>
-          <TextInput
-            value={character}
-            onChangeText={setCharacter}
-            style={[styles.bgGrey, styles.p4, styles.m4, styles.rounded]}
-          />
-        </View>
-      </ScrollView>
+        </ScrollView>
+      </SafeAreaView>
     </GestureHandlerRootView>
   );
 }