Search code examples
functionreact-nativerenderingstateless

React Native Stateless Function Not Rendering When Imported

App.js

import React from "react";
import { StyleSheet, Text, SafeAreaView } from "react-native";
import { ExpandableTab } from "./components/ExpandableTab";

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <Text>1 2 1 2... mic check</Text>
      <ExpandableTab />
    </SafeAreaView>
  );
}

ExpandableTab.js

import React from "react";
import { Text } from "react-native";

export default function ExpandableTab() {
  return <Text>yeo dawg</Text>;
}

Running app on iOS Simulator and I see 1 2 1 2... mic check in the center of the screen, but nothing else.

Solution

  • Change the way you are importing ExpandableTab

    import ExpandableTab from "./components/ExpandableTab";