React Native Flatlist with props as data

Question

Trying to create two columns of data with different styles. The first column is a data labels and the second has been passed in as props from another screen which was retrieve from an API. I decided to use a two Flatlists. I'm successfully able to render the data labels but but can't seem to access the data that has been passed in as props in the second Flatlist. I've tried "props", "props.route" as the data source to the Flatlist but nothing seems to work. Any feedback would be appreciated.

This is the output I'm looking for.
sample output

This is my code so far.

const labels = [
  "Height:",
  "Gender:",
  "Mass:",
  "Hair Color:",
  "Eye Color:",
  "Birth Year:",
];

function PeopleDetails(props) {
  const { name, height, gender, mass, hair_color, eye_color, birth_year } =
    props.route.params;

  return (
    <View>
      
      <DetailsInfo
        height={height}
        gender={gender}
        mass={mass}
        hair_color={hair_color}
        eye_color={eye_color}
        birth_year={birth_year}
      />
    </View>
  );
}

const LabelView = ({ label }) => (
  <View>
    <AppText style={styles.labelStyle}>{label}</AppText>
  </View>
);

const LabelDataView = ({ labelData }) => (
  <View>
    <AppText style={styles.labelDataStyle}> {labelData} </AppText>
  </View>
);

const DetailsInfo = (props) => (
  <View style={{ flex: 1, flexDirection: "row" }}>
    <FlatList
      style={{ flexDirection: "column" }}
      data={labels}
      renderItem={({ item }) => <LabelView label={item} />}
      keyExtractor={(item) => item}
      numColumns={1}
    />
    <FlatList
      style={{ flexDirection: "column" }}
      data={props}
      renderItem={({ item }) => <LabelDataView labelData={item} />}
      keyExtractor={(item) => item}
      numColumns={1}
    />
  </View>
);

const styles = StyleSheet.create({
  labelStyle: {
    paddingTop: 5,
    marginLeft: 25,
  },

  labelDataStyle: {
    paddingTop: 5,
    color: "gold",
    textTransform: "uppercase",
    textAlign: "left",
  },
});

Answer 1

This trick could help

const labels = [...];

function PeopleDetails(props) {
  const { name, height, .... } = props.route.params;

  // create new array here
  const valueSet = [
    {value: name},
    {value: height}, 
    {value: gender}, 
    {value: mass}, 
    {value: hair_color}, 
    {value: eye_color}, 
    {value: birth_year}, 
  ];

  return (
    .....
      <DetailsInfo valueSet={valueSet} /> // replace props with above array
    ....
  );
}

....................................
// item component same as it is
....................................

const DetailsInfo = (props) => (
  .........
    <FlatList
      ....
      data={props.valueSet} // update here
      renderItem={({ item }) => <LabelDataView labelData={item.value} />} // update here
      ....
    />
  ........
);