> For the complete documentation index, see [llms.txt](https://eleven-fifty-academy.gitbook.io/javascript-301-reactnative-gitbook/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://eleven-fifty-academy.gitbook.io/javascript-301-reactnative-gitbook/part-4-channels/4.4-displaying-the-messages.md).

# 4.4: Displaying the messages

As of right now, we cannot see our messages in our app, and that needs to change. In order to view our messages in a very fashionable way, we are going to use a FlatList. To read more about FlatLists, click [here](https://facebook.github.io/react-native/docs/flatlist.html).

Inside of your `channel/index.js`, import FlatList from 'react-native' at the very top. Then go into your render and add your FlatList:

```jsx
<View style={styles.container}>
    <FlatList 
        data={this.state.messages} 
        extraData={this.state}
        renderItem={this.renderItem}
    />
    <KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={50}>
    <View style={styles.footer}>
        <TextInput
            value={this.state.message}
            onChangeText={text => this.setState({message: text})}
            style={styles.input}
            underlineColorAndroid="transparent"
            placeholder="Message..."
        />
        <TouchableOpacity style={styles.submit} onPress={() => this.onSubmitMessage()}>
            <Text style={styles.submitText}>Submit</Text>
        </TouchableOpacity>
    </View>
    </KeyboardAvoidingView>
</View>
```

If you look at FlatList, you will notice that it is looking to render a specific item, which we have not created yet. So here we go, time to create another new function:

```jsx
renderItem({item}) {
        return (
            <View style={styles.row}>
                <View style={styles.rowText}>
                    <Text style={styles.message}>{item.message}</Text>
                </View>
            </View>
        );
}
```

As you can see, just looking at the message isn't very nice. Let's add in the username and the profile image also to make this look a lot nicer. First go up to your componentDidMount() and add in the following:

```jsx
let data = child.val()
firebase.database().ref('userInformation').child(data.user).once('value')
.then((res) => {
    let userData = res.val()
    data.profImage = userData.profImage
    data.username = userData.username
})
let messages = this.state.messages
messages.push(data)
this.setState({messages})
```

Here we take our profImage and username from data and add it into our userData object. We are also updating our messages here before we push our data into our messages.

Now that we have our username and profImage defined, lets go ahead and add them into our render.

```jsx
renderItem({item}) {
    return (
    <View style={styles.row}>
        <Image style={styles.avatar} source={%raw%} {{{uri: item.profImage}} {%endraw%}/>
        <View style={styles.rowText}>
            <Text style={styles.sender}>{item.username}</Text>
            <Text style={styles.message}>{item.message}</Text>
        </View>
    </View>
    );
}
```

Okay, so this looks like a mess. We need to do alot of styling here, but before we style our messages, let's go ahead and add in our keyExtractor prop to our FlatList. If you look at the yellow error/warning message that you may be getting, you should see something like "missing keys for items." Each item in a FlatList needs to have some sort of unique key. For example, it cannot be user id, because a user can have multiple messages in that channel, which would mean it is not unique. Add in our keyExtractor prop onto our FlatList:

```jsx
keyExtractor={(item) => item.key}
```

Then go back to our componentDidMount and add the following property to our data object:

```jsx
data.key = child.key
```

Okay we are almost there! Let's add in a back button right underneath the container view:

```jsx
<TouchableOpacity style={styles.backBtn} onPress={() => this.props.navigation.goBack()}>
    <Text style={styles.backText}>Back</Text>
</TouchableOpacity>
```

You will notice that we are plugging in a function called goBack. You won't need to do anything with this function, because it is a function created by Expo. Try it out!

Our channel is starting to look pretty good, but we need to do some styling. Jump into your styles file and add the following:

```jsx
import { Platform, Dimensions } from "react-native";
import commonColor from "../../../theme/commonColor";
import metrics from "../../../theme/config/metrics";

export default {

    container: {
        flex: 1,
        backgroundColor: commonColor.messagingBackground,
      },
    row: {
        padding: 20,
        borderBottomWidth: 1,
        borderBottomColor: '#eee',
        flexDirection: 'row'
      },
    message: {
        fontSize: 18,
      },
    sender: {
        fontWeight: 'bold',
        paddingRight: 10,
      },
    footer: {
        flexDirection: 'row',
        backgroundColor: commonColor.messagingInput,
      },
    input: {
        paddingHorizontal: 20,
        paddingVertical: 10,
        fontSize: 18,
        flex: 5,
      },
    rowText: {
        flex: 1,
      },
    submit: {
      flex: 2,
      backgroundColor: commonColor.brandColor,
      justifyContent: 'center',
    },
    submitText: {
      alignSelf: 'center'
    },
    backBtn: {
      backgroundColor: commonColor.brandColor,
      padding: 3
    },
    backText: {
      color: commonColor.inverseTextColor,
      fontSize: 18,
      fontWeight: '600',
    }
}
```

We should now have a functioning channel! Good work


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://eleven-fifty-academy.gitbook.io/javascript-301-reactnative-gitbook/part-4-channels/4.4-displaying-the-messages.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.