React Navigation saying nothing was returned from render

Question

I have React navigation setup to return my component, everything so far seems to be setup properly from what I've read and watched, when I load up the app through expo I get "Invariant Violation: _default(...): Nothing was returned from render." I'm not sure if there's something wrong with my Navigator itself or how I'm calling my Navigator maybe? Not sure exactly how it knows to call that specific component in the HomeStack.Navigator, I would figure it needed some sort of like route to call to load that specific component by it's name? Might be missing a whole file, not sure.

Navigation file

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

import Home from "../Home";

const HomeStack = createStackNavigator();
const HomeStackScreen = () => {
  <HomeStack.Navigator>
    <HomeStack.Screen name="Home" component={Home} />
  </HomeStack.Navigator>;
};

export default () => {
  <NavigationContainer>
    <HomeStackScreen />
  </NavigationContainer>;
};

App.js file

import React from "react";
import Navigation from "./config/navigation";

export default () => <Navigation />;

Home component file

import React from "react";
import { StyleSheet, Text, View, ScrollView } from "react-native";

export default class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      bannerText: "PNW Plants",
    };
  }
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.banner}>
          <Text style={styles.bannerText}>{this.state.bannerText}</Text>
        </View>

        <Text
          style={{
            color: "darkgreen",
            marginTop: 40,
            fontSize: 22,
            textDecorationLine: "underline",
            textDecorationColor: "lightgrey",
          }}
        >
          Discovered Plants
        </Text>

        <ScrollView
          style={styles.grid}
          contentContainerStyle={{ flexDirection: "row", flexWrap: "wrap" }}
        >
          <Text style={styles.gridUnit1}></Text>
          <Text style={styles.gridUnit}></Text>
          <Text style={styles.gridUnit}></Text>
          <Text style={styles.gridUnit}></Text>
          <Text style={styles.gridUnit1}></Text>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff",
    alignItems: "center",
    overflow: "scroll",
  },
  banner: {
    backgroundColor: "darkgreen",
    height: 55,
    width: "100%",
    justifyContent: "center",
    alignItems: "center",
  },
  bannerText: {
    color: "white",
    fontSize: 30,
    fontWeight: "bold",
  },
  gridBanner: {
    fontSize: 26,
    marginTop: 40,
    color: "darkgreen",
  },

  grid: {
    display: "flex",
    padding: 10,
    width: "90%",
    borderTopWidth: 1,
    borderBottomWidth: 1,
    height: "60%",
    borderStyle: "solid",
    borderColor: "lightgrey",
    marginTop: 40,
    overflow: "hidden",
  },
  gridUnit: {
    backgroundColor: "lightgrey",
    height: 80,
    width: 80,
    margin: 10,
    overflow: "scroll",
  },
  gridUnit1: {
    backgroundColor: "orange",
    height: 80,
    width: 80,
    margin: 10,
  },
});

Answer 1

Add return if you are using curly braces in an arrow function

const HomeStackScreen = () => {
return (
  <HomeStack.Navigator>
    <HomeStack.Screen name="Home" component={Home} />
  </HomeStack.Navigator>
)
};

or simply do like this

const HomeStackScreen = () => (
  <HomeStack.Navigator>
    <HomeStack.Screen name="Home" component={Home} />
  </HomeStack.Navigator>
)
};

In your code, HomeStackScreen is returning undefined, that's why you are getting the error.

Also, modify

export default () => (
  <NavigationContainer>
    <HomeStackScreen />
  </NavigationContainer>;
})