feat:minor refactor + meta tags (#119)

Author: mohit23x

package.json

@@ -14,11 +14,13 @@
     "@react-native-async-storage/async-storage": "^1.15.5",
     "@react-native-community/slider": "^3.0.3",
     "@react-native-picker/picker": "^1.16.4",
+    "@types/react-helmet": "^6.1.3",
     "expo": "~41.0.1",
     "expo-clipboard": "^1.1.0",
     "expo-status-bar": "~1.0.4",
     "react": "16.13.1",
     "react-dom": "16.13.1",
+    "react-helmet": "^6.1.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
     "react-native-easing": "^1.0.1",
     "react-native-reanimated": "2.2.0",

src/components/AnimatedNumber.tsx

@@ -51,7 +51,7 @@ export const AnimatedNumber = ({ x }: Props) => {
   return <NativeText x={x} />;
 };
 
-const s = StyleSheet.create((theme, constants) => ({
+const s = StyleSheet.create((theme) => ({
   text: {
     color: theme.text,
     textAlign: 'right',

src/components/AnimationOptions.tsx

@@ -1,6 +1,6 @@
 import { P } from '@expo/html-elements';
 import * as React from 'react';
-import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
+import { View, ScrollView, TouchableOpacity } from 'react-native';
 import { ExampleKeyType } from 'src/constants';
 import { StyleSheet } from 'src/styles';
 

src/components/InputSection.tsx

@@ -37,13 +37,11 @@ const reducer = (
 export const InputSection = ({
   onPlay,
   state,
-  stopAnimation,
   handleChange,
   handleAnimationType,
 }: {
   state: StateType;
   onPlay: () => void;
-  stopAnimation: () => void;
   handleChange: (a: Partial<ConfigType>) => void;
   handleAnimationType: (a: AnimationTypes) => void;
 }) => {
@@ -98,8 +96,7 @@ export const InputSection = ({
 
       {state.animationType === 'spring' && (
         <WithSprings
-          config={state.config as 
-                 }
+          config={state.config as SpringConfigType}
           limit={LIMIT}
           step={Step}
           handleChange={handleChange}

src/components/Movement.tsx

@@ -18,7 +18,7 @@ export const Movement = ({ x, backgroundColor }: AnimationCompProps) => {
   );
 };
 
-const s = StyleSheet.create((theme, constants) => ({
+const s = StyleSheet.create((theme) => ({
   box: {
     height: [100, 150],
     width: [120, 200],

src/components/SettingModal.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, Image, Modal, Switch, Text, ScrollView } from 'react-native';
+import { View, Modal, Switch, Text, ScrollView } from 'react-native';
 import { ConfigType, LimitType } from 'src/constants';
 import { darkTheme, lightTheme, StyleSheet } from 'src/styles';
 import { Attribution } from './Attribution';

src/constants/index.tsx

@@ -18,7 +18,9 @@ export const DEFAULT_MAX_LIMIT = {
   mass: 5,
   stiffness: 300,
   velocity: 100,
-};
+} as const;
+
+export type LimitType = typeof DEFAULT_MAX_LIMIT;
 
 export const Step = {
   damping: 0.5,

src/screen/HomeScreen.tsx

@@ -21,8 +21,9 @@ import {
 } from 'src/constants';
 import { useTheme } from 'src/styles';
 import type { ActionTypes } from 'src/types';
+import { Helmet } from 'react-helmet';
 
-const reducer = (state: StateType, action: ActionTypes) => {
+const reducer = (state: StateType, action: ActionTypes): StateType => {
   switch (action.type) {
     case 'SET_ANIMATION':
       return {
@@ -76,12 +77,21 @@ export const HomeScreen = () => {
 
   return (
     <>
+      {Platform.OS === 'web' ? (
+        <Helmet>
+          <title>Reanimated 2 Config Visualizer</title>
+          <meta
+            name="description"
+            content="Reanimated 2 Config Visualizer works on expo and web made by mohit23x"
+          />
+        </Helmet>
+      ) : null}
+
       <Container>
         <InputSection
           onPlay={onPlay}
           state={state}
           handleChange={handleChange}
-          stopAnimation={stopAnimation}
           handleAnimationType={handleAnimationType}
         />
         <OutputSection x={x} stopAnimation={stopAnimation} />

yarn.lock

@@ -1798,6 +1798,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-helmet@^6.1.3":
+  version "6.1.3"
+  resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.1.3.tgz#1a58b26a79e464c59d3f9cdd5b7ece485335937b"
+  integrity sha512-U4onVxaZxAp78KpXsfmyCIhLjsvJJ3goG3CYFOo+xW0cPYAz9oe5cBAUSAcN7l35OTbrFvu9TuE0YkcZMKGr4A==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-native@~0.64.12":
   version "0.64.12"
   resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.64.12.tgz#1c6a3226c26d7a5949cdf8878e6cfe95fe0951d6"
@@ -5396,6 +5403,21 @@ [email protected]:
     prop-types "^15.6.2"
     scheduler "^0.19.1"
 
+react-fast-compare@^3.1.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+
+react-helmet@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
+  integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.1.1"
+    react-side-effect "^2.1.0"
+
 react-is@^16.12.0, react-is@^16.8.1, react-is@^16.8.4:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -5498,6 +5520,11 @@ react-refresh@^0.4.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.4.3.tgz#966f1750c191672e76e16c2efa569150cc73ab53"
   integrity sha512-Hwln1VNuGl/6bVwnd0Xdn1e84gT/8T9aYNL+HAKDArLCS7LWjwr7StE30IEYbIkx0Vi3vs+coQxe+SQDbGbbpA==
 
+react-side-effect@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.1.tgz#66c5701c3e7560ab4822a4ee2742dee215d72eb3"
+  integrity sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==
+
 [email protected]:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"