chore: fix "react-in-jsx-scope" ESLint errors

This fixes all 50 violations of the [`react/react-in-jsx-scope`][0] lint
rule.

In the docs for that rule:

> If you are using the [new JSX transform from React 17][1], you should
> disable this rule by extending `react/jsx-runtime` in your eslint
> config (add `"plugin:react/jsx-runtime"` to `"extends"`).

We are, so we can do this! It also lets us remove many `React` imports.

[0]: https://github.com/jsx-eslint/eslint-plugin-react/blob/4467db503e38b9356517cf6926d11be544ccf4b1/docs/rules/react-in-jsx-scope.md
[1]: https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

.eslintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
   root: true,
-  extends: ['@react-native', 'prettier'],
+  extends: ['@react-native', 'plugin:react/jsx-runtime', 'prettier'],
   parser: '@typescript-eslint/parser',
   plugins: ['@typescript-eslint'],
   overrides: [

package.json

@@ -120,6 +120,7 @@
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",
     "eslint": "^8.19.0",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-react": "^7.34.1",
     "execa": "^8.0.1",
     "glob": "^9.3.0",
     "husky": "^8.0.0",

src/frontend/Navigation/AppStack.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import {NativeStackNavigationOptions} from '@react-navigation/native-stack/lib/typescript/src/types';
 import {WHITE} from '../lib/styles';

src/frontend/Navigation/ScreenGroups/AppScreens.tsx

@@ -3,7 +3,9 @@ import {
   createBottomTabNavigator,
 } from '@react-navigation/bottom-tabs';
 import {NavigatorScreenParams} from '@react-navigation/native';
-import * as React from 'react';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import {useForegroundPermissions} from 'expo-location';
+
 import {HomeHeader} from '../../sharedComponents/HomeHeader';
 import {RootStack} from '../AppStack';
 import {MessageDescriptor} from 'react-intl';

src/frontend/Navigation/ScreenGroups/DeviceNamingScreens.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {RootStack} from '../AppStack';
 import {IntroToCoMapeo} from '../../screens/IntroToCoMapeo';
 import {DeviceNaming} from '../../screens/DeviceNaming';

src/frontend/screens/AddPhoto.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {View, StyleSheet, TouchableNativeFeedback} from 'react-native';
 import {Text} from '../sharedComponents/Text';
 import debug from 'debug';

src/frontend/screens/AppPasscode/PasscodeIntro.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {defineMessages, useIntl} from 'react-intl';
 import {StyleSheet, View, ScrollView} from 'react-native';
 

src/frontend/screens/CameraScreen.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {View, StyleSheet} from 'react-native';
 import {useIsFocused} from '@react-navigation/native';
 

src/frontend/screens/FatalError.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {StyleSheet, View} from 'react-native';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 import RNRestart from 'react-native-restart';

src/frontend/screens/GpsModal.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {View, ScrollView, StyleSheet} from 'react-native';
 import {
   defineMessages,

src/frontend/screens/IntroToCoMapeo.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import TopoBackground from '../images/TopoLogo.svg';
 import CoMapeoTextAsSVG from '../images/CoMapeoText.svg';
 import {StyleSheet, View, Image} from 'react-native';

src/frontend/screens/MapScreen/ObsevationMapLayer.tsx

@@ -1,5 +1,4 @@
 import {Observation} from '@mapeo/schema';
-import React from 'react';
 import MapboxGL from '@rnmapbox/maps';
 import {useAllObservations} from '../../hooks/useAllObservations';
 import {useNavigationFromHomeTabs} from '../../hooks/useNavigationWithTypes';

src/frontend/screens/MapScreen/UserLocation.tsx

@@ -1,9 +1,9 @@
 import {UserLocation as MBUserLocation} from '@rnmapbox/maps';
-import * as React from 'react';
 import {useCurrentTrackStore} from '../../hooks/tracks/useCurrentTrackStore';
 import {useIsFullyFocused} from '../../hooks/useIsFullyFocused';
 import {UserTooltipMarker} from './track/UserTooltipMarker';
 
+// import {useExperiments} from '../../hooks/useExperiments';
 interface UserLocationProps {
   minDisplacement: number;
 }

src/frontend/screens/Observation/ObservationHeaderRight.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {View, StyleSheet} from 'react-native';
 
 import {IconButton} from '../../sharedComponents/IconButton';

src/frontend/screens/ObservationEdit/DescriptionField.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {defineMessages, useIntl} from 'react-intl';
 import {StyleSheet, TextInput} from 'react-native';
 

src/frontend/screens/ObservationEdit/PresetView.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {defineMessages, useIntl} from 'react-intl';
 import {View, Text, StyleSheet} from 'react-native';
 import {BLACK, LIGHT_BLUE} from '../../lib/styles';

src/frontend/screens/ObservationEdit/SaveButton.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {Alert, AlertButton, View} from 'react-native';
 import debug from 'debug';
 import {defineMessages, useIntl} from 'react-intl';

src/frontend/screens/ObservationsList/ObservationsEmptyView.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {View, StyleSheet, Dimensions} from 'react-native';
 import {Text} from '../../sharedComponents/Text';
 import {defineMessages, useIntl} from 'react-intl';

src/frontend/screens/ObservationsList/SettingsButton.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {SettingsIcon} from '../../sharedComponents/icons';
 
 import {IconButton} from '../../sharedComponents/IconButton';

src/frontend/screens/Settings/ProjectSettings/DeviceName/DisplayScreen.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {ScrollView, StyleSheet} from 'react-native';
 import {NativeStackNavigationOptions} from '@react-navigation/native-stack';
 import {MessageDescriptor, defineMessages, useIntl} from 'react-intl';

src/frontend/screens/Settings/ProjectSettings/YourTeam/ReviewAndInvite/ReviewInvitation.tsx

@@ -2,7 +2,6 @@ import {StyleSheet, View} from 'react-native';
 import {Text} from '../../../../../sharedComponents/Text';
 import {defineMessages, useIntl} from 'react-intl';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
-import React from 'react';
 import {WHITE} from '../../../../../lib/styles';
 import {Button} from '../../../../../sharedComponents/Button';
 import {DeviceNameWithIcon} from '../../../../../sharedComponents/DeviceNameWithIcon';

src/frontend/screens/Settings/ProjectSettings/YourTeam/SelectInviteeRole.tsx

@@ -7,7 +7,6 @@ import {defineMessages, useIntl} from 'react-intl';
 import {Text} from '../../../../sharedComponents/Text';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 import {DARK_GREY, LIGHT_GREY} from '../../../../lib/styles';
-import React from 'react';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import {DeviceNameWithIcon} from '../../../../sharedComponents/DeviceNameWithIcon';
 import {RoleWithIcon} from '../../../../sharedComponents/RoleWithIcon';

src/frontend/screens/Settings/ProjectSettings/YourTeam/index.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {MessageDescriptor, defineMessages, useIntl} from 'react-intl';
 import {
   CREATOR_ROLE_ID,

src/frontend/screens/Settings/index.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {FormattedMessage, defineMessages} from 'react-intl';
 import {ScrollView} from 'react-native-gesture-handler';
 import {useNavigationFromRoot} from '../../hooks/useNavigationWithTypes';

src/frontend/screens/Success.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {StyleSheet, View} from 'react-native';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 

src/frontend/sharedComponents/CustomHeaderLeft.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {HeaderBackButton} from '@react-navigation/elements';
 import {HeaderBackButtonProps} from '@react-navigation/native-stack/lib/typescript/src/types';
 

src/frontend/sharedComponents/DateDistance.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {Text} from './Text';
 import {FormattedRelativeTime, FormattedDate} from 'react-intl';
 import {useAppState} from '@react-native-community/hooks';

src/frontend/sharedComponents/DeviceNameWithIcon.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {View, StyleSheet} from 'react-native';
 import DeviceMobile from '../images/DeviceMobile.svg';
 import DeviceDesktop from '../images/DeviceDesktop.svg';

src/frontend/sharedComponents/ErrorModal.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {BottomSheetModal, useBottomSheetModal} from './BottomSheetModal';
 import {Button} from './Button';
 import {StyleSheet, View} from 'react-native';

src/frontend/sharedComponents/HomeHeader.tsx

@@ -1,10 +1,10 @@
-import React, {FC} from 'react';
 import {View, StyleSheet} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import {IconButton} from './IconButton';
 import {ObservationListIcon, SyncIconCircle} from './icons';
 import {GPSPill} from './GPSPill';
 import {BottomTabHeaderProps} from '@react-navigation/bottom-tabs';
+import {FC} from 'react';
 
 export const HomeHeader: FC<BottomTabHeaderProps> = ({navigation}) => {
   return (

src/frontend/sharedComponents/Loading.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {View, StyleSheet, Easing} from 'react-native';
 import {DotIndicator} from 'react-native-indicators';
 import {ViewStyleProp} from '../sharedTypes';

src/frontend/sharedComponents/Pill.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {FormattedMessage, MessageDescriptor} from 'react-intl';
 import {View, Text, StyleSheet} from 'react-native';
 

src/frontend/sharedComponents/ProjectInviteBottomSheet.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {
   BottomSheetContent,
   BottomSheetModal,

src/frontend/sharedComponents/Select.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {View, StyleSheet} from 'react-native';
 import {Picker} from '@react-native-picker/picker';
 

src/frontend/sharedComponents/SelectOne.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import {List, ListItem, ListItemText, ListItemIcon} from './List';
 
 type SelectOneProps<T> = {

src/frontend/sharedComponents/TextButton.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {StyleSheet} from 'react-native';
 import {Text} from './Text';
 import {TouchableNativeFeedback} from '../sharedComponents/Touchables';

src/frontend/sharedComponents/Touchables/index.ios.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import {TouchableHighlight} from 'react-native';
 
 export {Touchable, TouchableHighlight, TouchableOpacity} from 'react-native';

src/frontend/sharedComponents/Touchables/index.ios.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {TouchableHighlight, TouchableHighlightProps} from 'react-native';
 
 export {Touchable, TouchableHighlight, TouchableOpacity} from 'react-native';

src/frontend/sharedComponents/Touchables/index.web.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import {TouchableHighlight} from 'react-native';
 
 export {Touchable, TouchableHighlight, TouchableOpacity} from 'react-native';

src/frontend/sharedComponents/Touchables/index.web.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {TouchableHighlight, TouchableHighlightProps} from 'react-native';
 
 export {Touchable, TouchableHighlight, TouchableOpacity} from 'react-native';

src/frontend/sharedComponents/WifiBar.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {StyleSheet, View} from 'react-native';
 import {defineMessages, FormattedMessage} from 'react-intl';
 import DeviceInfo from 'react-native-device-info';

src/frontend/sharedComponents/icons/Progress.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {Circle, CircleSnail} from 'react-native-progress';
 
 type Props = {

src/frontend/sharedComponents/icons/Progress.web.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {View} from 'react-native';
 
 export const Progress = ({size = 30, color = 'white'}) => (

src/frontend/sharedComponents/icons/SaveIcon.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {View, StyleSheet} from 'react-native';
 import Icon from 'react-native-vector-icons/Octicons';
 

src/frontend/sharedComponents/icons/SyncIconCircle.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {View, StyleSheet} from 'react-native';
 import Icon from 'react-native-vector-icons/FontAwesome';
 

src/frontend/sharedComponents/icons/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';