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