chore(app): replace JSX.Element with ReactElement

levaintech · Jul 13, 2023 · 36b32f8 · 36b32f8
1 parent a82911f
commit 36b32f8
Show file tree

Hide file tree

Showing 16 changed files with 50 additions and 38 deletions.
diff --git a/app/app/ExternalLinkProvider.tsx b/app/app/ExternalLinkProvider.tsx
@@ -1,6 +1,6 @@
 import { BottomSheetBackdrop, BottomSheetModal, BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 import * as Linking from 'expo-linking';
-import { createContext, PropsWithChildren, useCallback, useContext, useRef, useState } from 'react';
+import { createContext, PropsWithChildren, ReactElement, useCallback, useContext, useRef, useState } from 'react';
 import { Text, TouchableOpacity, View } from 'react-native';
 import { useTailwind } from 'tailwind-rn';
 
@@ -15,7 +15,7 @@ export interface ExternalLinkOptions {
 
 const ExternalLinkContext = createContext<ExternalLinkOptions>({} as any);
 
-export function ExternalLinkProvider(props: PropsWithChildren): JSX.Element {
+export function ExternalLinkProvider(props: PropsWithChildren): ReactElement {
   const tailwind = useTailwind();
   const modalRef = useRef<BottomSheetModal>(null);
   const [url, setUrl] = useState<string | undefined>(undefined);

diff --git a/app/app/HapticFeedback.ts b/app/app/HapticFeedback.ts
@@ -6,7 +6,7 @@ import {
   NotificationFeedbackType,
   selectionAsync,
 } from 'expo-haptics';
-import { createContext, createElement, PropsWithChildren, useContext, useEffect, useState } from 'react';
+import { createContext, createElement, PropsWithChildren, ReactElement, useContext, useEffect, useState } from 'react';
 import { Platform } from 'react-native';
 
 interface HapticFeedbackOptions {
@@ -32,7 +32,7 @@ export function useHaptic(): HapticFeedbackOptions {
   return useContext(HapticFeedbackContext);
 }
 
-export function HapticFeedbackProvider(props: PropsWithChildren<any>): JSX.Element | null {
+export function HapticFeedbackProvider(props: PropsWithChildren<any>): ReactElement | null {
   const isAvailable = Platform.OS === 'ios' || Platform.OS === 'android';
   const [isEnabled, setEnabled] = useState(false);
 

diff --git a/app/app/_components/ModalStackScreen.tsx b/app/app/_components/ModalStackScreen.tsx
@@ -1,13 +1,13 @@
 import classNames from 'classnames';
 import { Stack, useRouter } from 'expo-router';
-import { ComponentProps } from 'react';
+import { ComponentProps, ReactElement } from 'react';
 import { Platform, TouchableOpacity } from 'react-native';
 import { useTailwind } from 'tailwind-rn';
 
 import { useHaptic } from '../HapticFeedback';
 import { IconSet } from '../IconSet';
 
-export function ModalStackScreen(props: { options: ComponentProps<typeof Stack.Screen>['options'] }): JSX.Element {
+export function ModalStackScreen(props: { options: ComponentProps<typeof Stack.Screen>['options'] }): ReactElement {
   const tailwind = useTailwind();
   const haptic = useHaptic();
   const router = useRouter();
@@ -27,7 +27,7 @@ export function ModalStackScreen(props: { options: ComponentProps<typeof Stack.S
   /**
    * For use in a modal header, this component provides a close button with variable padding based on platform.
    */
-  function HeaderRight(): JSX.Element {
+  function HeaderRight(): ReactElement {
     return (
       <TouchableOpacity
         onPress={async () => {

diff --git a/app/app/_layout.tsx b/app/app/_layout.tsx
@@ -2,7 +2,7 @@ import { DarkTheme, ThemeProvider } from '@react-navigation/native';
 import { useFonts } from 'expo-font';
 import { SplashScreen, Stack } from 'expo-router';
 import { setStatusBarStyle } from 'expo-status-bar';
-import { useEffect } from 'react';
+import { ReactElement, useEffect } from 'react';
 import { Platform, View } from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { TailwindProvider, useTailwind } from 'tailwind-rn';
@@ -14,7 +14,7 @@ import { HapticFeedbackProvider } from './HapticFeedback';
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
 
-export default function Layout(): JSX.Element {
+export default function Layout(): ReactElement {
   return (
     // @ts-ignore because TailwindProvider is not typed correctly
     <TailwindProvider utilities={utilities}>
@@ -23,7 +23,7 @@ export default function Layout(): JSX.Element {
   );
 }
 
-function WebContainer(): JSX.Element {
+function WebContainer(): ReactElement {
   const tailwind = useTailwind();
   if (Platform.OS === 'web') {
     return (
@@ -37,7 +37,7 @@ function WebContainer(): JSX.Element {
   return <AppContainer />;
 }
 
-function AppContainer(): JSX.Element | null {
+function AppContainer(): ReactElement | null {
   const [loaded, error] = useFonts({
     /* eslint-disable global-require */
     AntDesign: require('../assets/fonts/AntDesign.ttf'),

diff --git a/app/app/about/design.tsx b/app/app/about/design.tsx
@@ -1,5 +1,5 @@
 import { NotificationFeedbackType } from 'expo-haptics';
-import { ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { SafeAreaView, ScrollView, Switch, Text, TouchableOpacity, View, ViewStyle } from 'react-native';
 import { StyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
 import { useTailwind } from 'tailwind-rn';
@@ -8,7 +8,7 @@ import { ModalStackScreen } from '../_components/ModalStackScreen';
 import { useHaptic } from '../HapticFeedback';
 import { IconSet, IconSetName } from '../IconSet';
 
-export default function DesignSystemPage(): JSX.Element {
+export default function DesignSystemPage(): ReactElement {
   const tailwind = useTailwind();
   const haptic = useHaptic();
 
@@ -162,7 +162,7 @@ export default function DesignSystemPage(): JSX.Element {
           </Section>
           <Section title="LIST VIEW" innerStyle={tailwind('bg-zinc-900')}>
             {(() => {
-              function ListViewItem(props: { title: string; subtitle: string; icon: IconSetName }): JSX.Element {
+              function ListViewItem(props: { title: string; subtitle: string; icon: IconSetName }): ReactElement {
                 return (
                   <TouchableOpacity
                     onPress={async () => {
@@ -200,7 +200,7 @@ export default function DesignSystemPage(): JSX.Element {
   );
 }
 
-function Section(props: { title: string; children?: ReactNode; innerStyle?: StyleProp<ViewStyle> }): JSX.Element {
+function Section(props: { title: string; children?: ReactNode; innerStyle?: StyleProp<ViewStyle> }): ReactElement {
   const tailwind = useTailwind();
 
   return (
@@ -215,7 +215,7 @@ function Section(props: { title: string; children?: ReactNode; innerStyle?: Styl
   );
 }
 
-function Code(props: { children: string }): JSX.Element {
+function Code(props: { children: string }): ReactElement {
   const tailwind = useTailwind();
 
   return (

diff --git a/app/app/about/licenses.tsx b/app/app/about/licenses.tsx
@@ -1,6 +1,8 @@
+import { ReactElement } from 'react';
+
 import { ModalStackScreen } from '../_components/ModalStackScreen';
 
-export default function LicensesPage(): JSX.Element {
+export default function LicensesPage(): ReactElement {
   return (
     <>
       <ModalStackScreen

diff --git a/app/app/api/settings.tsx b/app/app/api/settings.tsx
@@ -1,6 +1,8 @@
+import { ReactElement } from 'react';
+
 import { ModalStackScreen } from '../_components/ModalStackScreen';
 
-export default function ApiSettingsPage(): JSX.Element {
+export default function ApiSettingsPage(): ReactElement {
   return (
     <>
       <ModalStackScreen

diff --git a/app/app/index.tsx b/app/app/index.tsx
@@ -1,3 +1,5 @@
-export default function App(): JSX.Element {
+import { ReactElement } from 'react';
+
+export default function App(): ReactElement {
   return <></>;
 }
diff --git a/app/app/keys/create.tsx b/app/app/keys/create.tsx
@@ -1,13 +1,13 @@
 import { NotificationFeedbackType } from 'expo-haptics';
-import { useState } from 'react';
+import { ReactElement, useState } from 'react';
 import { ScrollView, Text, TextInput, TouchableOpacity, View } from 'react-native';
 import { useTailwind } from 'tailwind-rn';
 
 import { ModalStackScreen } from '../_components/ModalStackScreen';
 import { useHaptic } from '../HapticFeedback';
 import { IconSet } from '../IconSet';
 
-export default function KeysCreatePage(): JSX.Element {
+export default function KeysCreatePage(): ReactElement {
   const tailwind = useTailwind();
   const haptic = useHaptic();
   const [input, setInput] = useState('1');

diff --git a/app/app/keys/settings.tsx b/app/app/keys/settings.tsx
@@ -1,6 +1,8 @@
+import { ReactElement } from 'react';
+
 import { ModalStackScreen } from '../_components/ModalStackScreen';
 
-export default function KeySettingsPage(): JSX.Element {
+export default function KeySettingsPage(): ReactElement {
   return (
     <>
       <ModalStackScreen

diff --git a/app/app/sign/_layout.tsx b/app/app/sign/_layout.tsx
@@ -1,5 +1,6 @@
 import { Stack } from 'expo-router';
+import { ReactElement } from 'react';
 
-export default function Layout(): JSX.Element {
+export default function Layout(): ReactElement {
   return <Stack screenOptions={{ headerShown: false }} />;
 }
diff --git a/app/app/sign/index.tsx b/app/app/sign/index.tsx
@@ -1,7 +1,8 @@
+import { ReactElement } from 'react';
 import { Text, View } from 'react-native';
 import { useTailwind } from 'tailwind-rn';
 
-export default function SignPage(): JSX.Element {
+export default function SignPage(): ReactElement {
   const tailwind = useTailwind();
 
   return (

diff --git a/app/app/tabs/_layout.tsx b/app/app/tabs/_layout.tsx
@@ -1,11 +1,11 @@
 import { Tabs } from 'expo-router';
-import { ComponentProps } from 'react';
+import { ComponentProps, ReactElement } from 'react';
 import { useTailwind } from 'tailwind-rn';
 
 import { useHaptic } from '../HapticFeedback';
 import { IconSet, IconSetName } from '../IconSet';
 
-export default function TabsLayout(): JSX.Element {
+export default function TabsLayout(): ReactElement {
   const tailwind = useTailwind();
   const haptic = useHaptic();
 

diff --git a/app/app/tabs/api.tsx b/app/app/tabs/api.tsx
@@ -1,7 +1,8 @@
+import { ReactElement } from 'react';
 import { Text, View } from 'react-native';
 import { useTailwind } from 'tailwind-rn';
 
-export default function ApiTab(): JSX.Element {
+export default function ApiTab(): ReactElement {
   const tailwind = useTailwind();
 
   return (

diff --git a/app/app/tabs/index.tsx b/app/app/tabs/index.tsx
@@ -1,13 +1,13 @@
 import { Stack, useRouter } from 'expo-router';
-import { useState } from 'react';
+import { ReactElement, useState } from 'react';
 import { Animated, SafeAreaView, ScrollView, Text, TouchableOpacity, View } from 'react-native';
 import { useTailwind } from 'tailwind-rn';
 
 import { useHaptic } from '../HapticFeedback';
 import { IconSet, IconSetName } from '../IconSet';
 import FlatList = Animated.FlatList;
 
-export default function KeychainTab(): JSX.Element {
+export default function KeychainTab(): ReactElement {
   const [onboarding] = useState(false);
   if (!onboarding) {
     return <KeychainOnboarding />;
@@ -16,7 +16,7 @@ export default function KeychainTab(): JSX.Element {
   return <KeychainListView />;
 }
 
-function KeychainOnboarding(): JSX.Element {
+function KeychainOnboarding(): ReactElement {
   const tailwind = useTailwind();
   const haptic = useHaptic();
 
@@ -60,7 +60,7 @@ function KeychainOnboarding(): JSX.Element {
     title: string;
     caption: string;
     icon: IconSetName;
-  }): JSX.Element {
+  }): ReactElement {
     return (
       <TouchableOpacity style={tailwind('mt-4')} onPress={props.onPress}>
         <View style={tailwind('bg-zinc-900 flex-row items-center py-3 px-4 rounded')}>
@@ -77,7 +77,7 @@ function KeychainOnboarding(): JSX.Element {
   }
 }
 
-function KeychainListView(): JSX.Element {
+function KeychainListView(): ReactElement {
   const tailwind = useTailwind();
   const router = useRouter();
   const haptic = useHaptic();
@@ -109,7 +109,7 @@ function KeychainListView(): JSX.Element {
     </>
   );
 
-  function KeychainKeyRow(props: { data: number }): JSX.Element {
+  function KeychainKeyRow(props: { data: number }): ReactElement {
     const colors = [
       'bg-red-950',
       'bg-yellow-950',

diff --git a/app/app/tabs/settings.tsx b/app/app/tabs/settings.tsx
@@ -1,13 +1,14 @@
 import { nativeApplicationVersion } from 'expo-application';
 import { Stack, useRouter } from 'expo-router';
+import { ReactElement } from 'react';
 import { Platform, SectionList, Switch, Text, TouchableOpacity, View } from 'react-native';
 import { useTailwind } from 'tailwind-rn';
 
 import { useExternalLink } from '../ExternalLinkProvider';
 import { useHaptic } from '../HapticFeedback';
 import { IconSet } from '../IconSet';
 
-export default function SettingsTab(): JSX.Element {
+export default function SettingsTab(): ReactElement {
   const tailwind = useTailwind();
 
   return (
@@ -140,7 +141,7 @@ interface RowProps {
   title: string;
 }
 
-function SettingRowVersion(props: RowProps): JSX.Element {
+function SettingRowVersion(props: RowProps): ReactElement {
   const tailwind = useTailwind();
   const platform: string = (() => {
     switch (Platform.OS) {
@@ -168,7 +169,7 @@ function SettingRowVersion(props: RowProps): JSX.Element {
   );
 }
 
-function SettingRowHaptic(props: RowProps): JSX.Element {
+function SettingRowHaptic(props: RowProps): ReactElement {
   const tailwind = useTailwind();
   const haptic = useHaptic();
 
@@ -195,7 +196,7 @@ function SettingRowHaptic(props: RowProps): JSX.Element {
   );
 }
 
-function SettingRowLink(props: RowProps): JSX.Element {
+function SettingRowLink(props: RowProps): ReactElement {
   const tailwind = useTailwind();
   const external = useExternalLink();
   const haptic = useHaptic();
@@ -216,7 +217,7 @@ function SettingRowLink(props: RowProps): JSX.Element {
   );
 }
 
-function SettingRowSelect(props: RowProps): JSX.Element {
+function SettingRowSelect(props: RowProps): ReactElement {
   const tailwind = useTailwind();
   const router = useRouter();
   const haptic = useHaptic();