updated typings (#118)

Author: mohit23x

src/components/Actions.tsx

@@ -19,7 +19,7 @@ export const Actions = ({
     alert('🎉🎉🎉copied!🎉🎉🎉');
   };
   return (
-    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+    <View style={s.row}>
       <View>
         <TouchableOpacity onPress={handleSetting} style={s.setting}>
           <SettingIcon fill={'#000'} height={30} width={30} />
@@ -36,6 +36,7 @@ export const Actions = ({
 };
 
 const s = StyleSheet.create((theme) => ({
+  row: { flexDirection: 'row', alignItems: 'center' },
   setting: {
     height: 50,
     paddingHorizontal: 15,

src/components/InputSection.tsx

@@ -8,9 +8,11 @@ import {
   AnimationTypes,
   ConfigType,
   DEFAULT_MAX_LIMIT,
+  SpringConfigType,
   SpringLimitType,
   StateType,
   Step,
+  TimingConfigType,
 } from 'src/constants';
 import { Tabs } from './Tabs';
 import { WithTiming } from './WithTiming';
@@ -88,15 +90,16 @@ export const InputSection = ({
       {state.animationType === 'timing' && (
         <WithTiming
           handleChange={handleChange}
-          config={state.config}
+          config={state.config as TimingConfigType}
           onPlay={onPlay}
           handleSetting={toggleModal}
         />
       )}
 
       {state.animationType === 'spring' && (
         <WithSprings
-          config={state.config}
+          config={state.config as 
+                 }
           limit={LIMIT}
           step={Step}
           handleChange={handleChange}

src/components/Tabs.tsx

@@ -5,7 +5,17 @@ import { AnimationTypes } from 'src/constants';
 import Timing from 'src/assets/Timing';
 import Spring from 'src/assets/Spring';
 
-const Chip = ({ title, onPress, active, Icon }) => {
+const Chip = ({
+  title,
+  onPress,
+  active,
+  Icon,
+}: {
+  title: string;
+  onPress: (...args: any) => any;
+  active: boolean;
+  Icon: typeof React.Component;
+}) => {
   const { theme } = StyleSheet;
 
   return (
@@ -47,12 +57,14 @@ export const Tabs = ({
         onPress={() => handleAnimationType('spring')}
         title="Spring"
         active={active === 'spring'}
+        // @ts-expect-error
         Icon={Spring}
       />
       <Chip
         onPress={() => handleAnimationType('timing')}
         title="Timing"
         active={active === 'timing'}
+        // @ts-expect-error
         Icon={Timing}
       />
     </View>
@@ -70,7 +82,6 @@ const s = StyleSheet.create((theme) => ({
   },
   headBox: {
     flex: 1,
-    // backgroundColor: 'red',
     textAlign: 'center',
     paddingVertical: 10,
     marginHorizontal: 3,
@@ -80,7 +91,6 @@ const s = StyleSheet.create((theme) => ({
     textAlign: 'center',
   },
   chipContainer: {
-    // borderWidth: 1,
     borderColor: theme.primary,
     marginRight: 15,
     borderRadius: 100,

src/components/WithSpring.tsx

@@ -16,6 +16,8 @@ export const WithSprings = ({
   config: SpringConfigType;
   limit: SpringLimitType;
   handleChange: (a: Partial<ConfigType>) => void;
+  onPlay: () => void;
+  handleSetting: () => void;
 }) => {
   const handleCopy = () => {
     Clipboard.setString(JSON.stringify(config));

src/components/WithTiming.tsx

@@ -5,12 +5,23 @@ import { camelCaseToNormal, isFunction } from 'src/utils';
 import { Slider } from './Slider';
 import { Select } from './Select';
 import { InputRenderer } from './InputRenderer';
+import { ConfigType, TimingConfigType } from 'src/constants';
 
 const withTimingData = Object.keys(EasingConfig).map((d) => {
   return { label: d, value: d };
 });
 
-export const WithTiming = ({ handleChange, config, onPlay, handleSetting }) => {
+export const WithTiming = ({
+  handleChange,
+  config,
+  onPlay,
+  handleSetting,
+}: {
+  config: TimingConfigType;
+  handleChange: (a: Partial<ConfigType>) => void;
+  onPlay: () => void;
+  handleSetting: () => void;
+}) => {
   const [ease, setEase] = React.useState('linear');
   const [numSlider, setNumSlider] = React.useState({ show: false, value: 2 });
 

src/screen/HomeScreen.tsx

@@ -39,7 +39,9 @@ const reducer = (state: StateType, action: ActionTypes) => {
 
 export const HomeScreen = () => {
   const x = useSharedValue(0);
-  const [state, dispatch] = useReducer(reducer, DefaultState);
+  const [state, dispatch] = useReducer<
+    (state: StateType, actions: ActionTypes) => StateType
+  >(reducer, DefaultState);
   useTheme();
 
   const handleChange = (payload: Partial<ConfigType>) => {
@@ -58,8 +60,10 @@ export const HomeScreen = () => {
   const onPlay = () => {
     cancelAnimation(x);
     if (state.animationType === 'timing') {
+      // @ts-expect-error
       x.value = withTiming(x.value === 0 ? 1 : 0, state.config);
     } else {
+      // @ts-expect-error
       x.value = withSpring(x.value === 0 ? 1 : 0, state.config);
     }
   };