KeyboardAvoidingCustom.js

KeyboardAvoiding.js

import React, { useEffect, useRef } from "react";
import {
  Image,
  Keyboard,
  Platform,
  StyleSheet,
  Pressable
} from "react-native";
import { Layout } from "@ui-kitten/components";
import { Video } from "expo-av";
import LoginForm from "./LoginForm";
import Animated, {
  useSharedValue,
  withTiming,
  useAnimatedStyle,
  Easing,
} from "react-native-reanimated";

export default function LoginBody() {
  const videoRef = useRef(null);

  const translateY = useSharedValue(0);

  useEffect(() => {
    const showEvent = Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
    const hideEvent = Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";

    const keyboardShowSub = Keyboard.addListener(showEvent, (e) => {
      const keyboardHeight = e.endCoordinates.height;
      translateY.value = withTiming(-keyboardHeight / 2, {
        duration: e.duration ?? 250,
        easing: Easing.out(Easing.cubic),
      });
    });

    const keyboardHideSub = Keyboard.addListener(hideEvent, (e) => {
      translateY.value = withTiming(0, {
        duration: e?.duration ?? 250,
        easing: Easing.out(Easing.cubic),
      });
    });

    return () => {
      keyboardShowSub.remove();
      keyboardHideSub.remove();
    };
  }, []);

  const formAnimatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateY: translateY.value + 10 }],
  }));

  return (
    <Pressable
      style={{ flex: 1 }}
      onPress={() => Keyboard.dismiss()}
    >
      <Layout style={{ flex: 1 }}>
        <Video
          ref={videoRef}
          style={{
            position: "absolute",
            top: -100,
            left: 0,
            right: 0,
            bottom: 0,
          }}
          source={require("../../../assets/animation/login-bg-vid.mp4")}
          resizeMode="contain"
          isLooping
          shouldPlay
        />
        <Image
          source={require("../../../assets/images/logo-tagline.png")}
          resizeMode="contain"
          style={styles.logo}
        />

        <Animated.View style={[styles.formContainer, formAnimatedStyle]}>
          <LoginForm />
        </Animated.View>
      </Layout>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  logo: {
    width: "100%",
    height: 70,
    position: "absolute",
    top: 100,
    left: 0,
    right: 0,
    zIndex: 10,
  },
  formContainer: {
    flex: 1,
    justifyContent: "flex-end",
  },
});