Skip to content

Instantly share code, notes, and snippets.

@pedrocunha
Last active September 2, 2022 09:36
Show Gist options
  • Save pedrocunha/dbecbbf0223e1aff48aaebea5461d30e to your computer and use it in GitHub Desktop.
Save pedrocunha/dbecbbf0223e1aff48aaebea5461d30e to your computer and use it in GitHub Desktop.
// original source: https://medium.com/@ndyhrdy/making-the-bottom-sheet-modal-using-react-native-e226a30bed13 🙇
import React, {useEffect, useRef} from 'react';
import {
Animated,
Dimensions,
Modal,
PanResponder,
StyleSheet,
View,
} from 'react-native';
export default (props) => {
const screenHeight = Dimensions.get('screen').height;
const panY = useRef(new Animated.Value(screenHeight)).current;
const resetPositionAnim = Animated.timing(panY, {
toValue: 0,
duration: 300,
useNativeDriver: true,
});
const closeAnim = Animated.timing(panY, {
toValue: screenHeight,
duration: 500,
useNativeDriver: true,
});
const translateY = panY.interpolate({
inputRange: [-1, 0, 1],
outputRange: [0, 0, 1],
});
const handleDismiss = () => closeAnim.start(props.onDismiss);
useEffect(() => {
resetPositionAnim.start();
}, [resetPositionAnim]);
const panResponders = useRef(
PanResponder.create({
onStartShouldSetPanResponder: () => true,
onMoveShouldSetPanResponder: () => false,
onPanResponderMove: Animated.event([null, {dy: panY}], {
useNativeDriver: false,
}),
onPanResponderRelease: (_, gs) => {
if (gs.dy > 0 && gs.vy > 2) {
return handleDismiss();
}
return resetPositionAnim.start();
},
}),
).current;
return (
<Modal
animated
animationType="fade"
visible={props.visible}
transparent
onRequestClose={handleDismiss}>
<View style={styles.overlay}>
<Animated.View
style={{
...styles.container,
transform: [{translateY: translateY}],
}}
{...panResponders.panHandlers}>
<View style={styles.sliderIndicatorRow}>
<View style={styles.sliderIndicator} />
</View>
{props.children}
</Animated.View>
</View>
</Modal>
);
};
const styles = StyleSheet.create({
overlay: {
backgroundColor: 'rgba(0,0,0,0.2)',
flex: 1,
justifyContent: 'flex-end',
},
container: {
backgroundColor: 'white',
paddingTop: 12,
paddingHorizontal: 12,
borderTopRightRadius: 12,
borderTopLeftRadius: 12,
minHeight: 200,
},
sliderIndicatorRow: {
flexDirection: 'row',
marginBottom: 4,
alignItems: 'center',
justifyContent: 'center',
},
sliderIndicator: {
backgroundColor: '#CECECE',
height: 4,
width: 45,
},
});
@wlyonsSkillz
Copy link

The overlay View remains after dismissing.

@PrasathRavichandran
Copy link

PrasathRavichandran commented Oct 3, 2021

{/* This will give functionality to click on the overlay to close the modal popup and remove the overlay during the close of modal popup /}
{/
BottomSheet.js */}

const handleDismiss = () => closeAnim.start(() => props.onDismiss());
<Modal
      animationType="fade"
      visible={true}
      onRequestClose={handleDismiss}
      transparent>
      <TouchableWithoutFeedback onPress={handleDismiss}>
        
      <View style={styles.overlay}>
          <Animated.View
            style={{...styles.container, transform: [{translateY: translateY}]}}
            {...panResponders.panHandlers}>
            <View style={styles.sliderIndicatorRow}>
              <View style={styles.sliderIndicator} />
            </View>
            {children}
          </Animated.View>
        </View>

      </TouchableWithoutFeedback>
</Modal>

{/* Yourcomponent.js */}

...
const [openModal, setopenModal] = useState<boolean>(false);

const onOpen = () => {
    setopenModal(true);
};

const onDismiss = () => {
   setopenModal(false);
};

return (
    <View>
         <Button title="Open" onPress={onOpen}/>
         {openModal && (
              <BottomSheet onDismiss={onDismiss}>
                    <Text>hello</Text>
              </BottomSheet>
          )}
    </View>
)

...

@fkazemi5236
Copy link

how we can have an event or pressable in children and after press it, close bottomsheet?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment