Create Custom Draggable Bottom Sheet With React Native

By SaqiXPRO

In This Article , I’ll explain how you can easily create a draggable custom bottom sheet in react native which you can swipe up to draw, and swipe down to hide and with 60FPS animations,

So Without wasting any time, let’s do this

create a new expo or react native project (if you don’t have already created)

create a folder and name it components on the the root of your project

 inside of that folder create a new .js or .jsx file, in our case i’ll name it “actionSheet.jsx”

Add caption

this file will be your main bottom-sheet component, and you can style it your way but some important things you should know are mentioned below

the main view in your actionsheet or bottom-sheet will be styled like this, though you can choose the backgroundColor and borderRadius of your choice

const styles = StyleSheet.create({
container: {
backgroundColor: "#fff",
position: "absolute",
left: 0,
right: 0,
bottom: 0,
height: height / 2.4,
width: width / 1.05,
borderTopRightRadius: 40,
borderTopLeftRadius: 40,
marginHorizontal: 10

},

Next convert your main view into Animated.View by importing {Animated} from react native and then renaming the view into <Animated.View> with that it will be ready to support animated styles.

import { Animated } from 'react-native';

And Your Root View Should be like this

<Animated.View style={styles.container}> </Animated.View>

Next you need to create Animations for this bottom-sheet in order to make it able to draw and hide

create a new Animated value and initialize it with 0 (zero) inside of the state in the actionSheet.jsx or whatever you named it earlier. your code should be similar to the one below

const [alignment] = useState(new Animated.Value(0));

now we have created Animated value. , now we need a function which should have the animation configurations and that would be like the one below

const bringUpAnimation = () => {

Animated.timing(alignment, {

toValue: 1,

duration: 500,

easing: Easing.ease

}).start()

}

now we have created the animation configuration function , now let’s create an intropolate for this

const actionSheetIntropolate = alignment.intropolate({

inputRange: [0,1],

outputRange: [-height / 2.4 + 50, 0]

})

in the above code we used -height/2.4 as it was the height of the bottom-sheet mentioned in the container style, and we added +50 to it so that it doesn’t disappear completely when we hide it, a little portion of it should be visible so that user can grab and pull it.

and finally let’s create a dynamic style

const actionSheetStyle = {

bottom: actionSheetIntropolate

}

and now let’s apply that style to the Animated View

<Animated.View style={[styles.container, actionSheetStyle]}> </Animated.View>

in the above code, we used array for the styles so that we can use multiple style objects.

Now let’s create the trigger for the animations to occur, we’ll use swipe up and swipe down gestures to draw and hide the actionSheet. so for that we’ll use scrollview

return (

<Animated.View style={[styles.container, actionSheetStyle]}>

<View>

<ScrollView

onScroll={(e) => gestureHandler(e)}

style={styles.grabber}

></ScrollView>

</View>

</Animated.View>

);

We Wrapped the ScollView inside of another view, so that it doesn’t take all the height of its parent.

the style for grabBar should be something like that

const styles = StyleSheet.create({

container: {

backgroundColor: "#fff",

position: "absolute",

left: 0,

right: 0,

bottom: 0,

height: height / 2.4,

width: width / 1.05,

borderTopRightRadius: 40,

borderTopLeftRadius: 40,

marginHorizontal: 10

},

grabber: {

width: 70,

borderTopColor: "#ccc",

borderTopWidth: 5,

alignSelf: "center",

marginTop: 10

}

});

Now let’s create the gestureHandler() function

const gestureHandler = (e) => {

if (e.nativeEvent.contentOffset.y > 0) bringUpActionSheet();

else if (e.nativeEvent.contentOffset.y < 0) hideTheActionSheet();

};

if the contentOffset.y is greater than 0 it means we are swiping up so it should bring up the bottom-sheet and if it is less than 0 it means we are swiping down so it should hide the bottom-sheet but for hiding the bottom sheet we need to create that function

const hideTheActionSheet = () => {

Animated.timing(alignment, {

toValue: 0,

duration: 500

}).start();

};

the above function is quite similar to the bringUpActionSheet() but only it takes the animated value back to 0 instead of one.

so that was the tutorial for how to create custom draggable bottomsheet using react native , if you don’t understand it well enough, i have a video tutorial on that also, feel free to watch

Thank You Guys ✌️