Реагировать на собственные элементы ButtonGroup: FlatList Overlapping

Question

Я использую Реагировать на собственные элементы: ButtonGroup .

Созданы две вкладки: Present и History.

• getAppointmentPresent() - представление для вкладки Present.
• getAppointmentPast() - представление для вкладки History.

Я вызов API: getAppointmentList(). И я перечисляю элементы, используя FlatList .

В FlatList:

1. Для items.booked_by != NULL, я хочу показать их на вкладке Present .
2. Для items.booked_by == NULL я хочу показать их на вкладке History.

Однако

Когда я загружаю приложение, оно показывает элементы для items.booked_by != NULL на ОБА Present и History на вкладке (на основе фрагмента кода ниже).

Полный фрагмент кода ниже:

const buttons = ['Present', 'History'];

export default class FreelancerScreen extends Component {

    constructor(props) {
        super(props);
        this.state = {
            tab: 0,
            dataSource: [],
            dataPresent: [],
        };
    }

    componentDidMount() {
        this.getAppointmentList();
    }

    //API CALL
    getAppointmentList = () => {
        let self = this;
        AsyncStorage.getItem('my_token').then((keyValue) => {
            axios({
                ...
            })
                .then(function (response) {
                    self.setState({
                        dataSource: response.data.data,
                        dataPresent: response.data.data,
                    })
                })
                .catch(function (error) {
                    console.log('ERROR.RESPONSE: ', error.response);
                });
        }, (error) => {
            console.log('ERROR: ', error) //Display error
        });
    }

    //VIEW ITEMS NOT NULL
    getAppointmentPresent() {
        const { dataPresent } = this.state;
        return (
            <View>
                {<FlatList
                    data={dataPresent}
                    keyExtractor={({ id }, index) => index.toString()}
                    renderItem={({ item }) => {
                        if (item.booked_by != NULL) {
                            return (
                                <View>
                                    <TouchableOpacity
                                        onPress={() => {
                                            this.props.navigation.navigate('freelancerTime', {
                                                date: item.date_start,
                                            })
                                        }}
                                    >
                                        <Entypo name={"calendar"}/>
                                        <Text>{item.date_start}</Text>
                                        <Text>
                                            {item.total_booked}
                                        </Text>
                                    </TouchableOpacity>
                                </View>
                            );
                        }
                    }}
                />}
            </View>
        );
    }

    //VIEW ITEMS NULL
    getAppointmentPast() {
        const { dataSource } = this.state;
        return (
            <View>
                {<FlatList
                    data={dataSource}
                    keyExtractor={({ id }, index) => index.toString()}
                    renderItem={({ item }) => {
                        if (item.booked_by == NULL) {
                            return (
                                <View>
                                    <TouchableOpacity>
                                        <Entypo name={"calendar"}/>
                                        <Text>{item.date_start}</Text>
                                        <Text>
                                            {item.total_booked}
                                        </Text>
                                    </TouchableOpacity>
                                </View>
                            );
                        }
                    }}
                />}
            </View>
        );
    }

    updateIndex(tab) {
        this.setState({ tab })
    }

    getTabPage() {
        return this.state.tab === 0 ? this.getAppointmentPresent() : this.getAppointmentPast();
    }

    render() {
        return (
            <ScrollView>
                <ButtonGroup
                    onPress={this.updateIndex.bind(this)}
                    selectedIndex={this.state.tab}
                    buttons={buttons}
                />
                {this.getTabPage()}
            </ScrollView>
        )
    }
};

Я также попробовал следующий эксперимент, такой как:

, если я возвращаю что-то вроде этого:

getAppointmentPresent() {
   return <Text>Present Tab<Text>
}

getAppointmentPast() {
   return ( <FlatList ... />)
}

Present вкладка показывает ТЕКСТ, а History вкладка показывает данные FlatList

Или, если я возвращаю что-то вроде этого:

getAppointmentPresent() {
   return ( <FlatList ... />)
}

getAppointmentPast() {
   return <Text>Past Tab<Text>
}

History вкладка показывает ТЕКСТ и на вкладке Present отображаются данные FlatList

, т. е. в обоих этих случаях выходные данные генерируются нормально и как и ожидалось.

Так что если есть что-то, что я пропускаю и если есть какие-то изменения, которые мне нужно сделать, прошу Не стесняйтесь ответить ниже. Спасибо.