content: import React from 'react'
  import PropTypes from 'prop-types'
  import { StyleSheet } from 'react-native'
  import Item from './Item'
  import { View } from 'react-native-animatable'
  
  class Dock extends React.PureComponent {
    static Item = Item
    ref = null
    componentDidUpdate = (prevProps, prevState) => {
      if (this.props.visible !== prevProps.visible && this.props.visible) {
        this.ref.animate('fadeInUp', 300)
      }
    }
    componentWillUpdate = (nextProps, nextState) => {
      if (this.props.visible !== nextProps.visible && !nextProps.visible) {
        this.ref.animate('fadeOut', 300)
      }
    }
  
    render() {
      const { children, visible, renderItemView } = this.props
      return visible ? (
        <View
          style={styles.container}
          ref={ref => {
            this.ref = ref
          }}
        >
          <View>{renderItemView}</View>
          <View style={styles.dock}>{children}</View>
        </View>
      ) : null
    }
  }
  
  Dock.propTypes = {
    visible: PropTypes.bool
  }
  
  Dock.defaultProps = {
    visible: null
  }
  
  const styles = StyleSheet.create({
    container: {
      backgroundColor: '#000000',
      bottom: 0,
      position: 'absolute',
      width: '100%',
      zIndex: 100
    },
    dock: {
      alignItems: 'center',
      flex: 1,
      flexDirection: 'row',
      height: 50
    },
    dockItem: {
      alignItems: 'center',
      flex: 1
    },
    dockText: {
      color: '#ffffff'
    }
  })
  
  export default Dock
  