Fix RN 0.69 React 18 type errors (FunctionComponent props)

- React 17: interface FunctionComponent<P = {}> { (props: PropsWithChildren<P>, ...
- React 18: interface FunctionComponent<P = {}> { (props: P, ...
- Doc deprecated prop-types error, later remove
- Update linter config @typescript-eslint/no-unnecessary-type-arguments doc comment

Author: leotm

.eslintrc.js

@@ -85,6 +85,7 @@ module.exports = {
      * - class Atom extends Component<{ children: ReactNode, onPress: () => void }>
      * - const Atom = ({ children, onPress }: { children: ReactNode; onPress: () => void }) => <></> // Inferred JSX.Element
      * - const Atom: FC<{ onPress: () => void }>
+     * React 17 PropsWithChildren, now removed for generic P in React 18
      */
     '@typescript-eslint/no-unnecessary-type-arguments': 'off',
     '@typescript-eslint/no-unused-vars': [

src/index.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-native/no-raw-text, no-console */
 // https://github.com/Intellicode/eslint-plugin-react-native/issues/271
 
-import type { FC } from 'react'
+import type { FC, ReactNode } from 'react'
 import {
   SafeAreaView,
   ScrollView,
@@ -29,7 +29,10 @@ if (__DEV__) {
     .catch(() => console.error)
 }
 
-const Section: FC<{ title: string }> = ({ children, title }) => {
+const Section: FC<{ children: ReactNode; title: string }> = ({
+  children,
+  title
+}) => {
   const isDarkMode = useColorScheme() === 'dark'
   return (
     <View style={styles.sectionContainer}>

storybook/stories/Button/index.android.tsx

@@ -1,7 +1,7 @@
-import type { FC } from 'react'
+import type { FC, ReactNode } from 'react'
 import { TouchableNativeFeedback } from 'react-native'
 
-const Button: FC<{ onPress: () => void }> = ({
+const Button: FC<{ children: ReactNode; onPress: () => void }> = ({
   onPress = () => {
     // do nothing.
   },

storybook/stories/Button/index.ios.tsx

@@ -1,7 +1,7 @@
-import type { FC } from 'react'
+import type { FC, ReactNode } from 'react'
 import { TouchableHighlight } from 'react-native'
 
-const Button: FC<{ onPress: () => void }> = ({
+const Button: FC<{ children: ReactNode; onPress: () => void }> = ({
   onPress = () => {
     // do nothing.
   },

storybook/stories/CenterView/index.tsx

@@ -1,11 +1,11 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import PropTypes from 'prop-types'
-import type { FC } from 'react'
+import type { FC, ReactNode } from 'react'
 import { View } from 'react-native'
 
 import style from './style'
 
-const CenterView: FC = ({ children }) => {
+const CenterView: FC<{ children: ReactNode }> = ({ children }) => {
   return <View style={style.main}>{children}</View>
 }
 
@@ -14,6 +14,7 @@ CenterView.defaultProps = {
 }
 
 CenterView.propTypes = {
+  // @ts-expect-error Type 'Requireable<ReactNodeLike>' is not assignable to type 'Validator<ReactNode>'
   children: PropTypes.node
 }
 

storybook/stories/index.tsx

@@ -2,7 +2,6 @@ import { action } from '@storybook/addon-actions'
 import { text, withKnobs } from '@storybook/addon-knobs'
 import { linkTo } from '@storybook/addon-links'
 import { storiesOf } from '@storybook/react-native'
-import type { FC } from 'react'
 import { Text } from 'react-native'
 
 // eslint-disable-next-line import/extensions, import/no-unresolved
@@ -16,7 +15,7 @@ storiesOf('Welcome', module).add('to Storybook', () => (
 
 storiesOf('Button', module)
   .addDecorator(withKnobs)
-  .addDecorator(getStory => <CenterView>{getStory() as FC}</CenterView>)
+  .addDecorator(getStory => <CenterView>{getStory()}</CenterView>)
   .add('with text', () => (
     <Button onPress={action('clicked-text')}>
       <Text>{text('title', 'Button Title')}</Text>