Draggable Bottom Sheet with PanResponder and Animated - React Native

[@MinhTechie]

Lý do mình dùng translateY mà không dùng height là vì height sẽ cần interpolate để map từ dy ra height tương ứng và height thì không dùng useNativeDriver true được

[@butters2390]

all the time i was reading what you type and was thinking that you talk in english, i didn't realise until the end

[@angongtruong8441]

mỗi video bạn đều phân tích kĩ như thế này thật hay quá, học được biết bao nhiêu thứ để cải thiện kỹ năng. Mong bạn ra nhiều video như thế này nữa.

[@MinhTechie]

cảm ơn bạn :D bạn share video để ủng hộ mình nhé

[@유저박]

it was so helpful tutorial. Thank you so much

[@memostartup281]

Amazing tutorial

[@MinhTechie]

thanks man

[@playalimbo4905]

very useful my friend, I will use this for an app im working on. thank you a lot

[@MinhTechie]

cool! I'm glad you can understand the video without subtitles

[@manilmalla1911]

Great video. Very helpful.

[@nguyenngoc8239]

hay lắm bạn, mong chờ video tiếp theo của bạn

[@jackychou2644]

Thanks!

[@nishithmunda7789]

life saver 🙂

[@MinhTechie]

thanks bro. Fortunately for us there's already a well-built library for this :)

[@vankhoaphung6651]

Mong anh ra video thả reaction như facebook !

[@cuongnguyen1230]

Kiến thức bổ ích quá. Anh ra video kết hợp Bottom Sheet dùng với Flatlist được không ạ?

[@MinhTechie]

sẽ có e nhé

[@namhoang5282]

đỉnh quá bác ơi. viết được như này bác đã bỏ ra bao nhiều tgian, bắt đầu từ nghiên cứu đến lúc code xong ạ?

[@MinhTechie]

khoảng vài ngày á bạn ơi. ban đầu thì mình tính xài height nhưng sau đó thấy translateY hợp hơn

[@xuanthanhly3528]

hay lắm anh ơi from nhóm của anh :3

[@mykun8737]

hay quá bạn à, lập trình viên react hơn nhau ở chỗ làm animation

[@MinhTechie]

ngoài animation còn nhiều thứ dev cần giỏi lắm bạn :D

[@1theKzzz]

Anh có định làm thêm các bài nâng cao về BottomSheet không ạ? Ví dụ như về việc conflict gesture của PanGesture với 1 cái ScrollView ở bên trong, vấn đề này em tìm hiểu mãi nhưng chưa làm được :(

[@MinhTechie]

ok bạn mình sẽ note lại để mốt làm video

[@damjanosemini796]

How to move modal from everywhere, and not only from the dragHandle ?. Although it close if you doubleClick on it. How to fix it ?

[@MinhTechie]

You can try to add the PanResponder to the whole modal instead of just the handle. I haven't tried the double click but I guess nobody does that 😅

[@awakeupcall5336]

Could you explain how implement logic when draggable sheet doesn’t move outside of screen or another view, but instead draggable area moves above content and hide content w/o moving content inside sheet. It’s like behaviour when user sees content inside that sheet closer to screen edge faster than content that closer to screen center when you uncover the sheet

[@MinhTechie]

sorry I don't get what you mean

[@awakeupcall5336]

​@@MinhTechie imagine picture inside of bottom sheet. it's face of man. your case - when you pull it up, you see firstly hair and eyes. Instead, my case - when you pull it up you see firstly chin and lips and kinda uncover the rest face like from curtain. The image itself is static and doesn't move

[@awakeupcall5336]

What if I want dynamic height of the sheet? Depending on content height inside the sheet

[@bismarkcodes]

in that case, try using minHeight instead

[@ThatIsWhatIThink]

Can you Share Source Code link ?

[@MinhTechie]

github.com/juniorforlife/react-native-animations. Don't forget to give it a star :D

[@ItsDaiko]

Is it possible to set the whole screen to be draggable overruling the content in the view itself? Instead of having the bar you can you just place your finger anywhere and it will react even if there is a button underneath?

[@MinhTechie]

yeah it's totally possible. You can try to wrap the whole view with PanResponder instead of just the bar. I haven't tried so not sure how it works. Things might get complex if you have a ScrollView inside the sheet so I prefer to have only the bar draggable

[@ItsDaiko]

@@MinhTechie How could you implement a bottom screen which has 3 states? so the bottom one. then a mid and a top? which would be +- 95% of the screen?

[@JamLangThang]

Cho em hoi la react native so voi flutter hien tai thi cai nao hon a

[@MinhTechie]

so sánh react native với flutter cũng giống so sánh angular với react e ạ. mỗi cái có cái hay cái dở riêng không cái nào hơn hẳn cái nào