React-Native(2.loagApp with animated, interaction)

1. npm i @types/styled-components
   npm i @types/styled-components-react-native
2. 노가다로 animated 하기

import styled from 'styled-components/native'

const Conteainer = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
`
const Box = styled.TouchableOpacity`
  background-color: tomato;
  width: 200px;
  height: 200px;
`

export default function App() {
  const [y, setY] = useState(0)
  const [intervalId, setIntervalId] = useState(null)
  const moveUp = () => {
    const id = setInterval(() => setY((prev) => prev + 2), 10)
    setIntervalId(id)
    // setY(-200)
  }
  useEffect(() => {
    if (y === 200) {
      clearInterval(intervalId)
    }
  })
  console.log('rendering')
  return (
    <Conteainer>
      <Box
        onPress={moveUp}
        style={{
          transform: [{ translateY: y }],
        }}
      />
    </Conteainer>
  )
}

라이버러리 없이 animated 작업할려면 이렇게나 힘듦.