How to render components this way

Question

I'm watching v5 tutorial and there is

const HomeStack = () => {
  <Stack.Navigator initialRouteName="Home">
    <Stack.Screen name="Home" component={Home} />
    <Stack.Screen name="Settings">
      {(props) => <Text>Profile's settings</Text>}
    </Stack.Screen>
  </Stack.Navigator>;
};

but it's not working for me. I want to render <Text>Profile's settings</Text>

I get this error screenshot

What is the correct way of doing it and what is called?

Does this answer your question? [When should I use a return statement in ES6 arrow functions](https://stackoverflow.com/questions/28889450/when-should-i-use-a-return-statement-in-es6-arrow-functions) — Emile Bergeron, Feb 03 '22 at 20:49

score 1 · Answer 1 · edited Feb 03 '22 at 20:49

1

your function should to return jsx

  const HomeStack = () => {
    return(
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Settings">
          {(props) => <Text>Profile's settings</Text>}
        </Stack.Screen>
      </Stack.Navigator>
    )
  };

edited Feb 03 '22 at 20:49

Emile Bergeron

17,074
5
83
129

answered Feb 03 '22 at 20:43

Andrii Svirskyi

376
1
4

How to render components this way

1 Answers1