React-Native-snap-carousel check condition with state value?

Question

I'm working on react native app. For slider part I put "Snap carousel" plugin. My slider is showing multiple item. By the time calculate slider item with divide by window width/5. Now I got 5 slider item on display.

The problem is, I need to show slider text for active slider item and change background color.

In render item I can't use state or props value. How can I check with current index value in render item method?

constructor(props) {
    super(props);
    this.state = {
        activeSlide:0
    }
}
_renderItem ({item, index, currentIndex}) {
    const self = this;
    return (
        <View style={styles.slide}>
            <View style={stylesSelect.carouselImg}>
                <Image 
                source={item.src}
                resizeMode='cover' 
                />
            </View>
            <Text>
                {item.title} 
            </Text>
        </View>
    );
}
render() {
    const { data } = this.props;
    return (
        <View style={styles.container}>
            <Carousel
                ref={(c) => { this._carousel = c; }}
                data={data}
                renderItem={this._renderItem}
                sliderWidth={width}
                itemWidth={Math.round(width/5)}
                sliderHeight={height}
                itemHeight={height}
                inactiveSlideScale={0.8}
                inactiveSlideOpacity={0.7}
                loop={true}
                onSnapToItem={(index) => this.setState({ activeSlide: index }) }
            />
        </View>
    )
}

I want to show the {item.title} Text for active slider item only.

Answer 1

renderItem = data =>
        <View>
            <TouchableOpacity >
                {/* {console.log("==================================")}
                {console.log(data)} */}
            <ImageLoad
                style={{ height: 200, width: itemWidth, borderRadius: theme.sizes.itemRadius }}
                placeholderSource={require('./images/logo.png')}
                source={{ uri: data.item.thumbnail }}
                resizeMode={'contain'}
                isShowActivity={true}
                borderRadius={theme.sizes.itemRadius}
                placeholderStyle={{ height: 200, width: itemWidth, borderRadius: theme.sizes.itemRadius }}
            />
            <View style={styles.featuredDiv}><Text style={styles.title}>{data.item.title}</Text></View>
            </TouchableOpacity>
        </View>