React Native ListItem will not show any titles or chevrons

Question

Screen shot of current list

I would like to display a list that is grabbing data from my Firebase Firestore Database. I'm using expo for this project and react native. I can see the boxes form the list, but can't see the titles or the chevrons. I've tried a few formatting solutions and couldn't resolve the issue. I'm still able to add to the list and view the list once clicked.

import React, { Component } from "react";    

import {
  StyleSheet,
  ScrollView,
  ActivityIndicator,
  View,
  Text,
} from "react-native";
import { colors, ListItem } from "react-native-elements";
import firebase from "../../firebase";
class SearchEntry extends Component {
  constructor() {
  super();
  this.firestoreRef=  

  firebase.firestore().collection("RepairDocuments");
    this.state = {
    isLoading: true,
    entryArr: [],
    };
  }
 componentDidMount() {
this.unsubscribe =  

this.firestoreRef.onSnapshot(this.getCollection);
 }
  componentWillUnmount() {
  this.unsubscribe();
  }
  getCollection = (querySnapshot) => {
  const entryArr = [];
  querySnapshot.forEach((res) => {
  const { unit, date, bio } = res.data();
  entryArr.push({
    key: res.id,
    res,
    unit,
    date,
    bio,
  });
});
this.setState({
  entryArr,
  isLoading: false,
   });
   };
 render() {
  if (this.state.isLoading) {
   return (
    <View style={styles.preloader}>
      <ActivityIndicator size="large" color="#9E9E9E" />
    </View>
  );
}
return (
  <ScrollView style={styles.container}>
    {this.state.entryArr.map((item, i) => {
      return (
        <ListItem
          titleStyle={{ color: "black", fontWeight: "bold" }}
          style={{ height: 55 }}
          key={i}
          chevron
          title={item.unit}
          subtitle={item.bio}
          onPress={() => {
            this.props.navigation.navigate("Details", {
              userkey: item.key,
            });
          }}
        />
      );
    })}
  </ScrollView>
  );
 }
}
const styles = StyleSheet.create({
 container: {
  paddingTop: 55,
  flex: 1,
  fontSize: 18,
  textTransform: "uppercase",
  fontWeight: "bold",
  backgroundColor: colors.black,
 },
 preloader: {
  left: 0,
  right: 0,
  top: 0,
  bottom: 0,
  position: "absolute",
  alignItems: "center",
  justifyContent: "center",
 },
 text: {
 color: colors.black,
 backgroundColor: colors.black,
 },
 });
  export default SearchEntry;