react-nativeで何も画面に表示されない

Question

ログイン画面を作成しようと思っています。
その中で「登録する」ボタンを押したあとに画面遷移をしたいので、他の.jsのページも共通して使用している下記のコードを使用したいと考えています。
return()内にログイン画面の詳細を挿入したいのですが、

import React, { Component } from 'react';
import { StyleSheet,Text, View, TextInput, Button, FlatList, SafeAreaView } from 'react-native';

const StartScreen = ({ navigation }) => {
	return (
	//　ここに下記のコードを入れたい
	);
}

export default StartScreen

下記のコードを、上記のコードのreturn()内に入れたところ、
export default class App extends Componentのままではエラーが出てしまうため、
class App extends Componentに書き換えました。

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
	  login_id: "",
      password: "",
      BakeryList: [],
    };
  }

  render() {
    const { login_id, password, BakeryList } = this.state;

    return (
      <SafeAreaView style={styles.container}>
        <View style={styles.formGroup}>
          <Text style={styles.formLabel}>ログインid</Text>
          <TextInput
            style={styles.formControl}
            value={login_id}
            placeholder="login_id"
            onChangeText={v => this.setState({ login_id: v })}
          />
        </View>
        <View style={styles.formGroup}>
          <Text style={styles.formLabel}>パスワード</Text>
          <TextInput
            style={styles.formControl}
            value={password}
            placeholder="password"
            onChangeText={v => this.setState({ password: v })}
          />
        </View>
        <Button title="ログイン"
          onPress={() => {
            const newList = BakeryList.concat({ login_id: login_id, password: password });
            this.setState({
				login_id: "",
				password: "",
              	BakeryList: newList
            });
          }}
        />
		<Text>新規登録はこちらから</Text>
		<Button title="登録する" onPress={() => navigation.navigate("Registered")}/>
        <FlatList
          style={styles.listBox}
          data={BakeryList}
          renderItem={({ item }) => {
            return (
              <View style={styles.listItem}>
                <Text>{item.login_id}</Text>
                <Text>{item.password}</Text>
              </View>
            );
          }}
          keyExtractor={item => item.login_id}
        />
      </SafeAreaView>
    );
  }
}

しかし、expoで開いたところ、画面が真っ白になってしまい検証画面からエラーを確認すると

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

との記述がありました。
ちなみに、それ以前の画面では正常に機能しています。(ログイン画面以前の画面からの画面遷移は正常です。)

過去の質問で同じエラーが出たものがあり、こちらの内容を参考に、メソッド化して、renderメソッドの中で実行させようとしたのですが、自分の知識量が追い付かずうまくできませんでした。

後々、ログインIDとパスワードをFirestore内にあるか検索するコードも追加したいと考えているのですが、どのようにすべきでしょうか。

Todoタスクを作成するときに使用したコードをベースにしているので読みにくいかと思われますが、ご回答いただけると助かります。
よろしくお願いいたします。

Answer 1

余分な部分を削ることで、render()の使用をやめたら、画面遷移できるようになりました。
完全に理解しきれていないので、解決できた理由を解説していただけると、大変勉強になります。

import React, { useState } from 'react';
import { StyleSheet,Text, View, TextInput, Button, FlatList, SafeAreaView } from 'react-native';

const StartScreen = ({ navigation }) => {
	const [ login_id, setLogin_id ] = useState("");
	const [ password, setPassword ] = useState("");

	return (
				<SafeAreaView style={styles.container}>
					---------　省略　------------
					<Button title="ログイン"
						onPress={() => navigation.navigate('Login')}
						/* 	if(firestoreに一致するデータがあれば){
								navigation.navigate('Register')
							} else {
								navigation.navigate('Start')
							}	
						*/
					/>

					<Text>新規登録はこちらから</Text>
					<Button title = "新規登録する"
					onPress={() => navigation.navigate('Register')}/>
					
				</SafeAreaView>
	);
}

export default StartScreen