chore: update eslint

.eslintrc

@@ -3,9 +3,7 @@
     "browser": true
   },
 
-  "extends": ["@callstack"],
-
-  "plugins": ["react-native"],
+  "extends": "@callstack",
 
   "rules": {
     "one-var": "off",
@@ -19,7 +17,8 @@
 
     "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/pages/src/Showcase.js

@@ -7,8 +7,8 @@ import { Header } from 'component-docs/components';
 
 import GooglePlayIcon from '../../components/google-play-icon';
 import IphoneIcon from '../../components/iphone-icon';
-import Content from './components/Content';
 import GithubIcon from '../../components/github-icon';
+import Content from './components/Content';
 
 type Data = {
   color: string,
@@ -190,7 +190,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={true}
+                    />
                     <Info style={{ backgroundColor: item.color }}>
                       <AppName
                         style={{

example/.eslintrc

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

example/src/DrawerItems.tsx

@@ -1,6 +1,3 @@
-import * as React from 'react';
-import { View, StyleSheet, I18nManager } from 'react-native';
-import { DrawerContentScrollView } from '@react-navigation/drawer';
 import {
   Badge,
   Drawer,
@@ -11,6 +8,9 @@ import {
   useTheme,
   MD3Colors,
 } from 'react-native-paper';
+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 { isWeb } from '../utils';
 import { PreferencesContext } from './';

example/src/ExampleList.tsx

@@ -1,6 +1,6 @@
+import { List, Divider, useTheme } from 'react-native-paper';
 import * as React from 'react';
 import { FlatList } from 'react-native';
-import { List, Divider, useTheme } from 'react-native-paper';
 import { useSafeArea } from 'react-native-safe-area-context';
 import type { StackNavigationProp } from '@react-navigation/stack';
 

example/src/Examples/ActivityIndicatorExample.tsx

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

example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx

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

example/src/Examples/AnimatedFABExample/CustomFAB.tsx

@@ -1,3 +1,4 @@
+import { AnimatedFAB, useTheme } from 'react-native-paper';
 import React from 'react';
 import {
   StyleProp,
@@ -6,7 +7,6 @@ import {
   StyleSheet,
   Platform,
 } from 'react-native';
-import { AnimatedFAB, useTheme } from 'react-native-paper';
 
 type CustomFABProps = {
   animatedValue: Animated.Value;

example/src/Examples/AnimatedFABExample/CustomFABControls.tsx

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

example/src/Examples/AppbarExample.tsx

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

example/src/Examples/AvatarExample.tsx

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

example/src/Examples/BadgeExample.tsx

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

example/src/Examples/BannerExample.tsx

@@ -1,12 +1,12 @@
-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 * as React from 'react';
+import { View, StyleSheet, Image, Dimensions, Platform } from 'react-native';
 import ScreenWrapper from '../ScreenWrapper';
 
 const PHOTOS = Array.from({ length: 24 }).map(
@@ -67,7 +67,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={true}
+              />
             </View>
           ))}
         </View>

example/src/Examples/BottomNavigationExample.tsx

@@ -1,3 +1,4 @@
+import { Appbar, BottomNavigation, Menu, useTheme } from 'react-native-paper';
 import * as React from 'react';
 import {
   View,
@@ -7,10 +8,9 @@ import {
   Platform,
   Easing,
 } from 'react-native';
-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 +40,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={true}
+          />
         </View>
       ))}
     </ScreenWrapper>

example/src/Examples/ButtonExample.tsx

@@ -1,6 +1,6 @@
+import { Button, List, useTheme } from 'react-native-paper';
 import * as React from 'react';
 import { View, StyleSheet, Image } from 'react-native';
-import { Button, List, useTheme } from 'react-native-paper';
 import ScreenWrapper from '../ScreenWrapper';
 
 const ButtonExample = () => {
@@ -263,6 +263,7 @@ const ButtonExample = () => {
               <Image
                 source={require('../../assets/images/chameleon.jpg')}
                 style={{ width: size, height: size, borderRadius: size / 2 }}
+                accessibilityIgnoresInvertColors={true}
               />
             )}
             onPress={() => {}}

example/src/Examples/CardExample.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-import { Alert, ScrollView, StyleSheet, View } from 'react-native';
 import {
   Avatar,
   Paragraph,
@@ -10,6 +8,8 @@ import {
   Chip,
   Text,
 } from 'react-native-paper';
+import * as React from 'react';
+import { Alert, ScrollView, StyleSheet, View } from 'react-native';
 import { PreferencesContext } from '..';
 import ScreenWrapper from '../ScreenWrapper';
 import { isWeb } from '../../utils';

example/src/Examples/CheckboxExample.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
 import {
   Paragraph,
   Text,
@@ -9,6 +7,8 @@ import {
   TouchableRipple,
   useTheme,
 } from 'react-native-paper';
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
 import ScreenWrapper from '../ScreenWrapper';
 
 const CheckboxExample = () => {

example/src/Examples/CheckboxItemExample.tsx

@@ -1,6 +1,6 @@
+import { Checkbox, useTheme } from 'react-native-paper';
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
-import { Checkbox, useTheme } from 'react-native-paper';
 import ScreenWrapper from '../ScreenWrapper';
 
 const CheckboxExample = () => {