Can we put Component inside IndicatorViewPager Item ??

[bhardwaj786]

Hello, i want to put a Custom Component inside Pager Item i'm using following code but its show warning (Each ViewPager Child must be a View) export default class Main extends Component {

state = {
    bgColor: new Animated.Value(0)
}

_setBgColor = Animated.event([{bgColor: this.state.bgColor}])

render () {
    let bgColor = this.state.bgColor.interpolate({
        inputRange: [0, 1, 2,3],
        outputRange: ['hsl(187, 74%, 47%)', 'hsl(89, 47%, 54%)', 'hsl(12, 97%, 59%)', 'hsl(12, 97%, 59%)']
    })
    return (
        <View style={{flex: 1}} >
            <Animated.View
                style={[styles.bgView, {backgroundColor: bgColor}]}
            />
            <IndicatorViewPager
                style={{flex: 1}}
                indicator={this._renderIndicator()}
                onPageScroll={this._onPageScroll.bind(this)}
                autoPlayEnable
                onPageSelected={(p) => console.log(p)}
            >
                <PagerItem/>
                <PagerItem/>
                <PagerItem/>
                <PagerItem/>
            </IndicatorViewPager>
            <View style={styles.divider} />

        </View>
    )
}

_renderIndicator () {
    return (
        <PagerDotIndicator
            pageCount={4}
            style={{bottom: 16}}
            dotStyle={{backgroundColor: '#FFFFFF88'}}
        />
    )
}

_onPageScroll (scrollData) {
    let {offset, position} = scrollData
    if (position < 0 || position >= 3) return
    this._setBgColor({bgColor: offset + position})
}

}

my PagerItem.js component is following

import React, { Component } from 'react' import { StyleSheet, View, Text } from 'react-native'

export default class PagerItem extends Component {

render() {
    return (
        <View>
            <Text>PagerItem</Text>
        </View>
    )
}

}

[iamswain25]

It didn't work for me, I had to put the component inside <View>