Add ESLint React plugin (#1412)

* Add eslint-plugin-react

* Enable display name rule

1 files changed, 43 insertions, 45 deletions

diff --git a/src/view/com/pager/Pager.web.tsx b/src/view/com/pager/Pager.web.tsx
index 7be2b11ec..fe4febbb7 100644
--- a/src/view/com/pager/Pager.web.tsx
+++ b/src/view/com/pager/Pager.web.tsx
@@ -14,51 +14,49 @@ interface Props {
   renderTabBar: RenderTabBarFn
   onPageSelected?: (index: number) => void
 }
-export const Pager = React.forwardRef(
-  (
-    {
-      children,
-      tabBarPosition = 'top',
-      initialPage = 0,
-      renderTabBar,
-      onPageSelected,
-    }: React.PropsWithChildren<Props>,
-    ref,
-  ) => {
-    const [selectedPage, setSelectedPage] = React.useState(initialPage)
+export const Pager = React.forwardRef(function PagerImpl(
+  {
+    children,
+    tabBarPosition = 'top',
+    initialPage = 0,
+    renderTabBar,
+    onPageSelected,
+  }: React.PropsWithChildren<Props>,
+  ref,
+) {
+  const [selectedPage, setSelectedPage] = React.useState(initialPage)
 
-    React.useImperativeHandle(ref, () => ({
-      setPage: (index: number) => setSelectedPage(index),
-    }))
+  React.useImperativeHandle(ref, () => ({
+    setPage: (index: number) => setSelectedPage(index),
+  }))
 
-    const onTabBarSelect = React.useCallback(
-      (index: number) => {
-        setSelectedPage(index)
-        onPageSelected?.(index)
-      },
-      [setSelectedPage, onPageSelected],
-    )
+  const onTabBarSelect = React.useCallback(
+    (index: number) => {
+      setSelectedPage(index)
+      onPageSelected?.(index)
+    },
+    [setSelectedPage, onPageSelected],
+  )
 
-    return (
-      <View>
-        {tabBarPosition === 'top' &&
-          renderTabBar({
-            selectedPage,
-            onSelect: onTabBarSelect,
-          })}
-        {React.Children.map(children, (child, i) => (
-          <View
-            style={selectedPage === i ? undefined : s.hidden}
-            key={`page-${i}`}>
-            {child}
-          </View>
-        ))}
-        {tabBarPosition === 'bottom' &&
-          renderTabBar({
-            selectedPage,
-            onSelect: onTabBarSelect,
-          })}
-      </View>
-    )
-  },
-)
+  return (
+    <View>
+      {tabBarPosition === 'top' &&
+        renderTabBar({
+          selectedPage,
+          onSelect: onTabBarSelect,
+        })}
+      {React.Children.map(children, (child, i) => (
+        <View
+          style={selectedPage === i ? undefined : s.hidden}
+          key={`page-${i}`}>
+          {child}
+        </View>
+      ))}
+      {tabBarPosition === 'bottom' &&
+        renderTabBar({
+          selectedPage,
+          onSelect: onTabBarSelect,
+        })}
+    </View>
+  )
+})