reactjs - Error de React 18 y TypeScript con styled-components después de actualizar Expo de v48 a v49

Recientemente actualicé mi aplicación Expo de la versión 48 a la 49 y, en consecuencia, actualicé React de la versión 16 a la 18. Después de la actualización, estoy encontrando un error de TypeScript relacionado con los componentes estilizados al usar componentes con las propiedades de los hijos. Revisé varios problemas relacionados con esto en SO, pero nada funcionó para mí. No pude averiguar qué hice mal.

    // Row.tsx
    import React from 'react';
    import { View, ViewProps } from 'react-native';
    import styled from 'styled-components/native';
    
    interface Props extends ViewProps {
      children: React.ReactNode;
    }
    
    const StyledView = styled(View)<Props>`
      flex-direction: row;
    `;
    
    export const Row = ({ children, ...props }: Props) => {
      return <StyledView {...props}>{children}</StyledView>;
    };
    
    // MyComponent.tsx
    import React from 'react';
    import { View } from 'react-native';
    import { Row } from '../components/custom-components';
    
    const MyComponent = () => {
      return (
        <Row>
          <View /> <--- error appear here
        </Row>
      );
    };

incluso si pongo H1 como hijos, todavía lanza este error

El error que estoy recibiendo es

El tipo 'Element' no se puede asignar al tipo 'ReactNode'. La propiedad 'children' falta en el tipo 'Element', pero es obligatoria en el tipo 'ReactPortal'.

Dependencias :

    "react-native": "0.72.6"
    "react": "18.2.0"
    "react-dom": "18.2.0",
    "typescript": "^5.1.3"
    "styled-components": "^5.3.5",
    "styled-system": "^5.1.5",
    "@types/styled-components": "5.1.26",
    "@types/styled-components-react-native": "^5.1.3",
    "@types/styled-system": "^5.1.16",
    "@types/react-dom": "~18.0.10",
    "@types/react": "18.2.38"

Respuesta #1

El error ocurre cuando no se pasan hijos, así que cambia lo siguiente

    <Row>
      <View />
    </Row>

a esto

    <Row>
      <View>
          <Text>Check if it works</Text
      </View>
    </Row>

El campo Text no es necesariamente necesario, ¡solo resulta útil para ver si funciona!