title: Something is calling a React component directly. Use a factory or JSX instead
body: <p>I use the library  <code>react-native-scrollable-tab-view</code> to achieve tab view.</p>
  <p><code>VideoScreen</code> hook componet nested <code>BasicView</code> tab view hook componet.</p>
  <p>VideoScreen:</p>
  <pre><code>import ScrollableTabView from 'react-native-scrollable-tab-view';
  import BasicView from './BasicView';
  
  VideoScreen = () =&gt; {
    return (
      &lt;ScrollableTabView&gt;
        &lt;BasicView tabLabel={&quot;Basic&quot;} /&gt;
      &lt;/ScrollableTabView&gt;
    );
  };
  
  export default VideoScreen;
  </code></pre>
  <p>BasicView:</p>
  <pre><code>BasicView = () =&gt; {
  
  // basicVideos is my list array data.
  
  const renderVideos = ({item}) =&gt; {
    const {id} = item;
  
    return (
      &lt;View&gt;
        &lt;Text&gt;{id}&lt;/Text&gt;
      &lt;/View&gt;
    );
  };
  
  return (
      &lt;View&gt;
        &lt;View style={{height: 16}} /&gt;
        {basicVideos.map((value, index) =&gt; {
          const {id, videos, title} = value;
  
          return (
            &lt;View key={index} style={{marginBottom: 20}}&gt;
              &lt;Text style={styles.categoryTitle}&gt;{title}&lt;/Text&gt;
              &lt;FlatList
                style={styles.flatSection}
                showsHorizontalScrollIndicator={false}
                horizontal={true}
                data={videos}
                renderItem={renderVideos}
                keyExtractor={(item, index) =&gt; index.toString()}
              /&gt;
            &lt;/View&gt;
          );
        })}
      &lt;/View&gt;
    );
  }
  
  export default BasicView;
  </code></pre>
  <p>The code shows <code>Warning: Something is calling a React component directly. Use a factory or JSX instead</code> If I remove <code>&lt;FlatList /&gt;</code> , the warning is gone,
  but I don't know why. How do I fix this warning ?</p>