text: import React, { useState, useEffect } from 'react';
  import {
    View,
    TouchableOpacity,
    Text,
    KeyboardAvoidingView,
    TextInput,
    StyleSheet,
    Animated,
    Keyboard
  } from 'react-native';
  
  export default function Login({ navigation }) {
  
    const [offset] = useState(new Animated.ValueXY({ x: 0, y: 95 }));
    const [opacity] = useState(new Animated.Value(0));
    const [logo] = useState(new Animated.ValueXY({ x: 300, y: 350 }))
  
    useEffect(() => {
      KeyboardDidShowListener = Keyboard.addListener('keyboardDidShow', KeyboardDidShow);
      KeyboardDidHideListener = Keyboard.addListener('keyboardDidHide', KeyboardDidHide);
  
  
      Animated.parallel([
        Animated.spring(offset.y, {
          toValue: 0,
          speed: 4,
          bounciness: 20,
          useNativeDriver: false,
        }),
        Animated.timing(opacity, {
          toValue: 1,
          duration: 200,
          useNativeDriver: false,
        })
      ]).start();
  
    }, []);
  
  
    function KeyboardDidShow() {
  
      Animated.parallel([
        Animated.timing(logo.x, {
          toValue: 150,
          duration: 100,
          useNativeDriver: false,
        }),
        Animated.timing(logo.y, {
          toValue: 200,
          duration: 100,
          useNativeDriver: false,
        }),
      ]).start();
    }
  
    function KeyboardDidHide() {
  
      Animated.parallel([
        Animated.timing(logo.x, {
          toValue: 300,
          duration: 100,
          useNativeDriver: false,
        }),
        Animated.timing(logo.y, {
          toValue: 350,
          duration: 100,
          useNativeDriver: false,
        }),
      ]).start();
    }
  
    return (
      <KeyboardAvoidingView style={styles.background}>
        <View style={styles.containerLogo}>
          <Animated.Image style={{ width: logo.x, height: logo.y }} source={require('../../assets/app.png')} />
        </View>
  
        <Animated.View
          style={[
            styles.container,
            {
              opacity: opacity,
              transform: [
                { translateY: offset.y }
              ]
            }
          ]}
        >
          <TextInput
            style={styles.input}
            placeholder="Numero de acesso"
            autoCorrect={false}
            onChangeText={() => { }}
          />
  
          <TextInput
            style={styles.input}
            placeholder="Senha"
            autoCorrect={false}
            onChangeText={() => { }}
          />
  
          <TouchableOpacity onPress={() => navigation.navigate('Home')} style={styles.btnSubmit}>
            <Text style={styles.submitText}>Entrar</Text>
          </TouchableOpacity>
  
          <TouchableOpacity style={styles.btnRegister} onPress={() => navigation.navigate('Ajuda')}>
            <Text style={styles.registerText}>Precisa de ajuda?</Text>
          </TouchableOpacity>
        </Animated.View>
      </KeyboardAvoidingView>
    );
  }
  
  const styles = StyleSheet.create({
    background: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: '#191919'
    },
    containerLogo: {
      flex: 1,
      justifyContent: 'center',
      marginTop: 50
    },
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      width: '90%',
      paddingBottom: 50
    },
    input: {
      backgroundColor: '#FFF',
      width: '90%',
      marginBottom: 15,
      color: '#222',
      fontSize: 17,
      borderRadius: 7,
      padding: 10
    },
    btnSubmit: {
      backgroundColor: '#1E306E',
      width: '90%',
      height: 45,
      alignItems: 'center',
      justifyContent: 'center',
      borderRadius: 7
    },
    submitText: {
      color: '#fff',
      fontSize: 18
    },
    btnRegister: {
      marginTop: 10,
    },
    registerText: {
      color: '#fff'
    }
  });