chore: add react native eslint enhancers and fix imports order

Author: acostalima

.eslintrc.json

@@ -7,6 +7,8 @@
         "@moxy/eslint-config-base/esm",
         "@moxy/eslint-config-babel",
         "@moxy/eslint-config-jest",
-        "@moxy/eslint-config-react"
+        "@moxy/eslint-config-react",
+        "@moxy/eslint-config-react-native",
+        "@moxy/eslint-config-react-native-a11y/rn-061"
     ]
 }

package-lock.json

@@ -57,10 +57,12 @@
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^8.0.0",
-    "@moxy/eslint-config-babel": "^11.0.3",
-    "@moxy/eslint-config-base": "^11.0.0",
-    "@moxy/eslint-config-jest": "^11.0.0",
-    "@moxy/eslint-config-react": "^11.0.0",
+    "@moxy/eslint-config-babel": "^12.3.0",
+    "@moxy/eslint-config-base": "^12.2.0",
+    "@moxy/eslint-config-jest": "^12.3.0",
+    "@moxy/eslint-config-react": "^12.3.0",
+    "@moxy/eslint-config-react-native": "^12.3.1",
+    "@moxy/eslint-config-react-native-a11y": "^12.3.1",
     "@moxy/jest-config-base": "^5.0.0",
     "@moxy/jest-config-react-native": "^5.0.0",
     "@moxy/jest-config-testing-library": "^5.1.0",

package.json

@@ -21,11 +21,13 @@ const ProfileStackHeader = ({ navigation }) => {
             <View style={ styles.header }>
                 <Button
                     accessibilityLabel="back button"
+                    accessibilityHint="back button"
                     title={ <FormattedMessage id="profile.header.buttons.back" /> }
                     textStyle={ styles.goBack }
                     onPress={ handlePress } />
                 <Text
                     accessibilityLabel="title"
+                    accessibilityHint="title"
                     style={ styles.title }>
                     <FormattedMessage id="profile.header.title" />
                 </Text>

src/navigation/profile-stack/header/ProfileStackHeader.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StatusBar } from 'react-native';
-import { render, fireEvent } from '../../../shared/test-utils';
 import SafeAreaView from 'react-native-safe-area-view';
+import { render, fireEvent } from '../../../shared/test-utils';
 import { createNavigationProp } from '../../../shared/test-utils/react-navigation';
 import ProfileHeader from './';
 

src/navigation/profile-stack/header/ProfileStackHeader.test.js

@@ -1,5 +1,5 @@
-import Default from '.';
 import ProfileStackHeader from './ProfileStackHeader';
+import Default from '.';
 
 it('should default export ProfileStackHeader', () => {
     expect(ProfileStackHeader).toBe(Default);

src/navigation/profile-stack/header/index.test.js

@@ -1,17 +1,17 @@
 import { StyleSheet } from 'react-native';
 
 export default ({ typography, colors, layout }) => StyleSheet.create({
+    goBack: {
+        ...typography.bold,
+        color: colors.secondary,
+    },
     header: {
-        height: 50,
-        flexDirection: 'row',
         alignItems: 'center',
+        flexDirection: 'row',
+        height: 50,
         justifyContent: 'space-between',
         paddingHorizontal: layout.gutter,
     },
-    goBack: {
-        ...typography.bold,
-        color: colors.secondary,
-    },
     title: {
         ...typography.regular,
         color: colors.terciary,

src/navigation/profile-stack/header/styles/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { createStackNavigator } from '@react-navigation/stack';
-import ProfileHeader from './header';
 import ProfileScreen1 from '../../screens/profile/1/ProfileScreen1';
 import ProfileScreen2 from '../../screens/profile/2/ProfileScreen2';
+import ProfileHeader from './header';
 
 const Stack = createStackNavigator();
 

src/navigation/profile-stack/index.js

@@ -1,5 +1,5 @@
-import { navigationRef, navigate } from './';
 import { createNavigationProp } from '../../shared/test-utils/react-navigation';
+import { navigationRef, navigate } from './';
 
 beforeEach(() => {
     navigationRef.current = createNavigationProp();

src/navigation/root/index.test.js

@@ -28,11 +28,13 @@ const HomeScreen = ({ navigation }) => {
             <View style={ styles.container }>
                 <Text
                     accessibilityLabel="title"
+                    accessibilityHint="title"
                     style={ styles.text }>
                     <FormattedMessage id="home.title" />
                 </Text>
                 <Button
-                    accessibilityLabel="navigate to profile button"
+                    accessibilityLabel="navigate to profile screen"
+                    accessibilityHint="navigate to profile screen"
                     type="highlight"
                     title={ <FormattedMessage id="home.buttons.navigate-to-profile" /> }
                     style={ styles.button }
@@ -41,6 +43,7 @@ const HomeScreen = ({ navigation }) => {
                     underlayColor={ themeStyles.colors.terciary } />
                 <Button
                     accessibilityLabel="switch language button"
+                    accessibilityHint="switch language button"
                     type="highlight"
                     title={ <FormattedMessage id="home.buttons.switch-language" values={ { localeId: locale.id } } /> }
                     style={ styles.button }