Upgrade React types to fix compatibility with Expo 46 projects.

Author: jameswilddev

package-lock.json

@@ -17,7 +17,7 @@
   "license": "MIT",
   "devDependencies": {
     "@types/jest": "27.4.0",
-    "@types/react": "17.0.38",
+    "@types/react": "18.0.18",
     "@types/react-native": "0.66.15",
     "@types/react-test-renderer": "17.0.1",
     "@types/uuid": "8.3.4",

package.json

@@ -46,10 +46,12 @@ const styles = StyleSheet.create({
  * A React component which fills its container and aligns its children
  * horizontally and vertically.
  */
-export const Aligned: React.FunctionComponent<{
-  readonly horizontally: `left` | `centered` | `right`;
-  readonly vertically: `top` | `centered` | `bottom`;
-}> = ({ horizontally, vertically, children }) => {
+export const Aligned: React.FunctionComponent<
+  React.PropsWithChildren<{
+    readonly horizontally: `left` | `centered` | `right`;
+    readonly vertically: `top` | `centered` | `bottom`;
+  }>
+> = ({ horizontally, vertically, children }) => {
   let style: ViewStyle;
 
   switch (horizontally) {

react-native/components/Aligned/index.tsx

@@ -7,30 +7,32 @@ import {
 } from "react-native";
 import { useMeasure } from "../../..";
 
-type Component = React.FunctionComponent<{
-  /**
-   * When true, this component does not accept touch input.
-   * This will, of course, not apply until the next render.  To synchronously
-   * disable all Hitboxes, use the "enabled" static property.
-   */
-  readonly disabled?: undefined | boolean;
+type Component = React.FunctionComponent<
+  React.PropsWithChildren<{
+    /**
+     * When true, this component does not accept touch input.
+     * This will, of course, not apply until the next render.  To synchronously
+     * disable all Hitboxes, use the "enabled" static property.
+     */
+    readonly disabled?: undefined | boolean;
 
-  /**
-   * Passed down to TouchableOpacity.
-   */
-  readonly style?: ViewStyle;
+    /**
+     * Passed down to TouchableOpacity.
+     */
+    readonly style?: ViewStyle;
 
-  /**
-   * Passed to useMeasure.
-   */
-  readonly onMeasure?: undefined | MeasureOnSuccessCallback;
+    /**
+     * Passed to useMeasure.
+     */
+    readonly onMeasure?: undefined | MeasureOnSuccessCallback;
 
-  /**
-   * Similar to TouchableOpacity's onPress, but remote-controlled using the
-   * "enabled" static property.
-   */
-  readonly onPress: () => void;
-}>;
+    /**
+     * Similar to TouchableOpacity's onPress, but remote-controlled using the
+     * "enabled" static property.
+     */
+    readonly onPress: () => void;
+  }>
+>;
 
 /**
  * A React component which mimics TouchableOpacity, but can be remotely,

react-native/components/Hitbox/index.tsx

@@ -7,16 +7,18 @@ const styles: { [key: string]: ViewStyle } = {};
  * A React component which fills the container horizontally and applies a flex
  * row to its children.
  */
-export const Row: React.FunctionComponent<{
-  readonly height: `fitsContent` | `fillsContainer`;
-  readonly horizontalDistribution:
-    | `left`
-    | `centered`
-    | `right`
-    | `spaced`
-    | `spacedTouchingEnds`;
-  readonly verticalAlignment: `top` | `centered` | `bottom` | `stretched`;
-}> = ({ height, horizontalDistribution, verticalAlignment, children }) => {
+export const Row: React.FunctionComponent<
+  React.PropsWithChildren<{
+    readonly height: `fitsContent` | `fillsContainer`;
+    readonly horizontalDistribution:
+      | `left`
+      | `centered`
+      | `right`
+      | `spaced`
+      | `spacedTouchingEnds`;
+    readonly verticalAlignment: `top` | `centered` | `bottom` | `stretched`;
+  }>
+> = ({ height, horizontalDistribution, verticalAlignment, children }) => {
   const styleKey = `${height}-${horizontalDistribution}-${verticalAlignment}`;
 
   if (!(styleKey in styles)) {

react-native/components/Row/index.tsx

@@ -18,13 +18,15 @@ let webStyles: null | {
  * A replacement for the React Native `Modal` component which supports web
  * browsers as a target.
  */
-export const SimpleModal: React.FunctionComponent<{
-  /**
-   * Called when the back button is pressed or the background is clicked or
-   * touched.
-   */
-  readonly onClose: () => void;
-}> = ({ onClose, children }) => {
+export const SimpleModal: React.FunctionComponent<
+  React.PropsWithChildren<{
+    /**
+     * Called when the back button is pressed or the background is clicked or
+     * touched.
+     */
+    readonly onClose: () => void;
+  }>
+> = ({ onClose, children }) => {
   switch (Platform.OS) {
     case `android`:
     case `ios`: