upgrade react-native 0.81.1

upgrade eslint 8 to 9

Author: testshallpass

.eslintignore

@@ -60,12 +60,12 @@ coverage/
 
 # Yarn
 example/.yarn/*
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/sdks
-!.yarn/versions
+.yarn/install-state.gz
+.yarn/patches
+.yarn/plugins
+.yarn/releases
+.yarn/sdks
+.yarn/versions
 
 # Expo
 example/.expo/

.eslintrc.js

@@ -15,18 +15,16 @@ npm-debug.log
 .npmignore
 .prettierignore
 .prettierrc.js
-.eslintignore
-.eslintrc.js
+eslint.config.mjs
 babel.config.js
 jest.config.js
 tsconfig.json
 .yarnrc.yml
 
 # Yarn
-example/.yarn/*
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/sdks
-!.yarn/versions
+.yarn/install-state.gz
+.yarn/patches
+.yarn/plugins
+.yarn/releases
+.yarn/sdks
+.yarn/versions

.gitignore

@@ -1,12 +1,10 @@
 node_modules/
-example/
 assets/
 coverage/
 .github/
 yarn.lock
 LICENSE
 .gitignore
 .npmignore
-.eslintignore
 tsconfig.json
 .yarnrc.yml

.npmignore

@@ -1,7 +1,5 @@
 module.exports = {
   arrowParens: 'avoid',
-  bracketSameLine: true,
-  bracketSpacing: false,
   singleQuote: true,
   trailingComma: 'all',
 };

.prettierignore

@@ -35,23 +35,23 @@
 
 ```javascript
 import React from 'react';
-import {Animated} from 'react-native';
+import { Animated } from 'react-native';
 import ThumbnailSelector from 'react-native-thumbnail-selector';
 
 const thumbnails = [
   {
     caption: 'react-native',
-    imageSrc: {uri: 'https://reactnative.dev/img/pwa/manifest-icon-512.png'},
+    imageSrc: { uri: 'https://reactnative.dev/img/pwa/manifest-icon-512.png' },
   },
   {
     caption: 'Dolore do magna ullamco nisi quis.',
-    imageSrc: {uri: 'https://reactnative.dev/img/pwa/manifest-icon-512.png'},
+    imageSrc: { uri: 'https://reactnative.dev/img/pwa/manifest-icon-512.png' },
   },
 ];
 
 function Example() {
   // use toggle to show and hide ThumbnailSelector
-  let toggle = () => new Promise<Animated.EndResult>(res => res);
+  let toggle = () => new Promise() < Animated.EndResult > (res => res);
 
   return (
     <ThumbnailSelector

.prettierrc.js

@@ -1,4 +1,4 @@
-import React, {useRef, useState} from 'react';
+import React from 'react';
 import {
   Text,
   FlatList,
@@ -58,14 +58,14 @@ const ThumbnailSelector: React.FunctionComponent<ThumbnailSelectorProps> = ({
   activeColor = 'white',
   inactiveColor = 'black',
   imageProps = {
-    style: {width: 136, height: 136, borderWidth: 1},
+    style: { width: 136, height: 136, borderWidth: 1 },
   },
   textProps = {
-    style: {fontSize: 16, textAlign: 'center', fontWeight: 'bold'},
+    style: { fontSize: 16, textAlign: 'center', fontWeight: 'bold' },
     numberOfLines: 1,
   },
   touchableOpacityProps = {
-    style: {padding: 8},
+    style: { padding: 8 },
   },
   animatedViewStyle = {
     elevation: 1,
@@ -80,14 +80,14 @@ const ThumbnailSelector: React.FunctionComponent<ThumbnailSelectorProps> = ({
     friction: 9,
     useNativeDriver: false,
   },
-  flatListViewStyle = {backgroundColor: 'grey', padding: 8},
+  flatListViewStyle = { backgroundColor: 'grey', padding: 8 },
   animatedViewTestID = 'ThumbnailSelector',
 }) => {
   const window = useWindowDimensions();
-  const [itemIndex, setItemIndex] = useState(initialIndex);
-  const [animViewHeight, setAnimViewHeight] = useState(0);
-  const animatedValue = useRef(new Animated.Value(0));
-  const toValue = useRef(animationConfig.toValue);
+  const [itemIndex, setItemIndex] = React.useState(initialIndex);
+  const [animViewHeight, setAnimViewHeight] = React.useState(0);
+  const animatedValue = React.useRef(new Animated.Value(0));
+  const toValue = React.useRef(animationConfig.toValue);
 
   function _toggle(): Promise<Animated.EndResult> {
     if (toValue.current) {
@@ -106,7 +106,7 @@ const ThumbnailSelector: React.FunctionComponent<ThumbnailSelectorProps> = ({
   }
 
   function _renderItem(obj: ThumbnailItemIndex): React.JSX.Element {
-    const {item, index} = obj;
+    const { item, index } = obj;
     if (renderThumbnail) {
       return renderThumbnail(item, index, onSelect);
     }
@@ -127,14 +127,15 @@ const ThumbnailSelector: React.FunctionComponent<ThumbnailSelectorProps> = ({
           if (onSelect) {
             onSelect(item, index);
           }
-        }}>
+        }}
+      >
         <Image
           {...imageProps}
-          style={[{borderColor: color}, imageProps.style]}
+          style={[{ borderColor: color }, imageProps.style]}
           source={item.imageSrc}
         />
         {caption && (
-          <Text {...textProps} style={[{color}, textProps.style]}>
+          <Text {...textProps} style={[{ color }, textProps.style]}>
             {caption}
           </Text>
         )}
@@ -143,7 +144,7 @@ const ThumbnailSelector: React.FunctionComponent<ThumbnailSelectorProps> = ({
   }
 
   function _onLayout(event: LayoutChangeEvent): void {
-    const {height} = event.nativeEvent.layout;
+    const { height } = event.nativeEvent.layout;
     if (animViewHeight !== height) {
       setAnimViewHeight(height);
     }
@@ -171,7 +172,8 @@ const ThumbnailSelector: React.FunctionComponent<ThumbnailSelectorProps> = ({
     <Animated.View
       testID={animatedViewTestID}
       style={_getAnimViewStyle()}
-      onLayout={_onLayout}>
+      onLayout={_onLayout}
+    >
       <FlatList
         style={flatListViewStyle}
         data={thumbnails}

README.md

@@ -1,12 +1,12 @@
-import React, {act} from 'react';
-import {Text} from 'react-native';
+import React, { act } from 'react';
+import { Text } from 'react-native';
 import {
   render,
   fireEvent,
   screen,
   cleanup,
 } from '@testing-library/react-native';
-import ThumbnailSelector, {ThumbnailItem} from '../ThumbnailSelector';
+import ThumbnailSelector, { ThumbnailItem } from '../ThumbnailSelector';
 
 describe('ThumbnailSelector', () => {
   afterEach(cleanup);
@@ -26,19 +26,19 @@ describe('ThumbnailSelector', () => {
   const thumbnails = [
     {
       caption: 'react-native',
-      imageSrc: {uri: 'https://reactnative.dev/img/tiny_logo.png'},
+      imageSrc: { uri: 'https://reactnative.dev/img/tiny_logo.png' },
     },
     {
       caption: 'New York City',
-      imageSrc: {uri: 'https://reactnative.dev/img/tiny_logo.png'},
+      imageSrc: { uri: 'https://reactnative.dev/img/tiny_logo.png' },
     },
     {
       caption:
         'Elit cupidatat qui ea deserunt reprehenderit sit velit eu aliqua incididunt sit elit reprehenderit.',
-      imageSrc: {uri: 'https://reactnative.dev/img/tiny_logo.png'},
+      imageSrc: { uri: 'https://reactnative.dev/img/tiny_logo.png' },
     },
     {
-      imageSrc: {uri: 'https://reactnative.dev/img/tiny_logo.png'},
+      imageSrc: { uri: 'https://reactnative.dev/img/tiny_logo.png' },
     },
   ];
 
@@ -56,7 +56,7 @@ describe('ThumbnailSelector', () => {
 
   test('onSelect prop', async () => {
     let toggle = () => {};
-    let onSelect = jest.fn();
+    const onSelect = jest.fn();
     const component = render(
       <ThumbnailSelector
         thumbnails={thumbnails}
@@ -107,11 +107,11 @@ describe('ThumbnailSelector', () => {
     expect(selector).toBeDefined();
 
     fireEvent(selector, 'layout', {
-      nativeEvent: {layout: {height: 0}},
+      nativeEvent: { layout: { height: 0 } },
     });
 
     fireEvent(selector, 'layout', {
-      nativeEvent: {layout: {height: 100}},
+      nativeEvent: { layout: { height: 100 } },
     });
   });
 

ThumbnailSelector.tsx

@@ -0,0 +1,27 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+import { defineConfig, globalIgnores } from 'eslint/config';
+
+export default defineConfig([
+  {
+    files: ['**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    plugins: { js },
+    extends: ['js/recommended'],
+    languageOptions: { globals: globals.browser },
+  },
+  tseslint.configs.recommended,
+  globalIgnores([
+    'node_modules/*',
+    'assets/*',
+    'coverage/*',
+    'yarn.lock',
+    'LICENSE',
+    '.gitignore',
+    '.npmignore',
+    '.prettierrc.js',
+    'yarnrc.yml',
+    'jest.config.js',
+    'babel.config.js',
+  ]),
+]);