Animated React Native Sign Up Bottom Sheet

SignUpBottomSheet.tsx

import {NavigationProp} from '@react-navigation/native';
import {Button, Text} from '@ui-kitten/components';
import React, {useEffect, useState} from 'react';
import {StyleSheet, View} from 'react-native';
import BottomSheet from 'reanimated-bottom-sheet';

export interface ISignUpSheet {
  isOpen: boolean;
  navigation?: NavigationProp<any, any>;
  onClose: (...args: any) => void;
}

export const SignupSheet = ({isOpen, navigation, onClose}: ISignUpSheet) => {
  const [snapPoint, setSnapPoint] = useState(0);

  useEffect(() => {
    if (isOpen) {
      setSnapPoint(400);
    } else {
      setSnapPoint(0);
    }
  }, [isOpen]);

  const onEmailPress = () => {
    onClose();
    if (navigation) navigation.navigate('Auth');
  };

  const renderInner = () => (
    <View style={styles.panel}>
      <Text style={styles.panelTitle} category="h5">
        SIGN UP TO CONTINUE ORDER
      </Text>
      <Button
        style={{...styles.panelButton, backgroundColor: '#4968AD'}}
        size="large">
        Continue with Facebook
      </Button>
      <Button
        style={{...styles.panelButton, backgroundColor: '#E03F2A'}}
        size="large">
        Continue with Google
      </Button>
      <Button
        style={{...styles.panelButton}}
        size="large"
        appearance="ghost"
        onPress={onEmailPress}>
        Continue with Email
      </Button>
      <Text style={{padding: 8, textAlign: 'center'}}>
        By signing up you agree to our Terms and Conditions and Privacy Policy
      </Text>
    </View>
  );

  const renderHeader = () => (
    <View style={styles.header}>
      <View style={styles.panelHeader}>
        <View style={styles.panelHandle} />
      </View>
    </View>
  );

  if (isOpen) {
    return (
      <View style={styles.container}>
        <BottomSheet
          snapPoints={[0, snapPoint]}
          initialSnap={0}
          renderContent={renderInner}
          renderHeader={renderHeader}
          onCloseEnd={onClose}
          enabledInnerScrolling={false}
          enabledBottomInitialAnimation={true}
        />
      </View>
    );
  } else {
    return null;
  }
};

const styles = StyleSheet.create({
  container: {
    height: '100%',
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'rgba(17, 17, 17, 0.2)',
  },
  panel: {
    height: 600,
    padding: 20,
    backgroundColor: '#fff',
  },
  header: {
    backgroundColor: '#fff',
    paddingTop: 10,
    borderTopLeftRadius: 12,
    borderTopRightRadius: 12,
  },
  panelHeader: {
    alignItems: 'center',
  },
  panelHandle: {
    width: 100,
    height: 6,
    borderRadius: 4,
    backgroundColor: '#000',
    marginBottom: 16,
    opacity: 0.1,
    shadowColor: '#000000',
  },
  panelTitle: {
    textAlign: 'center',
    marginBottom: 16,
  },
  panelButton: {
    borderColor: '#F0EFEF',
    borderStyle: 'solid',
    marginVertical: 8,
  },
});