"react-native-reanimated": "~1.2.0",
"react-native-retween": "^0.2.0",
"expo": "^35.0.0",
"react": "16.8.3",
 "react-dom": "16.8.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",

"sdkVersion": "35.0.0",

import React, { useRef, useEffect, useState } from 'react'
import { Text } from 'react-native'
import Animated from 'react-native-reanimated'
import { useTween } from 'react-native-retween'

import styled from 'styled-components/native'
import { sharedStyles } from 'theme'

type PromptType = 'success' | 'warn' | 'error'

interface Props {
  children: React.ReactNode
  isVisible: boolean
  type?: PromptType
}

const mapColor = (type: PromptType = 'success') => {
  switch (type) {
    case 'error':
      return 'red'
    case 'warn':
      return 'yellow'
    case 'success':
      return 'green'
    default:
      return 'green'
  }
}

const animConfig = {
  spring: {
    mass: 1,
  },
  from: {
    opacity: 0,
  },
  to: {
    opacity: 1,
  },
}

const FormPrompt = ({ children, isVisible }: Props) => {
  const { play, values, stop } = useTween(() => animConfig)
  useEffect(() => {
    play(isVisible)
  }, [isVisible])
  return (
    <Animated.View style={values}>
      <Wrapper>
        <Text>{children}</Text>
      </Wrapper>
    </Animated.View>
  )
}

const Wrapper = styled.View<Pick<Props, 'type'>>`
  padding: ${sharedStyles.spacing.md};
  border-radius: ${sharedStyles.bdrs.sm};
  background-color: ${props => mapColor(props.type)};
`

export default FormPrompt