Fix React Native Keyboard Covering TextInputs #2

Published: 09 June 2023
on channel: ToThePointCode
3,716
49

In this video, we look at how to handle the keyboard covering TextInputs in React Native using a custom container component, part 2.
GET SOURCE CODE 📀⬇️

🔴 Resulting Source Code - https://bit.ly/keyboard-avoiding

🔴 Get full access to All Source Codes and other resources released DURING the Month - https://bit.ly/ttpc-monthly-access

NOTES

🔵 In this part #2, we adjust the custom container component to work for pages with header and react-navigation.

LET’S WORK

👋 You can reach me via email at - [email protected]

CHECK OUT THESE HELPFUL TUTORIALS

🟡 Complete React and Node JS Login System -    • Login Page with React and Node Js + E...  

🟡 Node JS Projects -    • Node JS Starter Guide  

🟡 React Native Projects -    • React Native Starter Guide  

🟡 Publishing Expo React Native App to Play Store Journey
   • Publish Expo React Native App to Play...  

🟡 PHP Project
   • PHP CRUD Application ft MySQL, JQuery  

TOOLS USED

🟠 Tool for my thumbnail & images - https://partner.canva.com/ttpc

🟠 Cheap website domain name - https://namecheap.pxf.io/ttpc


FOLLOW US ON:

🔵 GitHub - https://github.com/tothepointcode

🔵 YouTube -    / @tothepointcode  

CHAPTERS

00:00 Progress in Previous Part | What will be done
00:25 KeyboardVerticalOffset Introduction
01:57 Handling Page Headers
02:20 Necessary React Navigation Installations
04:00 Extra but Important Package
04:33 Navigation Setup in App
06:11 New Header & Issues
07:11 Re-Fixing Keyboard Avoidance
09:04 Fixing Excess Padding on Android
10:47 Final Notes

#tothepointcode #reactnative #keyboardavoidingview