How to change a button at the end of a Flatlist

Question

I have a flatlist to show some welcome screens, it is working fine, but I want to render a different button in the last item, how can I do that? here is the code:

import React, {useRef} from 'react';
import {
  View,
  FlatList,
  ScrollView,
  Text,
  StatusBar,
  Image,
  TouchableOpacity,
  Modal,
  Dimensions,
} from 'react-native';

import ProgressCircle from 'react-native-progress-circle';
import Icon from 'react-native-vector-icons/AntDesign';
import {AnimatedCircularProgress} from 'react-native-circular-progress';

import {SafeAreaView} from 'react-native-safe-area-context';
import {TextInput, Button} from 'react-native-paper';
import styles from './styles';
import {blue} from 'chalk';

const {width} = Dimensions.get('window');

const DATA = [
  {
    key: '1',
    screenText1: 'Get weekly overviews and find',
    screenText2: 'out whats impacting your health',
    screenText3: 'and wellness.',
    imagePath: require('../../assets/images/wellbeing.png'),
    nextScreen: 'HabitTracking',
    progressCirclePercentage: 20,
  },
  {
    key: '2',
    screenText1: 'Explore healthy routines and get',
    screenText2: 'reminders to stay motivated along',
    screenText3: 'the way.',
    imagePath: require('../../assets/images/habitTracking.png'),
    nextScreen: 'Recommendation',
    progressCirclePercentage: 40,
  },
  {
    key: '3',
    screenText1: 'Target areas that need',
    screenText2: 'improvement with a personalized',
    screenText3: 'list of tips and advice.',
    imagePath: require('../../assets/images/recommendation.png'),
    nextScreen: 'PerksAndSavings',
    progressCirclePercentage: 60,
  },
  {
    key: '4',
    screenText1: 'Achieve your goals to earn points',
    screenText2: 'redeemable for exclusive perks and',
    screenText3: 'discounts.',
    imagePath: require('../../assets/images/perksAndSavings.png'),
    nextScreen: 'ReturnToWork',
    progressCirclePercentage: 80,
  },
  {
    key: '5',
    screenText1: 'Completing a quick screening',
    screenText2: 'questionnaire before',
    screenText3: 'entering the office',
    imagePath: require('../../assets/images/returnToWork.png'),
    nextScreen: 'home',
    progressCirclePercentage: 100,
  },
];

const Welcome = () => {
  const welcomeflatlist = useRef(null);
  const renderItem = ({item, index}) => (
    <Item
      screenText1={item.screenText1}
      screenText2={item.screenText2}
      screenText3={item.screenText3}
      imagePath={item.imagePath}
      progressCirclePercentage={item.progressCirclePercentage}
      index={index}
    />
  );

  const Item = ({
    screenText1,
    screenText2,
    screenText3,
    imagePath,
    progressCirclePercentage,
    index,
  }) => (
    <View style={styles.container}>
      <View>
        <Image source={imagePath} style={styles.image} />
      </View>

      <View style={styles.text_field}>
        <Text style={styles.textContent}>{screenText1}</Text>
        <Text style={styles.textContent}>{screenText2}</Text>
        <Text style={styles.textContent}>{screenText3}</Text>
      </View>

      <View style={styles.footer}>
        <TouchableOpacity
          onPress={() =>
            welcomeflatlist.current.scrollToIndex({
              animated: true,
              index: index + 1,
            })
          }>
          <ProgressCircle
            percent={progressCirclePercentage}
            radius={30}
            borderWidth={2}
            color="#533AED"
            shadowColor="white"
            bgColor={'white'}>
            <View style={styles.innerCircle}>
              <Icon name="arrowright" size={25} color="white"></Icon>
            </View>
          </ProgressCircle>
        </TouchableOpacity>
      </View>
    </View>
  );
  return (
    <View style={styles.container}>
      <FlatList
        ref={welcomeflatlist}
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.key}
        horizontal={true}
      />
    </View>
  );
};

export default Welcome;

{
  /*  */
}

as I click in the progressbar it goes to the next item, but as I said, I want in the last item to show a different button, the style of it is like this:

<View style={{paddingRight: 20, flexDirection: 'row'}}>
            <Text
              style={{
                fontSize: 20,
                color: 'white',
                alignItems: 'center',
                paddingRight: 30,
                paddingLeft: 60,
              }}>
              JOIN THE COMPANY
            </Text>
            <Icon name="arrowright" size={25} color="white"></Icon>
          </View>

How can I do that?

Answer 1

In FlatList there is a property ListFooterComponent. Here you can add your code. It will show the button just after your flat list. For Example:

  <FlatList
    ref={welcomeflatlist}
    data={DATA}
    renderItem={renderItem}
    keyExtractor={item => item.key}
    horizontal={true}
    ListFooterComponent={
      <View style={{paddingRight: 20, flexDirection: 'row'}}>
        <Text
          style={{
            fontSize: 20,
            color: 'white',
            alignItems: 'center',
            paddingRight: 30,
            paddingLeft: 60,
          }}>
          JOIN THE COMPANY
        </Text>
        <Icon name="arrowright" size={25} color="white"></Icon>
      </View>
    }
  />