how can I fix this error?

'AfterInteractions' cannot be used as a JSX component.
  Its return type 'ReactNode' is not a valid JSX element.
    Type 'undefined' is not assignable to type 'Element | null'

InteractionManager:

import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View, InteractionManager } from 'react-native';
import { IAfterInteractions } from './Model';

const AfterInteractions = ({ children, placeholder }: IAfterInteractions) => {
  const [ready, setReady] = useState(false);

  useEffect(() => {
    const Inter = InteractionManager.runAfterInteractions(() => {
      setReady(true);
    });

    return () => Inter.cancel();
  }, []);
  
  if(ready) {
    return children;
  }

  if(placeholder) {
    return placeholder;
  }

  return null;
};

export default AfterInteractions;

SomeFile.tsx

      <AfterInteractions>
        <SomeComponent />
      </AfterInteractions>

So the error comes by the component someFile.tsx in

How can I solve this error ?

CodePudding user response：

You are returning children without a parent, you need to wrap them in a ReactFragment.

if (ready) {
  return <>{children}</>;
}