Ошибка React Native: «Текстовые строки должны отображаться с помощью компонента », но это не текстовая строка? ⇐ Android

[Anonymous]

Я пытаюсь создать приложение чата на основе реагирования, с Firebase для данных и аутентификации.
Сейчас я пытаюсь создать экран, на котором будет отображаться лента чата, получающая коллекцию сообщений из моего проекта Firebase. используя firestore.
Во время моей попытки создать такой экран произошла ошибка;
"Текстовые строки должны отображаться с помощью компонента " вместе с индикатором, показывающим, что это была ошибка, на setLoading(false)

Код: Выделить всё

useEffect(() => {
const unsubscribe = firestore()
.collection('chats')
.orderBy('createdAt', 'asc')
.limitToLast(15)
.onSnapshot(querySnapshot => {
const chatsArr = [];
querySnapshot.forEach(doc => {
const id = doc.id;
const data = doc.data();
chatsArr.push({id, ...data});
});
setLoading(false);
setChats(chatsArr);
});

return () => {
unsubscribe();
setLoading(false);
};
}, []);

Вот стек:

Код: Выделить всё

Error: Text strings must be rendered within a  component.

This error is located at:
in RCTView (created by View)
in View (created by MainScreen)
in MainScreen (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by SceneView)
in RCTView (created by View)
in View (created by DebugContainer)
in DebugContainer (created by MaybeNestedStack)
in MaybeNestedStack (created by SceneView)
in RCTView (created by View)
in View (created by SceneView)
in RNSScreen
in Unknown (created by InnerScreen)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by InnerScreen)
in InnerScreen (created by Screen)
in Screen (created by SceneView)
in SceneView (created by NativeStackViewInner)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by ScreenStack)
in RNSScreenStack (created by ScreenStack)
in ScreenStack (created by NativeStackViewInner)
in NativeStackViewInner (created by NativeStackView)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by NativeStackView)
in NativeStackView (created by NativeStackNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by NativeStackNavigator)
in NativeStackNavigator (created by App)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by App)
in App
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in Chattr(RootComponent), js engine: hermes

А вот и весь код MainScreen:

Код: Выделить всё

import React, {useEffect, useState} from 'react';
import auth from '@react-native-firebase/auth';
import firestore from '@react-native-firebase/firestore';
import {
View,
StyleSheet,
Text,
Alert,
ActivityIndicator,
FlatList,
} from 'react-native';
import ChatMessage from '../components/ChatMessage';
import SignOutButton from '../components/SignOutButton';

const MainScreen = () => {                    // Input text
const [chats, setChats] = useState([]);                    // Chat messages
const [loading, setLoading] = useState(true);

const handleSignOut = async () => await auth().signOut();// Loading state

useEffect(() => {
const unsubscribe = firestore()
.collection('chats')
.orderBy('createdAt', 'asc')
.limitToLast(15)
.onSnapshot(querySnapshot => {
const chatsArr = [];
querySnapshot.forEach(doc => {
const id = doc.id;
const data = doc.data();
chatsArr.push({id, ...data});
});
setLoading(false);
setChats(chatsArr);
});

return () => {
unsubscribe();
setLoading(false);
};
}, []);

if (loading) {
return ;   // Show loader while loading chats
} else {
const username = auth().currentUser.displayName;

return (

// Top app bar

{username}



// Chats container

{chats && (
 }
/>
)}


);
}
}

const styles = StyleSheet.create({
chatStyle: {
alignItems: 'center',
justifyContent: 'center',
height: '90%',
margin: 0,
padding: 0,
marginLeft: 'auto',
marginRight: 'auto',
// overflowY: 'scroll',
},
container: {
height: '100%',
width: '100%',
margin: 0,
marginTop: 0,
marginBottom: 0,
padding: 0,
paddingBottom: '15%',
paddingTop: 0,
backgroundColor: '#151718',
alignItems: 'flex-start',
justifyContent: 'space-between',
},
inputContainer: {
width: '100%',
height: 60,
position: 'absolute',
flexDirection: 'row',
bottom: 0,
left: 0,
right: 0,
margin: 0,
padding: 0,
paddingBottom: 0,
backgroundColor: '#151718',
alignItems: 'center',
justifyContent: 'center',
borderWidth: 1,
borderColor: '#1e2123',
borderLeftWidth: 0,
borderRightWidth: 0,
borderBottomWidth: 0,
},
text: {
fontWeight: '600',
fontSize: 20,
color: '#030303',
marginRight: 'auto',
marginLeft: 8,
padding: 4,
},
textContainer: {
flexDirection: 'row',
height: 60,
width: '100%',
margin: 0,
padding: 8,
elevation: 6,
backgroundColor: '#ffa600',
alignItems: 'center',
justifyContent: 'space-between',
},
});

export default MainScreen;

Мой вопрос: почему я получаю эту ошибку? На данный момент я понятия не имею, где это происходит, и уже несколько часов сижу, пытаясь найти решение.
Запустил npm start, npm start android, приложение создано успешно и ошибка произошло, но за сообщением об ошибке не отобразился экран.

Подробнее здесь: https://stackoverflow.com/questions/776 ... ent-but-it