React Native Carousel

carousel.js

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

class Carousel extends Component {
  state = {
    height: 0,
    width: 0,
    scrollPosition: 0,
  };
  constructor(props) {
    super(props);
  }
  measureView(event) {
    this.setState({
      width: event.nativeEvent.layout.width,
      height: event.nativeEvent.layout.height,
    });
  }
  scrollPrevious() {
    if (this.state.scrollPosition > 0) {
      this.setState(
        prevState => {
          return {
            scrollPosition: prevState.scrollPosition - this.state.width,
          };
        },
        () => {
          this._scrollView.scrollTo({
            x: this.state.scrollPosition,
            y: 0,
            animated: true,
          });
          console.log(this.state.scrollPosition);
        }
      );
    }
  }
  scrollNext() {
    const length = React.Children.count(this.props.children);
    if (this.state.scrollPosition < this.state.width * length) {
      this.setState(
        prevState => {
          return {
            scrollPosition: prevState.scrollPosition + this.state.width,
          };
        },
        () => {
          this._scrollView.scrollTo({
            x: this.state.scrollPosition,
            y: 0,
            animated: true,
          });
          console.log(this.state.scrollPosition);
        }
      );
    }
  }
  renderChildren(width){
    return React.Children.map(this.props.children, child => {
    return React.cloneElement(child, {
      width: width
    });
  });
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          onPress={() => this.scrollPrevious()}
          style={{
            height: 50,
            backgroundColor: 'red',
            width: 50,
            position: 'absolute',
            left: 0,
            zIndex: 100,
          }}>
          <View />
        </TouchableOpacity>
        <ScrollView
          ref={c => (this._scrollView = c)}
          onLayout={event => this.measureView(event)}
          showsHorizontalScrollIndicator={false}
          style={{ backgroundColor: 'blue', height: 300, width: 200 }}
          horizontal
          contentContainerStyle={{ height: this.state.height, width: null }}>
          {this.props.children.length > 0 ? this.renderChildren(this.state.width) : null}
        </ScrollView>
        <TouchableOpacity
          onPress={() => this.scrollNext()}
          style={{
            height: 60,
            backgroundColor: 'red',
            width: 50,
            alignSelf: 'center',
            position: 'absolute',
            right: 0,
            zIndex: 100,
          }}>
          <View />
        </TouchableOpacity>

      </View>
    );
  }
}

class Children extends Component {
  constructor(props) {
    super(props);
    console.log(props);
  }
  render() {
    return (
      <View
        style={{
          width: this.props.width,
          height: 300,
          backgroundColor: this.props.color,
        }}
      />
    );
  }
}
export default class App extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Carousel>
        <Children color={'black'} />
        <Children color={'blue'} />
        <Children color={'yellow'} />
      </Carousel>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 200,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
});