text: import React from 'react';
  import Icon from 'react-native-vector-icons/MaterialIcons';
  import { Animated } from 'react-native';
  import { PanGestureHandler, State } from 'react-native-gesture-handler';
  import {
    Container,
    Content,
    Card,
    CardHeader,
    CardContent,
    Title,
    Description,
    CardFooter,
    Annotation,
  } from './styles';
  import Header from '../../components/header';
  import Tabs from '../../components/tabs';
  import Menu from '../../components/menu';
  
  export default function Main() {
    const offset = 0;
    const translateY = new Animated.Value(0);
  
    const animatedEvent = Animated.event(
      [
        {
          nativeEvent: {
            translationY: translateY,
          },
        },
      ],
      { useNativeDriver: true },
    );
  
    function onHandlerStateChange(event) {
      if (event.nativeEvent.oldState === State.ACTIVE) {
        const { translationY } = event.nativeEvent;
  
        offset + -translationY;
  
        translateY.setOffset(offset);
        translateY.setValue(0);
      }
    }
  
    return (
      <Container>
        <Header />
  
        <Content>
          <Menu translateY={translateY} />
  
          <PanGestureHandler
            onGestureEvent={animatedEvent}
            onHandlerStateChange={onHandlerStateChange}
          >
            <Card style={{
              transform: [{
                translateY: translateY.interpolate({
                  inputRange: [-350, 0, 380],
                  outputRange: [-50, 0, 380],
                  extrapolate: 'clamp',
                }),
              }],
            }}
            >
              <CardHeader>
                <Icon name="attach-money" size={28} color="#666" />
                <Icon name="visibility-off" size={28} color="#666" />
              </CardHeader>
  
              <CardContent>
                <Title>Saldo disponível</Title>
                <Description>R$ 199.999,99</Description>
              </CardContent>
  
              <CardFooter>
                <Annotation>
                    Transferência de R$ 20,00 recebida de Vitoria Gonçalves hoje às 16:00h
                </Annotation>
              </CardFooter>
            </Card>
          </PanGestureHandler>
        </Content>
  
        <Tabs translateY={translateY} />
      </Container>
    );
  }
  