Реализованный плоский список не отображается?

Попробуйте добавить комментарии к представлению под плоским списком и удалите элемент Flex 1 из стилей плоского списка. Попробуйте это, чтобы проверить, связано ли это со стилями

Я думаю, что происходит то, что вы не обернули свой FlatList в View с набором flex: 1. Кроме того, вы, вероятно, можете использовать свой uid в качестве ключа, а не устанавливать key в данных вашего объекта.

Демо

https://snack.expo.io/@anonymoussb/so53688423

import * as React from 'react';
import { Text, View, StyleSheet, Button, FlatList } from 'react-native';

class ChatUserCard extends React.Component {
  render() {
    return (
      <View style = {styles.cardStyle}> 
          <Text style = {styles.itemStyle}>{this.props.username}</Text>
          <Button style = {styles.buttonStyle}
                  title='Chat'
                  onPress = {this.startChat} />
      </View>
    )
  }
}

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [
        { key: 123, uid: 123, username: 'taco' },
        { key: 456, uid: 456, username: 'cat' }
      ]
    }
  }
  render() {
    return (
      <View style = {styles.container}>
        <FlatList style = {{flex:1, backgroundColor:'red'}}
           data = {this.state.users}
           keyExtractor = {item => item.key.toString()}
           renderItem = {({item}) => {
               return (
                   <ChatUserCard key = {item.uid} username = {item.username} />
               )
           }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
});