React-native-collapsible, как изменить стиль элемента заголовка при выборе

Question

Я пытаюсь создать список с использованием пакета реагировать-родного-складного, который отображает места и, при выборе, отображает дополнительную информацию об этом сохраненном месте.

Я хочу заголовок выбранного элементав разборном аккордеоне, чтобы изменить стили при выборе.

Вот код, который используется:

import React, { Component } from 'react';
import {View, Text, StyleSheet, FlatList, ScrollView } from 'react-native';
import PlaceDetailComponent from '../components/PlaceDetailComponent';
import ExpandedPlaceDetail from "../components/ExpandedPlaceDetail";
import Accordion from 'react-native-collapsible/Accordion';


const SECTIONS = [
    {placeName: 'Queen Mary 1', rating: '7', price: '£', distance: '4', type: 'Field'},
    {placeName: 'Queen Mary 2', rating: '4', price: '££', distance: '2', type: 'Lecture Hall'},
    {placeName: 'Queen Mary 3', rating: '10', price: '£££', distance: '14', type: 'Cafe'},
    {placeName: 'Queen Mary 4', rating: '6', price: '£', distance: '2330', type: 'Campus'},
    {placeName: 'Queen Mary 5', rating: '3', price: '£££', distance: '1', type: 'University'},
];

class SavedCollapsibleScreen extends Component {
    state = {
        activeSections: [],
    };


    _renderHeader = section => {
        return (
            <View>
                <PlaceDetailComponent placeName = {section.placeName}
                                      rating = {section.rating}
                                      price = {section.price}
                                      distance = {section.distance}
                                      type = {section.type}
                                      expanded = {false}
                />
            </View>
        );
    };

    _renderContent = section => {
        return (
            <View>
                <ExpandedPlaceDetail placeName = {section.placeName}
                                     rating = {section.rating}
                                     price = {section.price}
                                     distance = {section.distance}
                                     type = {section.type}
                />
                {/*<Text style={styles.headerText}>{section.placeName}</Text>*/}
            </View>
        );
    };

    _updateSections = activeSections => {
        this.setState({ activeSections });
    };

    render() {
        return (
            <ScrollView>
                <Accordion
                    sections={SECTIONS}
                    activeSections={this.state.activeSections}
                    renderHeader={this._renderHeader}
                    renderContent={this._renderContent}
                    onChange={this._updateSections}
                />
            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
        paddingTop: 30,
    },
    title: {
        textAlign: 'center',
        fontSize: 22,
        fontWeight: '300',
        marginBottom: 20,
    },
    header: {
        backgroundColor: '#F5FCFF',
        padding: 10,
    },
    headerText: {
        textAlign: 'center',
        fontSize: 16,
        fontWeight: '500',
    },
    content: {
        padding: 20,
        backgroundColor: '#fff',
    },
    active: {
        backgroundColor: 'rgba(255,255,255,1)',
    },
    inactive: {
        backgroundColor: 'rgba(245,252,255,1)',
    },
    selectors: {
        marginBottom: 10,
        flexDirection: 'row',
        justifyContent: 'center',
    },
    selector: {
        backgroundColor: '#F5FCFF',
        padding: 10,
    },
    activeSelector: {
        fontWeight: 'bold',
    },
    selectTitle: {
        fontSize: 14,
        fontWeight: '500',
        padding: 10,
    },
    multipleToggle: {
        flexDirection: 'row',
        justifyContent: 'center',
        marginVertical: 30,
        alignItems: 'center',
    },
    multipleToggle__title: {
        fontSize: 16,
        marginRight: 8,
    },
});

export default SavedCollapsibleScreen;

Как вы можете сказать, он строит список, используя предопределенный массив. Значения массива передаются как подпорки компоненту PlaceDetailComponent, который отображается в функции _RenderHeader. Это формирует «Заголовки» списка аккордеона (то есть элементы, которые всегда видны в аккордеоне).

По сути, когда выбран один из этих заголовков списка, или «активный», я хочу стилизациючто выбранный заголовок изменить, как этого можно достичь?

Заранее спасибо.