chore: migrate paper example to typescript

lottie-react-native · Feb 8, 2023 · 300e633 · 300e633
1 parent 65ec453
commit 300e633
Show file tree

Hide file tree

Showing 12 changed files with 520 additions and 375 deletions.
diff --git a/apps/fabric/ios/example.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist b/apps/fabric/ios/example.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>
diff --git a/apps/fabric/src/App.tsx b/apps/fabric/src/App.tsx
@@ -14,7 +14,7 @@ const remoteSource = {
 const localSource = require('./animations/LottieLogo1.json');
 
 const App = () => {
-  const [source, setSource] = React.useState<'local' | 'remote'>('local');
+  const [source, setSource] = React.useState<'local' | 'remote'>('remote');
   const [isLoop, setLoop] = React.useState(false);
 
   return (

diff --git a/apps/paper/package.json b/apps/paper/package.json
@@ -13,19 +13,24 @@
     "vssharp": "start windows/csharp/Example.sln"
   },
   "dependencies": {
-    "@react-native-community/slider": "^4.3.2",
+    "@react-native-community/slider": "^4.4.2",
     "@react-native-picker/picker": "^2.4.8",
     "lottie-react-native": "workspace:*",
     "react": "18.2.0",
     "react-native": "0.71.0",
-    "react-native-dropdown-picker": "^5.4.2",
+    "react-native-dropdown-picker": "^5.4.4",
     "react-native-windows": "0.71.0"
   },
   "devDependencies": {
     "@babel/core": "^7.19.3",
     "@babel/runtime": "^7.19.4",
     "@react-native-community/eslint-config": "3.1.0",
+    "@tsconfig/react-native": "^2.0.3",
+    "@types/jest": "^29.4.0",
+    "@types/react": "^18.0.27",
+    "@types/react-test-renderer": "^18.0.0",
     "eslint": "^8.25.0",
-    "metro-react-native-babel-preset": "^0.72.3"
+    "metro-react-native-babel-preset": "^0.72.3",
+    "typescript": "^4.9.5"
   }
 }
diff --git a/apps/paper/src/ExamplePicker.js b/apps/paper/src/ExamplePicker.js
diff --git a/apps/paper/src/ExamplePicker.tsx b/apps/paper/src/ExamplePicker.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import {Platform} from 'react-native';
+import {Picker} from '@react-native-picker/picker';
+import {Example} from './utils';
+
+interface Props {
+  example: Example;
+  onChange: (example: Example) => void;
+  examples: Example[];
+}
+
+export const ExamplePicker = ({example, examples, onChange}: Props) => {
+  return (
+    <Picker
+      selectedValue={example}
+      onValueChange={onChange}
+      style={{
+        marginBottom: Platform.select({
+          ios: -30,
+          android: 0,
+        }),
+      }}>
+      {examples.map(ex => (
+        <Picker.Item key={ex.name} label={ex.name} value={ex} />
+      ))}
+    </Picker>
+  );
+};