I have multiple email threads and each of them has emailItem?.subject. My problem is I only want the emailItem?.subject to be displayed on the first thread. How would I do it without refactoring the current design? I just removed the styles from my code below for easier understanding.

const RenderSenderProfile = ({ emailInfo }) => {
  const [emailItem, setEmailItem] = useState(emailInfo);

  return (
    <View>
      <Text numberOfLines={1}>{emailItem?.subject}</Text>
      <View>.....</View>
    </View>
  );
};

const renderEmailData = ({ item, index }) => {
  return (
    <TouchableOpacity>
      <RenderSenderProfile emailInfo={item} />
    </TouchableOpacity>
  );
};

  const renderEmailDetailsList = () => {
var data = emailDetailsList

return (
  <FlatList
    nestedScrollEnabled
    ref={flatListRef}
    style={[Gutters.regularTMargin, { width: '100%', height: '100%' }]}
    refreshControl={
      <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
    }
    data={data}
    ItemSeparatorComponent={() => <View style={styles.divider} />}
    renderItem={renderEmailData}
    keyExtractor={(item, index) => index.toString()}
    onEndReachedThreshold={0}
  />
)

}

CodePudding user response：

YOu can do something like this: You can pass index, and as per your statemennt , for the first index you dont want to show View right, so just check

const RenderSenderProfile = ({ emailInfo , index=0 }) => {
  const [emailItem, setEmailItem] = useState(emailInfo);

  return (
    <View>
      <Text numberOfLines={1}>{emailItem?.subject}</Text>
     {index > 0 && (<View>.....</View>)}
    </View>
  );
};

const renderEmailData = ({ item, index }) => {
  return (
    <TouchableOpacity>
      <RenderSenderProfile emailInfo={item} index={index} />
    </TouchableOpacity>
  );
};

  const renderEmailDetailsList = () => {
var data = emailDetailsList

return (
  <FlatList
    nestedScrollEnabled
    ref={flatListRef}
    style={[Gutters.regularTMargin, { width: '100%', height: '100%' }]}
    refreshControl={
      <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
    }
    data={data}
    ItemSeparatorComponent={() => <View style={styles.divider} />}
    renderItem={renderEmailData}
    keyExtractor={(item, index) => index.toString()}
    onEndReachedThreshold={0}
  />
)