Implement Bottom Sheet in React Native & Handle Input Fields Inside the Sheet on iOS/Android

Publicado em: 14 Julho 2024
no canal de: React (Native) Journey

3,346

In this comprehensive React Native tutorial, I demonstrate how to implement a bottom sheet in your application. Learn to set up a speed dial button with multiple options and efficiently handle input fields inside the bottom sheet for both iOS and Android. Perfect for developers looking to enhance their app’s UI/UX, this step-by-step guide covers everything from initial setup to advanced customization. Don’t miss out on these essential techniques to improve your React Native projects!

GitHub final code: https://github.com/AkbarBakhshi/RN-Jo...
Integrate Sanity CMS in React Native App: https://github.com/AkbarBakhshi/RN-Jo...

Useful Links:
React Native Element UI: https://reactnativeelements.com/docs/...
Speed Dial: https://reactnativeelements.com/docs/...
Material Icons: https://fonts.google.com/icons
React Native Bottom Sheet (Gorhom): https://ui.gorhom.dev/components/bott...
React Native Time Picker: https://github.com/troberts-28/react-...

Video Timeline:
00:00 Intro and demo
01:22 Adding speed dial
08:42 Implementing bottom sheet modal
15:16 Add input box inside bottom sheet modal (iOS and Android)
20:14 Outro

Nesta página do site você pode assistir ao vídeo on-line Implement Bottom Sheet in React Native & Handle Input Fields Inside the Sheet on iOS/Android duração hora minuto segundo em boa qualidade , que foi baixado pelo usuário React (Native) Journey 14 Julho 2024, compartilhe o link com seus amigos e conhecidos, no youtube este vídeo já foi visto 3,346 vezes e gostou 36 espectadores. Boa visualização!