React Native can console log state variable, but can't render it

Question

Hi!

I'm using Expo with React Native to fetch a subcollection of messages to display them on my chat app. When I fetch my messages and load them in state variable, I can console log it but can't return it into .

const Messages = ({route}) => {
  
 const groupRef = route.params.thread.id

 const FetchMessages = () => {
    
    const [Messages, setMessages] = useState([]);
    const messagesRef = firebase.firestore().collection('groups').doc(groupRef).collection('messages');
    
    useEffect(() => {
      const messagesListener = messagesRef
        .orderBy('createdAt', 'desc')
        .onSnapshot(querySnapshot => {
          const Messages = querySnapshot.docs.map(doc => {
            const firebaseData = doc.data();

            const data = {
              id: doc.id,
              ...firebaseData
            };
            
            return data
          });
          setMessages(Messages)
        })
        return () => messagesListener();
    }, [])

    return (
      <View style = {{ flex: 1, marginTop: 10, width: '95%' }}>
        <FlatList
            style = {{ height: '100%' }}
            data = { Messages }
            numColumns = {1}
            renderItem = {({item}) => (
              <View>
                <Text>{item.message}</Text>
//!!-------------- HERE if I use <Text>{console.log(item.message)}</Text> it reaches it
              </View>
            )}
        />
      </View>
    )
  }

  return(
    //<ScrollView contentContainerStyle={{ flexGrow: 1, justifyContent: 'space-between', flexDirection: 'column' }}>
      <KeyboardAvoidingView style={{flex: 1}} behavior={Platform.OS === "ios" ? "padding" : "height"}>
        <View style={styles.container}>
          <View>
            <FetchMessages/>
            <Text>asd</Text>
          </View>
          
          <Button onPress={() => {handleSend(message)}} title="Send" />
          
          <View style={styles.messageBox}>
            <TextInput placeholder='Enter message...' value={message} onChangeText={val => setMessage(val)} multiline style={{maxHeight: 80}}></TextInput>
          </View>
        </View>
      </KeyboardAvoidingView>
    //</ScrollView>
  )
}

export default Messages

Can anybody help me with this problem, I don't even think that I use these syntaxes right anymore :(

Answer 1

In the end I found a way, maybe not a perfect one, but it works for now. I made changes to this code block:

    return (
      <View style = {{ flex: 1, marginTop: 10, width: '95%' }}>
        <FlatList
            style = {{ height: '100%' }}
            data = { Messages }
            numColumns = {1}
            renderItem = {({item}) => (
              <View>
                <Text>{item.message}</Text>
//!!-------------- HERE if I use <Text>{console.log(item.message)}</Text> it reaches it
              </View>
            )}
        />
      </View>
    )

To this:

    let itemList = []
    Messages.forEach(item => {
      itemList.push(
        <View>
          <Text>{item.message}</Text>
        </View>
      )
    })

    return (
      itemList
    )