chore: update eslint

.eslintignore

@@ -7,3 +7,6 @@ testSetup.js
 
 # generated by bob
 lib/
+
+# babel files
+src/babel

.eslintrc

@@ -3,9 +3,7 @@
     "browser": true
   },
 
-  "extends": ["@callstack"],
-
-  "plugins": ["react-native"],
+  "extends": "@callstack",
 
   "rules": {
     "one-var": "off",
@@ -16,10 +14,39 @@
 
     "import/no-extraneous-dependencies": "off",
     "import/first": "off",
+    "import/order": [
+      "error",
+      {
+        "groups": [
+          ["external", "builtin"],
+          "internal",
+          ["sibling", "parent"],
+          "index"
+        ],
+        "pathGroups": [
+          {
+            "pattern": "@(react|react-native)",
+            "group": "external",
+            "position": "before"
+          },
+          {
+            "pattern": "@src/**",
+            "group": "internal"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": ["internal", "react"],
+        "newlines-between": "always",
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
+      }
+    ],
 
     "react-native/no-unused-styles": "error",
     "react-native/split-platform-components": "off",
-    "react-native/no-raw-text": "off"
+    "react-native/no-raw-text": "off",
+    "react-native-a11y/has-valid-accessibility-descriptors": "off"
   },
 
   "settings": {

docs/component-docs.config.js

@@ -1,7 +1,7 @@
 /* @flow */
 
-import path from 'path';
 import fs from 'fs';
+import path from 'path';
 
 const root = path.join(__dirname, '..');
 const dist = path.join(__dirname, 'dist');

docs/pages/0.index.js

@@ -1,6 +1,7 @@
 /* @flow */
 
 import * as React from 'react';
+
 import Home from './src/Home';
 
 export default class Index extends React.Component<{}> {

docs/pages/6.showcase.js

@@ -1,6 +1,7 @@
 /* @flow */
 
 import * as React from 'react';
+
 import Showcase from './src/Showcase';
 
 export default class ShowcasePage extends React.Component<{}> {

docs/pages/src/Home.js

@@ -2,8 +2,10 @@
 /* eslint-disable import/no-commonjs */
 
 import * as React from 'react';
-import { styled } from 'linaria/react';
+
 import { Link, Header } from 'component-docs/components';
+import { styled } from 'linaria/react';
+
 import ThemeIcon from '../../components/theme-icon';
 import Content from './components/Content';
 

docs/pages/src/Showcase.js

@@ -1,14 +1,15 @@
 /* @flow */
 
 import * as React from 'react';
-import { styled } from 'linaria/react';
+
 import color from 'color';
 import { Header } from 'component-docs/components';
+import { styled } from 'linaria/react';
 
+import GithubIcon from '../../components/github-icon';
 import GooglePlayIcon from '../../components/google-play-icon';
 import IphoneIcon from '../../components/iphone-icon';
 import Content from './components/Content';
-import GithubIcon from '../../components/github-icon';
 
 type Data = {
   color: string,
@@ -190,7 +191,11 @@ export default class Showcase extends React.Component<{}> {
               return (
                 <div key={item.image}>
                   <ImageContainer>
-                    <Image src={item.image} alt="" />
+                    <Image
+                      src={item.image}
+                      alt=""
+                      accessibilityIgnoresInvertColors
+                    />
                     <Info style={{ backgroundColor: item.color }}>
                       <AppName
                         style={{

docs/pages/src/components/IconsList.js

@@ -1,6 +1,7 @@
 /* @flow */
 
 import * as React from 'react';
+
 import { styled } from 'linaria/react';
 import icons from 'react-native-vector-icons/glyphmaps/MaterialCommunityIcons.json';
 

example/.eslintrc

@@ -2,7 +2,7 @@
   "extends": "../.eslintrc",
 
   "settings": {
-    "import/core-modules": [ "react-native-paper" ]
+    "import/core-modules": ["react-native-paper"]
   },
 
   "rules": {

example/babel.config.js

@@ -1,4 +1,5 @@
 const path = require('path');
+
 const pak = require('../package.json');
 
 module.exports = function (api) {

example/metro.config.js

@@ -1,8 +1,9 @@
 // /* eslint-disable import/no-commonjs */
 
-const path = require('path');
-const blacklist = require('metro-config/src/defaults/exclusionList');
 const escape = require('escape-string-regexp');
+const blacklist = require('metro-config/src/defaults/exclusionList');
+const path = require('path');
+
 const pak = require('../package.json');
 
 const root = path.resolve(__dirname, '..');

example/src/DrawerItems.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { View, StyleSheet, I18nManager } from 'react-native';
+
 import { DrawerContentScrollView } from '@react-navigation/drawer';
+import * as Updates from 'expo-updates';
 import {
   Badge,
   Drawer,
@@ -11,8 +13,9 @@ import {
   useTheme,
   MD3Colors,
 } from 'react-native-paper';
-import * as Updates from 'expo-updates';
+
 import { isWeb } from '../utils';
+
 import { PreferencesContext } from './';
 
 type Props = {

example/src/ExampleList.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { FlatList } from 'react-native';
+
+import type { StackNavigationProp } from '@react-navigation/stack';
 import { List, Divider, useTheme } from 'react-native-paper';
 import { useSafeArea } from 'react-native-safe-area-context';
-import type { StackNavigationProp } from '@react-navigation/stack';
 
 import ActivityIndicatorExample from './Examples/ActivityIndicatorExample';
+import AnimatedFABExample from './Examples/AnimatedFABExample';
 import AppbarExample from './Examples/AppbarExample';
 import AvatarExample from './Examples/AvatarExample';
 import BadgeExample from './Examples/BadgeExample';
@@ -27,18 +29,17 @@ import MenuExample from './Examples/MenuExample';
 import ProgressBarExample from './Examples/ProgressBarExample';
 import RadioButtonExample from './Examples/RadioButtonExample';
 import RadioButtonGroupExample from './Examples/RadioButtonGroupExample';
+import RadioButtonItemExample from './Examples/RadioButtonItemExample';
 import SearchbarExample from './Examples/SearchbarExample';
+import SegmentedButtonExample from './Examples/SegmentedButtonsExample';
 import SnackbarExample from './Examples/SnackbarExample';
 import SurfaceExample from './Examples/SurfaceExample';
 import SwitchExample from './Examples/SwitchExample';
 import TextExample from './Examples/TextExample';
 import TextInputExample from './Examples/TextInputExample';
+import ThemeExample from './Examples/ThemeExample';
 import ToggleButtonExample from './Examples/ToggleButtonExample';
 import TouchableRippleExample from './Examples/TouchableRippleExample';
-import ThemeExample from './Examples/ThemeExample';
-import RadioButtonItemExample from './Examples/RadioButtonItemExample';
-import AnimatedFABExample from './Examples/AnimatedFABExample';
-import SegmentedButtonExample from './Examples/SegmentedButtonsExample';
 
 export const examples: Record<
   string,

example/src/Examples/ActivityIndicatorExample.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
+
 import {
   ActivityIndicator,
   MD2Colors,
   FAB,
   useTheme,
   MD3Colors,
 } from 'react-native-paper';
+
 import ScreenWrapper from '../ScreenWrapper';
 
 const ActivityIndicatorExample = () => {

example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { View, StyleSheet, FlatList, Animated, Platform } from 'react-native';
 import type { NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
+
 import {
   MD2Colors,
   MD3Colors,
@@ -10,6 +11,7 @@ import {
   Text,
 } from 'react-native-paper';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+
 import { animatedFABExampleData } from '../../../utils';
 import CustomFAB from './CustomFAB';
 import CustomFABControls, {

example/src/Examples/AnimatedFABExample/CustomFAB.tsx

@@ -6,6 +6,7 @@ import {
   StyleSheet,
   Platform,
 } from 'react-native';
+
 import { AnimatedFAB, useTheme } from 'react-native-paper';
 
 type CustomFABProps = {

example/src/Examples/AnimatedFABExample/CustomFABControls.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import { StyleSheet, View, FlatList } from 'react-native';
-import { Paragraph, RadioButton, Text, useTheme } from 'react-native-paper';
+
+import { TouchableOpacity } from 'react-native-gesture-handler';
 import type {
   AnimatedFABAnimateFrom,
   AnimatedFABIconMode,
 } from 'react-native-paper';
-import { TouchableOpacity } from 'react-native-gesture-handler';
+import { Paragraph, RadioButton, Text, useTheme } from 'react-native-paper';
 
 export type Controls = {
   iconMode: AnimatedFABIconMode;
@@ -45,6 +46,7 @@ const CustomControl = ({
 
       return (
         <TouchableOpacity
+          accessibilityRole="button"
           onPress={() => onChange(item)}
           style={styles.controlItem}
         >

example/src/Examples/AppbarExample.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { View, Platform, StyleSheet } from 'react-native';
+
 import type { StackNavigationProp } from '@react-navigation/stack';
 import {
   Appbar,
@@ -11,10 +12,11 @@ import {
   RadioButton,
   List,
 } from 'react-native-paper';
-import ScreenWrapper from '../ScreenWrapper';
-import { yellowA200 } from '../../../src/styles/themes/v2/colors';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import { yellowA200 } from '../../../src/styles/themes/v2/colors';
+import ScreenWrapper from '../ScreenWrapper';
+
 type Props = {
   navigation: StackNavigationProp<{}>;
 };

example/src/Examples/AvatarExample.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
+
 import {
   Avatar,
   List,
   MD2Colors,
   MD3Colors,
   useTheme,
 } from 'react-native-paper';
+
 import ScreenWrapper from '../ScreenWrapper';
 
 const AvatarExample = () => {

example/src/Examples/BadgeExample.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
+
 import {
   Badge,
   IconButton,
@@ -10,6 +11,7 @@ import {
   useTheme,
   MD3Colors,
 } from 'react-native-paper';
+
 import ScreenWrapper from '../ScreenWrapper';
 
 const BadgeExample = () => {

example/src/Examples/BannerExample.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
 import { View, StyleSheet, Image, Dimensions, Platform } from 'react-native';
+
 import {
   Banner,
   FAB,
   useTheme,
   MD2Colors,
   MD3Colors,
 } from 'react-native-paper';
+
 import ScreenWrapper from '../ScreenWrapper';
 
 const PHOTOS = Array.from({ length: 24 }).map(
@@ -67,7 +69,11 @@ const BannerExample = () => {
         <View style={styles.grid}>
           {PHOTOS.map((uri) => (
             <View key={uri} style={styles.item}>
-              <Image source={{ uri }} style={styles.photo} />
+              <Image
+                source={{ uri }}
+                style={styles.photo}
+                accessibilityIgnoresInvertColors
+              />
             </View>
           ))}
         </View>

example/src/Examples/BottomNavigationExample.tsx

@@ -7,10 +7,12 @@ import {
   Platform,
   Easing,
 } from 'react-native';
+
+import type { StackNavigationProp } from '@react-navigation/stack';
 import { Appbar, BottomNavigation, Menu, useTheme } from 'react-native-paper';
-import ScreenWrapper from '../ScreenWrapper';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import type { StackNavigationProp } from '@react-navigation/stack';
+
+import ScreenWrapper from '../ScreenWrapper';
 
 type RoutesState = Array<{
   key: string;
@@ -40,7 +42,11 @@ const PhotoGallery = ({ route }: Route) => {
     <ScreenWrapper contentContainerStyle={styles.content}>
       {PHOTOS.map((uri) => (
         <View key={uri} style={styles.item}>
-          <Image source={{ uri }} style={styles.photo} />
+          <Image
+            source={{ uri }}
+            style={styles.photo}
+            accessibilityIgnoresInvertColors
+          />
         </View>
       ))}
     </ScreenWrapper>