style: fix eslint

.eslintignore

@@ -0,0 +1,2 @@
+**/*.test.ts
+**/*.test.tsx

example/src/pages/TabBarExample.tsx

@@ -60,8 +60,8 @@ const TabBarExample: React.FC<TabBarExampleProps> = (props) => {
           color: 'grey',
           fontWeight: 'bold',
         }}
-        activeTextColor='red'
-        inactiveTextColor='green'
+        activeTextColor="red"
+        inactiveTextColor="green"
         tabBarItemStyle={{ backgroundColor: 'pink' }}
       />
       <TabBar

example/src/pages/TabViewExample.tsx

@@ -8,21 +8,18 @@ const tabs = ['tab1', 'tab2', 'this is tab3', 'tab5', '11', 'tab8', 'ta11'];
 
 const TabViewExample: React.FC<TabViewExampleProps> = (props) => {
   const {} = props;
-  
+
   return (
     <View style={styles.container}>
-      <TabView tabs={tabs} tabBarflex='equal-width'>
-        {
-          tabs.map((tab, index) => {
-            return (
-              <View key={index} style={{ flex: 1, backgroundColor: 'pink' }}>
-                <Text>{tab}</Text>
-                                <Text>{tab}</Text>
-
-              </View>      
-            )
-          })
-        }
+      <TabView tabs={tabs} tabBarflex="equal-width">
+        {tabs.map((tab, index) => {
+          return (
+            <View key={index} style={{ flex: 1, backgroundColor: 'pink' }}>
+              <Text>{tab}</Text>
+              <Text>{tab}</Text>
+            </View>
+          );
+        })}
       </TabView>
     </View>
   );

example/src/pages/WaterfallListExample.tsx

@@ -7,7 +7,6 @@ const { width } = Dimensions.get('window');
 interface WaterFallListExampleProps {}
 
 const WaterFallListExample: React.FC<WaterFallListExampleProps> = (props) => {
-  const {} = props;
   const [data, setData] = useState([]);
   const [status, setStatus] = useState<RefreshState>(RefreshState.Idle);
   const total = useRef(0);

package.json

@@ -9,8 +9,8 @@
     "test": "jest",
     "testc": "jest --coverage",
     "testu": "jest --updateSnapshot",
-    "lint": "eslint . --ext .ts,.tsx",
-    "lintfix": "eslint . --ext .ts,.tsx --fix"
+    "lint": "eslint ./src --ext .ts,.tsx",
+    "lintfix": "eslint ./src --ext .ts,.tsx --fix"
   },
   "keywords": [
     "react-native",

src/components/AnimatedNumber/ScrollNumber.tsx

@@ -7,7 +7,7 @@ import Animated, {
   withSpring,
 } from 'react-native-reanimated';
 
-const useNumber = (number: Number) => {
+const useNumber = (number: number) => {
   const numberList = String(number).split('');
   return numberList.map((item: string) => Number(item));
 };

src/components/Carousel/Carousel.tsx

@@ -288,6 +288,8 @@ const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
   );
 });
 
