Loading video...

Video Failed to Load

Go Home

Here’s how I handle keyboard avoidance in React Native 👇 The keyboard covering your inputs is one of the most annoying UX issues on mobile. In this video, I show how I use react-native-keyboard-controller with reanimated to smoothly avoid this problem (👨‍💻 source code below)

50,772 views • 1 year ago •via X (Twitter)

11 Comments

Beto's profile picture
Beto1 year ago

Source Code: If you are interested in my scheduling app, get access at:

Rainmaker's profile picture
Rainmaker1 year ago

Don’t trust your strategy until it’s passed this test. Walk-Forward Validation is the key to crafting a reliable machine learning model. Learn how this method helps you avoid overfitting and prepares your model for live market scenarios. Full article and code on my Substack:

Vitor Oliveira's profile picture
Vitor Oliveira1 year ago

Thank you for the tip, Beto! Recently I discovered we can achieve this behavior using insets.ime from react-native-unistyles (v3). @jpudysz did a demo in this live on the Expo youtube channel.

Beto's profile picture
Beto1 year ago

@jpudysz Oh that is awesome! 👏 thanks for sharing 📝

Nevo David's profile picture
Nevo David1 year ago

pretty cool fix, honestly this problem annoys me like crazy - you think mobile ui stuff ever stops being a pain point or its just the price for flexibility

Sujeet Kumar's profile picture
Sujeet Kumar1 year ago

That keyboard related all issue should fix from react native core. It's really very annoying 😭 to handle every screen

Dibakar Mandal's profile picture
Dibakar Mandal1 year ago

Can this handle android custom keyboards as well? Like Ms swiftkey

Thomas Viaud's profile picture
Thomas Viaud1 year ago

What is the difference between your code and using components such as KeyboardAvoidingView or others provided with the package ?

Thijs Sondag's profile picture
Thijs Sondag1 year ago

This is super helpfull, since I'm building a tool that sits on top of the keyboard 🙂 Thanks for this!

MartycFly.base.eth | 𝝠 |👨‍🎓 = 🔑's profile picture
MartycFly.base.eth | 𝝠 |👨‍🎓 = 🔑1 year ago

Love all the content 🙌🙌

Alexandre Morgado's profile picture
Alexandre Morgado1 year ago

Thanks for this tutorial! I was struggling with something similar and i used KeyboardAwareScrollView which made it work perfectly!

Related Videos