import React from 'react'
import PropTypes from 'prop-types'
import { ActivityIndicator, Platform, StyleSheet, View } from 'react-native'

/**
 * A flexible little View Finder component to be used in conjunction with react-native-camera
 */
const ViewFinder = ({
  backgroundColor,
  containerStyle,
  height,
  width,
  borderWidth,
  color,
  loading,
  borderLength
}) => (
  <View style={[styles.container, containerStyle, { backgroundColor }]}>
    <View style={[styles.viewfinder, { backgroundColor }, { width, height }]}>
      <View
        style={[
          styles.topLeftEdge,
          {
            height: borderLength,
            width: borderLength,
            borderColor: color,
            borderLeftWidth: borderWidth,
            borderTopWidth: borderWidth
          }
        ]}
      />
      <View
        style={[
          styles.topRightEdge,
          {
            height: borderLength,
            width: borderLength,
            borderColor: color,
            borderRightWidth: borderWidth,
            borderTopWidth: borderWidth
          }
        ]}
      />
      {loading && (
        <ActivityIndicator animating={loading} color={color} size='large' />
      )}
      <View
        style={[
          styles.bottomLeftEdge,
          {
            height: borderLength,
            width: borderLength,
            borderColor: color,
            borderLeftWidth: borderWidth,
            borderBottomWidth: borderWidth
          }
        ]}
      />
      <View
        style={[
          styles.bottomRightEdge,
          {
            height: borderLength,
            width: borderLength,
            borderColor: color,
            borderRightWidth: borderWidth,
            borderBottomWidth: borderWidth
          }
        ]}
      />
    </View>
  </View>
)

ViewFinder.propTypes = {
  /**
     * Background color of View Finder
     */
  backgroundColor: PropTypes.string,
  /**
     * Style View Finder outer container
     */
  containerStyle: PropTypes.object,
  /**
     * Border with of View Finder edges
     */
  borderWidth: PropTypes.number,
  /**
     * Border length of View Finder edges
     */
  borderLength: PropTypes.number,
  /**
     * Color of View finder edges and Spinner
     */
  color: PropTypes.string,
  /**
     * Height of View Finder
     */
  height: PropTypes.number,
  /**
     * Bool to indicate if loading indicator should be shown
     */
  loading: PropTypes.bool,
  /**
     * Width of View Finder
     */
  width: PropTypes.number
}

ViewFinder.defaultProps = {
  containerStyle: {},
  backgroundColor: 'transparent',
  borderWidth: 3,
  borderLength: 25,
  color: '#fff',
  height: 200,
  loading: false,
  width: 200
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    position: 'absolute',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0
  },
  viewfinder: {
    alignItems: 'center',
    justifyContent: 'center'
  },
  topLeftEdge: {
    position: 'absolute',
    top: 0,
    left: 0
  },
  topRightEdge: {
    position: 'absolute',
    top: 0,
    right: 0
  },
  bottomLeftEdge: {
    position: 'absolute',
    bottom: 0,
    left: 0
  },
  bottomRightEdge: {
    position: 'absolute',
    bottom: 0,
    right: 0
  }
})

export default ViewFinder

@@ -85,18 +85,8 @@
 tor,
- Platform,
  Sty

Remove unused import