Stack Navigator not showing screen

Question

My Stack Navigator doesn't show the screen that is rendered beneath it.

This is what my component renders. If I comment the first and last 3 lines, the content is shown as desired.

<Stack.Navigator>
            <Stack.Screen name="LoginEmail">
                {() => (
                    <View style={styles.container}>
                        <View>
                            <Text style={styles.text}>
                                {CONNECT_TO_APP_TXT}
                            </Text>
                        </View>
                        <View style={styles.inputsWrapper}>
                            <Input
                                label={EMAIL_TXT}
                                placeholder={EMAIL_TXT}
                                isRequired={true}
                                onChangeText={setEmail}
                            />
                            <CustomButton
                                outerStyle={styles.button}
                                label={CONTINUE_TXT}
                                accessibilityLabel={PRESS_CONTINUE_ACC_TXT}
                                onPress={sendRequest}
                            />
                        </View>
                        <View>
                            <Text style={styles.errorMsg}>{errorMsg}</Text>
                        </View>
                    </View>
                )}
            </Stack.Screen>
        </Stack.Navigator>

Answer 1

Try this. This would be using the component structure defined in the docs . Make a separate component file with your body code.

function LoginEmail() {
<View style={styles.container}>
                        <View>
                            <Text style={styles.text}>
                                {CONNECT_TO_APP_TXT}
                            </Text>
                        </View>
                        <View style={styles.inputsWrapper}>
                            <Input
                                label={EMAIL_TXT}
                                placeholder={EMAIL_TXT}
                                isRequired={true}
                                onChangeText={setEmail}
                            />
                            <CustomButton
                                outerStyle={styles.button}
                                label={CONTINUE_TXT}
                                accessibilityLabel={PRESS_CONTINUE_ACC_TXT}
                                onPress={sendRequest}
                            />
                        </View>
                        <View>
                            <Text style={styles.errorMsg}>{errorMsg}</Text>
                        </View>
                    </View>
}

Then import your file into the stack navigator as shown below:

<Stack.Navigator>
            <Stack.Screen name="LoginEmail" component = {LoginEmail}>
</Stack.Navigator>

THIS SHOULD WORK! lmk