+Carousel.displayName = 'Carousel';
+
 const styles = StyleSheet.create({
   container: {
     backgroundColor: 'white',

src/components/Carousel/type.ts

@@ -39,7 +39,7 @@ export interface CarouselContextProps {
 }
 
 export interface CarouselProps {
-  dataSource: Array<any>;
+  dataSource: any[];
   renderItem: (item: any) => React.ReactNode;
   onScollStart?: () => void;
   onScollEnd?: (index: number) => void;
@@ -59,7 +59,7 @@ export interface CarouselDefaultOptions {
 }
 
 export interface CarouselDefaultProps {
-  dataSource: Array<any>;
+  dataSource: any[];
   renderItem: (item: any) => React.ReactNode;
   onScollStart?: () => void;
   onScollEnd?: (index: number) => void;
@@ -80,8 +80,8 @@ export interface CarouselRef {
 }
 
 export interface TurnRange {
-  inputRange: Array<number>;
-  outputRange: Array<number>;
+  inputRange: number[];
+  outputRange: number[];
 }
 
 export interface UseAutoScrollReturn {

src/components/Carousel/utils.ts

@@ -64,9 +64,7 @@ const useProps = (props: CarouselProps): CarouselDefaultProps => {
  * @param index current index
  * @returns TurnRange
  */
-const useRange = (
-  index: SharedValue<number>
-): DerivedValue<TurnRange> => {
+const useRange = (index: SharedValue<number>): DerivedValue<TurnRange> => {
   const range = useDerivedValue(() => {
     const inputRange = [
       index.value - MIN_TRIGGER_DISTANCE,

src/components/HeadTabView/HeadTabView.tsx

@@ -52,9 +52,8 @@ export const useHeadTab = () => React.useContext(HeadTabViewContext);
 const HEADER_HEIGHT = 100;
 
 const HeadTabView: React.FC<TabViewExampleProps> = (props) => {
-  const {} = props;
   const mainTranslate = useSharedValue(0); // 最外层View的Y方向偏移量
-  const [nativeRefs, setNativeRefs] = useState<Array<GestureTypeRef>>([]); // 子view里的scroll ref
+  const [nativeRefs, setNativeRefs] = useState<GestureTypeRef[]>([]); // 子view里的scroll ref
   const [currentIndex, setCurrentIndex] = useState(0);
 
   const main = useAnimatedProps(() => {

src/components/ImageViewer/ImageContainer.tsx

@@ -1,6 +1,9 @@
 import React, { useCallback, useRef } from 'react';
 import { TouchableOpacity, View } from 'react-native';
-import Animated, { useAnimatedStyle, SharedValue } from 'react-native-reanimated';
+import Animated, {
+  useAnimatedStyle,
+  SharedValue,
+} from 'react-native-reanimated';
 
 interface ImageContainerProps {
   children: React.ReactNode;

src/components/ImageViewer/ImageOverlay.tsx

@@ -254,6 +254,8 @@ const ImageOverlay = forwardRef<ImageOverlayRef, ImageOverlayProps>(
   }
 );
 
+ImageOverlay.displayName = 'ImageOverlay';
+
 const styles = StyleSheet.create({
   overlay: {
     ...StyleSheet.absoluteFillObject,

src/components/Overlay/Container/ScaleContainer.tsx

@@ -68,7 +68,12 @@ const ScaleContainer = forwardRef<ScaleContainerRef, ScaleContainerProps>(
 
     const scaleStyle = useAnimatedStyle(() => {
       return {
-        opacity: interpolate(scale.value, [0.5, 1], [0, 1], Extrapolation.CLAMP),
+        opacity: interpolate(
+          scale.value,
+          [0.5, 1],
+          [0, 1],
+          Extrapolation.CLAMP
+        ),
         transform: [
           {
             scale: scale.value,

src/components/Overlay/Overlay.tsx

@@ -72,7 +72,7 @@ interface ElementType {
 
 const Overlay = forwardRef<OverlayRef, OverlayProps>((props, ref) => {
   const { children } = props;
-  const elements = useRef<Array<ElementType>>([]); // all componets saved here
+  const elements = useRef<ElementType[]>([]); // all componets saved here
   const { forceUpdate } = useForceUpdate();
   const elementsIndex = useRef<number>(0);
   const { theme } = useTheme();
@@ -262,6 +262,8 @@ const Overlay = forwardRef<OverlayRef, OverlayProps>((props, ref) => {
   );
 });
 
+Overlay.displayName = 'Overlay';
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,

src/components/Overlay/RootViewAnimations.ts

@@ -1,6 +1,5 @@
-import { Dimensions, ImageStyle, TextStyle, ViewStyle } from 'react-native';
-import Animated, {
-  AnimatedProps,
+import { Dimensions } from 'react-native';
+import {
   Extrapolation,
   interpolate,
   SharedValue,
@@ -12,9 +11,7 @@ const addDeg = (deg: number): string => {
   return `${deg}deg`;
 };
 
-export const scaleAnimation = (
-  progress: SharedValue<number>
-) => {
+export const scaleAnimation = (progress: SharedValue<number>) => {
   'worklet';
   return {
     transform: [
@@ -49,9 +46,7 @@ export const translateXAnimation = (
   };
 };
 
-export const rotateXAnimation = (
-  progress: SharedValue<number>
-) => {
+export const rotateXAnimation = (progress: SharedValue<number>) => {
   'worklet';
   return {
     transform: [

src/components/PageView/PageView.tsx

@@ -185,12 +185,24 @@ const PageView = forwardRef<PageViewRef, PageViewProps>((props, ref) => {
           ]}
         >
           {React.Children.map(children, (child, index) => {
-            return <SinglePage contentSize={contentSize} currentIndex={currentIndex} index={index} lazy={lazy} lazyPreloadNumber={lazyPreloadNumber}>{child}</SinglePage>;
+            return (
+              <SinglePage
+                contentSize={contentSize}
+                currentIndex={currentIndex}
+                index={index}
+                lazy={lazy}
+                lazyPreloadNumber={lazyPreloadNumber}
+              >
+                {child}
+              </SinglePage>
+            );
           })}
         </Animated.View>
       </GestureDetector>
     </View>
   );
 });
 
+PageView.displayName = 'PageView';
+
 export default PageView;

src/components/PageView/SinglePage.tsx

@@ -1,38 +1,53 @@
 import { useState } from 'react';
 import { View } from 'react-native';
-import { SharedValue, runOnJS, useAnimatedReaction } from 'react-native-reanimated';
+import {
+  SharedValue,
+  runOnJS,
+  useAnimatedReaction,
+} from 'react-native-reanimated';
 
 interface SinglePageProps {
   children: React.ReactNode;
   contentSize: number;
-  currentIndex: SharedValue<number>
+  currentIndex: SharedValue<number>;
   index: number;
   lazy: boolean;
   lazyPreloadNumber: number;
 }
 
 const SinglePage: React.FC<SinglePageProps> = (props) => {
-  const { children, contentSize, currentIndex, index, lazy, lazyPreloadNumber } = props;
+  const {
+    children,
+    contentSize,
+    currentIndex,
+    index,
+    lazy,
+    lazyPreloadNumber,
+  } = props;
   const [load, setLoad] = useState(() => {
     if (!lazy) return true;
-    return index >= currentIndex.value - lazyPreloadNumber || index <= currentIndex.value + lazyPreloadNumber;
+    return (
+      index >= currentIndex.value - lazyPreloadNumber ||
+      index <= currentIndex.value + lazyPreloadNumber
+    );
   });
 
-  useAnimatedReaction(() => currentIndex.value, (value) => {
-    if (!lazy) return;
-    if (!!load) return;
-    const canLoad = index >= currentIndex.value - lazyPreloadNumber || index <= currentIndex.value + lazyPreloadNumber;
-    if (!canLoad) return;
-    runOnJS(setLoad)(canLoad);
-  });
+  useAnimatedReaction(
+    () => currentIndex.value,
+    (value) => {
+      if (!lazy) return;
+      if (!!load) return;
+      const canLoad =
+        index >= currentIndex.value - lazyPreloadNumber ||
+        index <= currentIndex.value + lazyPreloadNumber;
+      if (!canLoad) return;
+      runOnJS(setLoad)(canLoad);
+    }
+  );
 
   if (!children) return <View style={{ width: contentSize }} />;
 
-  return (
-    <View style={{ width: contentSize }}>
-      {!!load ? children : null}
-    </View>
-  );
+  return <View style={{ width: contentSize }}>{!!load ? children : null}</View>;
 };
 
 export default SinglePage;

src/components/Popover/PopoverContainer.tsx

@@ -90,6 +90,8 @@ const PopoverContainer = forwardRef<PopoverContainerRef, PopoverContainerProps>(
   }
 );
 
+PopoverContainer.displayName = 'PopoverContainer';
+
 const styles = StyleSheet.create({
   overlay: {
     ...StyleSheet.absoluteFillObject,

src/components/RefreshList/RefreshList.tsx

@@ -21,7 +21,7 @@ export enum RefreshState {
 }
 
 export interface RefreshListProps extends FlatListProps<any> {
-  data: Array<any>;
+  data: any[];
 
   refreshState: RefreshState;
   onHeaderRefresh?: () => void;

src/components/Segmented/Segmented.tsx

@@ -15,7 +15,7 @@ import Animated, {
 } from 'react-native-reanimated';
 
 interface SegmentedProps {
-  items: Array<string>;
+  items: string[];
 
   defaultIndex?: number;
   style?: ViewStyle;

src/components/Skeleton/Animation/Load.tsx

@@ -4,8 +4,6 @@ import { View, StyleSheet, ActivityIndicator } from 'react-native';
 interface LoadProps {}
 
 const Load: React.FC<LoadProps> = (props) => {
-  const {} = props;
-
   return (
     <View style={styles.mask}>
       <ActivityIndicator color="#1e90ff" />

src/components/Skeleton/Animation/ShineOver.tsx

@@ -12,7 +12,6 @@ const { width: Wwidth } = Dimensions.get('window');
 interface ShineOverProps {}
 
 const ShineOver: React.FC<ShineOverProps> = (props) => {
-  const {} = props;
   const { animationProgress } = useSkeletonStyle();
   const width = useSharedValue(Wwidth);
 

src/components/Skeleton/type.ts

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { ViewStyle } from 'react-native';
-import Animated, { SharedValue } from 'react-native-reanimated';
+import { SharedValue } from 'react-native-reanimated';
 import { Breath, Shine, Normal, Load, ShineOver } from './Animation';
 
 export const SkeletonContext = React.createContext<SkeletonContextProps>(

src/components/TabBar/TabBar.tsx

@@ -60,7 +60,7 @@ const TabBar = forwardRef<TabBarRef, TabBarProps>((props, ref) => {
 
   const syncCurrentIndex = (offset: number) => {
     const index = offset / contentSize;
-    currentIndex.value = index
+    currentIndex.value = index;
     sliderOffset.value = interpolate(index, intput, sliderOutput.current);
   };
 
@@ -163,7 +163,7 @@ const TabBar = forwardRef<TabBarRef, TabBarProps>((props, ref) => {
                   index={index}
                   currentIndex={currentIndex}
                   activeTextColor={activeTextColor}
-                  inactiveTextColor={inactiveTextColor}             
+                  inactiveTextColor={inactiveTextColor}
                   title={tab}
                   onLayout={onTabBarItemLayout}
                   onPress={handleOnPress}
@@ -191,6 +191,8 @@ const TabBar = forwardRef<TabBarRef, TabBarProps>((props, ref) => {
   );
 });
 
+TabBar.displayName = 'TabBar';
+
 const styles = StyleSheet.create({
   sliderContainer: {
     position: 'absolute',