//import liraries
import React, { Component } from 'react'
import { TouchableOpacity } from 'react-native'

// create a component
class CarouselItem extends Component {
  constructor(props) {
    super(props)
    this.state = {
      width: props.width,
    }
  }

  getwidth(e) {
    this.setState({
      width: e.width,
    })
  }
  render() {
    return (
      <TouchableOpacity
        style={{ width: this.state.width }}
        activeOpacity={this.props.activeOpacity}
        onPress={() => {
          this.props.imgTouch(this.props.index)
        }}
        onLayout={e => this.getwidth(e.nativeEvent.layout)}
      >
        {this.props.item}
      </TouchableOpacity>
    )
  }
}

//make this component available to the app
export default CarouselItem