Нумерация страниц не рендеринг

Question

У меня возникли проблемы с отображением страниц для моих карусельных карт. Прямо сейчас у меня есть видео рендеринг на фоне моих 5 карт, и я хочу иметь нумерацию страниц под 5 пальцами карты. Таким образом, я могу сказать, на какую карту я сейчас смотрю.

Я оглянулся на документацию по разбивке на страницы в карусели и пару примеров в Интернете, но безуспешно. Может ли кто-нибудь помочь мне понять, где я ошибаюсь с моей реализацией?

const { width, height } = Dimensions.get("window");

export default class Events extends Component<Props> {

    constructor(props){
        super();
        this.state = {
          errors: []
        }
        this.props = props;
        this._carousel = {};
        this.init();
      }

    init(){
        this.state = {
            index: 0,
            events: [
            {
                id: "PeytonRoad",
                image: require('../../Images/peytonroad.jpg'),
                name: "Peyton Road Wall"
            }, {
                id: "CivilRights",
                image: require('../../Images/civilrights.jpg'),
                name: "The Civil Rights Act"
            },
                {
                id: "LesterMaddox",
                image: require('../../Images/lestermaddox.jpg'),
                name: "Lester Maddox"
            },
                {
                id: "Stadium",
                image: require('../../Images/fultonstadium.jpg'),
                name: "Atlanta-Fulton County Stadium"
            },
                {
                id: "SummerhillRiot",
                image: require('../../Images/summerhill.jpg'),
                name: "The so-called Summerhill Riot"
            },
            ]
        };
    }

    _renderItem = ( {item, index} ) => {
        console.log("rendering,", index, item)
        return (
            <View style={styles.cardContainer} >
                <TouchableOpacity activeOpacity={.8} onPress={ () => {
                this.props.navigation.navigate(item.id);
                }}>
                    <View style={styles.card}>
                        <Image style={styles.image}
                            source={item.image}>
                        </Image>
                    </View>
                </TouchableOpacity>
                    <View style={styles.titleBackground}>
                        <Text style={styles.title}>{item.name}</Text>
                    </View>
            </View>

        );
    }

    //updates the index variable in state to reflect which card we're looking at
    _onSnapToItem = index => {
        this.setState({ index });
    };

    render = () => {

        console.log("videos: updating")

        return (
            <View>
                <Video
                source={require('../../Images/atlantaskyline.mp4')}
                style={styles.backgroundVideo}
                muted={true}
                repeat={true}
                resizeMode={"cover"}
                rate={1.0}
                ignoreSilentSwitch={"obey"}/>

                <Carousel
                ref={ (c) => { this._carousel = c; } }
                data={this.state.events}
                renderItem={this._renderItem.bind(this)}
                sliderWidth={width}
                sliderHeight={height}
                itemWidth={width}
                itemHeight={height}
                layout={'default'}
                firstItem={0}
                onSnapToItem={this._onSnapToItem}/>

                {console.log(this.state.index)}

                <Pagination
                dotsLength={this.state.events.length}
                activeDotIndex={this.state.index}
                containerStyle={{ backgroundColor: "red", borderWidth: 2 }}
                dotStyle={{
                    width: 10,
                    height: 10,
                    borderRadius: 5,
                    marginHorizontal: 8,
                    backgroundColor: "black"
                }}
                inactiveDotStyle={{
                    backgroundColor: "pink"
                }}
                inactiveDotOpacity={0.4}
                inactiveDotScale={0.6}/>
            </View>
        );
    }
}