Fix React Native Keyboard Covering TextInputs #1

Опубликовано: 08 Июнь 2023
на канале: ToThePointCode

13,243

130

In this video, we look at how to handle the keyboard covering TextInputs in React Native using KeyboardAvoidingView and SafeAreaView, part 1.
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 #1, we build the custom container component and apply it when there's no header on the page.

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 What will be done | Initial Observation
01:17 Custom Container Starts
02:28 Applying Custom Container
03:21 Custom Container Continues | Adding SafeAreaView
04:51 Adding KeyboardAvoidingView
06:28 Adding ScrollView & Content Styles
08:17 Content Entering Status Bar Fix
10:13 Handling External or Received Styles
12:19 Quick Initial Demo

#tothepointcode #reactnative #keyboardavoidingview