Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Animated React Native Sign Up Bottom Sheet
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,
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment