ToThePointCode
ToThePointCode
  • 120
  • 1 445 240
Checkbox Inputs ( Buttons ) in React Native
In this video, we look at creating checkbox inputs/buttons in a React Native / Expo App using basic React Native components.
GET SOURCE CODE 📀⬇️
🔴 Resulting Source Code - bit.ly/radios-and-checkboxes
🔴 Get full access to All Source Codes and other resources released DURING the Month - bit.ly/ttpc-monthly-access
NOTES
🔵 We build the component from scratch and test out how the data will look like when submitted.
LET’S WORK
👋 You can reach me at - contact.tothepointcode@gmail.com
CHECK OUT THESE HELPFUL TUTORIALS
🟡 Complete React and Node JS Login System - th-cam.com/play/PLk8gdrb2DmChrL50moKeFNAVnFqZ3GLF7.html
🟡 Node JS Projects - th-cam.com/play/PLk8gdrb2DmCh7bDI-OzoUSkWUxQg0n5A_.html
🟡 React Native Projects - th-cam.com/play/PLk8gdrb2DmChwoNzs5n2iAvqak4-euA5H.html
🟡 Publishing Expo React Native App to Play Store Journey
- th-cam.com/play/PLk8gdrb2DmCjsRsDIwMBJdf350qKMiJ8R.html
🟡 PHP Project
- th-cam.com/play/PLk8gdrb2DmCjGHFH1iQxdJUTWsxyceSO0.html
TOOLS USED
🟠 Tool for my thumbnail & images - partner.canva.com/ttpc
🟠 Cheap website domain name - namecheap.pxf.io/ttpc
FOLLOW US ON:
🔵 GitHub - github.com/tothepointcode
🔵 TH-cam - th-cam.com/channels/WUk0Y_h1bLvB8qLZ4lAS8A.html
CHAPTERS
00:00 What will be done
00:30 Setting up the Checkbox Component Structure
02:48 Building Checkbox Component
05:37 Adjusting Styles for Active Options
06:55 Unchecking the Active Options
08:12 Alerting the Chosen Options with a Submit Button
#tothepointcode #reactnative #checkbox
มุมมอง: 947

วีดีโอ

Radio Inputs ( Buttons ) in React Native
มุมมอง 7704 หลายเดือนก่อน
In this video, we look at creating radio inputs/buttons in a React Native / Expo App using basic React Native components. GET SOURCE CODE 📀⬇️ 🔴 Resulting Source Code - bit.ly/radios-and-checkboxes 🔴 Get full access to All Source Codes and other resources released DURING the Month - bit.ly/ttpc-monthly-access NOTES 🔵 We build the component from scratch and test out how the data will look like wh...
Persisting and Sharing Data In A React Native | Expo App
มุมมอง 2.3K8 หลายเดือนก่อน
In this video, we look at how to persist and share data across various parts of a React Native or Expo App using Secure Store and Context API. GET SOURCE CODE 📀⬇️ 🔴 Resulting Source Code - bit.ly/rn-data-storage 🔴 Get full access to All Source Codes and other resources released DURING the Month - bit.ly/ttpc-monthly-access NOTES 🔵 We'll look at how to store the user’s details securely after log...
Image Upload in React Native | Expo App
มุมมอง 23K8 หลายเดือนก่อน
In this video, we look at implementing image upload in a React native or expo app using expo-image-picker. GET SOURCE CODE 📀⬇️ 🔴 Resulting Source Code - bit.ly/rn-img-up 🔴 Get full access to All Source Codes and other resources released DURING the Month - bit.ly/ttpc-monthly-access NOTES 🔵 The goal here is to upload and display an image from the user’s gallery or take a new image with the camer...
Creating Custom Reusable Message Modals in React Native
มุมมอง 3.4K11 หลายเดือนก่อน
In this video, we look at how to create custom reusable message modals in React Native. GET SOURCE CODE 📀⬇️ 🔴 Starter Theme File - bit.ly/message-modal-theme 🔴 Full Resulting Source Code (JS & TS) - bit.ly/custom-message-modal 🔴 Get full access to All Source Codes and other resources released DURING the Month - bit.ly/ttpc-monthly-access NOTES 🔵 We create various types of message modals and han...
Fix React Native Keyboard Covering TextInputs #4 - TypeScript Continues
มุมมอง 664ปีที่แล้ว
In this video, we continue adding TypeScript support to the custom component that handles the keyboard covering the TextInputs project in React Native. GET SOURCE CODE 📀⬇️ 🔴 Resulting Source Code - bit.ly/keyboard-avoiding-ts 🔴 Get full access to All Source Codes and other resources released DURING the Month - bit.ly/ttpc-monthly-access NOTES 🔵 We continue converting the whole project to use Ty...
Fix React Native Keyboard Covering TextInputs #3 - TypeScript
มุมมอง 832ปีที่แล้ว
In this video, we start adding TypeScript support to the custom component that handles the keyboard covering the TextInputs project in React Native. GET SOURCE CODE 📀⬇️ 🔴 Resulting Source Code - bit.ly/keyboard-avoiding-ts 🔴 Get full access to All Source Codes and other resources released DURING the Month - bit.ly/ttpc-monthly-access NOTES 🔵 We start converting the whole project to use TypeScri...
Fix React Native Keyboard Covering TextInputs #2
มุมมอง 2.6Kปีที่แล้ว
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 - bit.ly/keyboard-avoiding 🔴 Get full access to All Source Codes and other resources released DURING the Month - bit.ly/ttpc-monthly-access NOTES 🔵 In this part #2, we adjust the custom container component to work for pa...
Fix React Native Keyboard Covering TextInputs #1
มุมมอง 10Kปีที่แล้ว
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 - bit.ly/keyboard-avoiding 🔴 Get full access to All Source Codes and other resources released DURING the Month - bit.ly/ttpc-monthly-access NOTES 🔵 In this part #1, we build the custom container component and ap...
Using Date Picker with TextInput (Expo | React Native App)
มุมมอง 36Kปีที่แล้ว
In this video, we look at how to trigger the DateTimePicker with the TextInput component in an expo or react native app. GET SOURCE CODE 📀⬇️ 🔴 Resulting Source Code - bit.ly/expo-text-input-date-picker 🔴 Get full access to All Source Codes and other resources released DURING the Month - bit.ly/ttpc-monthly-access NOTES 🔵 We implement the datepicker with the appropriate settings and code require...
Simple Node Auth Backend #12 - OTP Forgot & Reset Password II
มุมมอง 2.5Kปีที่แล้ว
In this part #12, we look at verifying password reset one time pins and updating the password to a new value. GET SOURCE CODE 📀⬇️ 🔴 Resulting Source Code - bit.ly/simple_nodejs_auth 🔴 All Other Source Codes & Support - bit.ly/ttpc-monthly-access NOTES 🔵 In this video series, we look at how to create a simple & clean node js authentication and authorization backend using mongoDB and JWT. LET’S W...
Simple Node Auth Backend #11 - OTP Forgot & Reset Password I
มุมมอง 4.1Kปีที่แล้ว
In this part #11, we look at how to start a password reset process using otp by requesting for the reset. GET SOURCE CODE 📀⬇️ 🔴 Resulting Source Code - bit.ly/simple_nodejs_auth 🔴 All Other Source Codes & Support - bit.ly/ttpc-monthly-access NOTES 🔵 In this video series, we look at how to create a simple & clean node js authentication and authorization backend using mongoDB and JWT. 🔵 In this v...
Simple Node Auth Backend #10 - OTP Email Verification III
มุมมอง 1.9Kปีที่แล้ว
In this part #10, we look at enforcing the email verification with otp in our simple node js authentication backend. Ensuring users cannot login without email verification. GET SOURCE CODE 📀⬇️ 🔴 Resulting Source Code - bit.ly/simple_nodejs_auth 🔴 All Other Source Codes & Support - bit.ly/ttpc-monthly-access NOTES 🔵 In this video series, we look at how to create a simple & clean node js authenti...
Simple Node Auth Backend #9 - OTP Email Verification II
มุมมอง 2.6Kปีที่แล้ว
In this part #9, we look at how to accept and verify the one time pin for email verification. GET SOURCE CODE 📀⬇️ 🔴 Resulting Source Code - bit.ly/simple_nodejs_auth 🔴 All Other Source Codes & Support - bit.ly/ttpc-monthly-access NOTES 🔵 In this video series, we look at how to create a simple & clean node js authentication and authorization backend using mongoDB and JWT. LET’S WORK 👋 You can re...
Simple Node Auth Backend #8 - OTP Email Verification I
มุมมอง 6Kปีที่แล้ว
In this part #8, we start the email verification process using the otp system we created. We work on requesting verification. GET SOURCE CODE 📀⬇️ 🔴 Resulting Source Code - bit.ly/simple_nodejs_auth 🔴 All Other Source Codes & Support - bit.ly/ttpc-monthly-access NOTES 🔵 In this video series, we look at how to create a simple & clean node js authentication and authorization backend using mongoDB ...
Simple Node Auth Backend #7 - OTP System II
มุมมอง 3Kปีที่แล้ว
Simple Node Auth Backend #7 - OTP System II
Simple Node Auth Backend #6 - OTP System I
มุมมอง 10Kปีที่แล้ว
Simple Node Auth Backend #6 - OTP System I
Simple Node Auth Backend #5 - Easily Monitor the MongoDB
มุมมอง 1.2Kปีที่แล้ว
Simple Node Auth Backend #5 - Easily Monitor the MongoDB
Simple Node Auth Backend #4 - Login Auth Middleware (JWT)
มุมมอง 1.8Kปีที่แล้ว
Simple Node Auth Backend #4 - Login Auth Middleware (JWT)
Simple Node Auth Backend #3 - User Login
มุมมอง 2.2Kปีที่แล้ว
Simple Node Auth Backend #3 - User Login
Simple Node Auth Backend #2 - User Signup
มุมมอง 2.8Kปีที่แล้ว
Simple Node Auth Backend #2 - User Signup
Simple Node Auth Backend #1 - App & Database Setup
มุมมอง 7Kปีที่แล้ว
Simple Node Auth Backend #1 - App & Database Setup
Building an Expo App with Bare React Native Packages
มุมมอง 3.6Kปีที่แล้ว
Building an Expo App with Bare React Native Packages
Generating iOS & Android Builds for a React Native App (In the Cloud | Without a Mac)
มุมมอง 31Kปีที่แล้ว
Generating iOS & Android Builds for a React Native App (In the Cloud | Without a Mac)
Complete Dark & Light Theme in a React Native App (Multiple Switching Methods & Saving Theme)
มุมมอง 12Kปีที่แล้ว
Complete Dark & Light Theme in a React Native App (Multiple Switching Methods & Saving Theme)
Generating 4 Random Digits (OTP) with JavaScript (Node JS)
มุมมอง 2.8Kปีที่แล้ว
Generating 4 Random Digits (OTP) with JavaScript (Node JS)
React Native News Feed App | Dark & Light Theme Project #2
มุมมอง 1.5Kปีที่แล้ว
React Native News Feed App | Dark & Light Theme Project #2
React Native News Feed App | Dark & Light Theme Project #1
มุมมอง 4.2Kปีที่แล้ว
React Native News Feed App | Dark & Light Theme Project #1
Custom React Native Reusable Components using TypeScript
มุมมอง 3.7Kปีที่แล้ว
Custom React Native Reusable Components using TypeScript
Time-Saving React Native Button Component | React Native TypeScript Components #7
มุมมอง 1.6Kปีที่แล้ว
Time-Saving React Native Button Component | React Native TypeScript Components #7

ความคิดเห็น

  • @leandropinheiro88
    @leandropinheiro88 5 วันที่ผ่านมา

    Não teria como dar um exemplo de com fazer utilizando o EXPO GO ao invés de utilizar HTML?

  • @Memespage143
    @Memespage143 5 วันที่ผ่านมา

    Mytextinput error i am getting error here please solve this

  • @lavender880331
    @lavender880331 13 วันที่ผ่านมา

    Great! You really help my life!

  • @Arttturslv
    @Arttturslv 16 วันที่ผ่านมา

    Thank you! I was trying for hours and you solved my problem.

  • @dharaniidharkatikaneni4973
    @dharaniidharkatikaneni4973 18 วันที่ผ่านมา

    the file system is really bad

  • @odiahebuka5790
    @odiahebuka5790 19 วันที่ผ่านมา

    Thank you for this tutorial 😁

  • @maciekjurczyga7893
    @maciekjurczyga7893 19 วันที่ผ่านมา

    [SOLVED] Did anyone get 409 conflict while sending an image from gallery?

  • @visheshdadhich6636
    @visheshdadhich6636 22 วันที่ผ่านมา

    bgm is annoying , but the video compensates for it!

  • @namefunction
    @namefunction 23 วันที่ผ่านมา

    🔥🔥

  • @wevessonsilva3516
    @wevessonsilva3516 23 วันที่ผ่านมา

    This guy saved me. Thanks

  • @user-rg8wz2rt9e
    @user-rg8wz2rt9e 24 วันที่ผ่านมา

    Cool

  • @DennisKoros-no3dy
    @DennisKoros-no3dy หลายเดือนก่อน

    Hey Love your videos but i would to ask if you have any alternatives to heruko and if yes please post video on deploying with that alternative

  • @emmanuelareiza9699
    @emmanuelareiza9699 หลายเดือนก่อน

    TYT Bro

  • @techwithflex
    @techwithflex หลายเดือนก่อน

    I was following one of your tutorials and datetimepicker wasn't working. Then I found this video which fixed my problem! You amazing brother!

  • @Lucssants
    @Lucssants หลายเดือนก่อน

    You're amazingggg!!!!

  • @sede189
    @sede189 หลายเดือนก่อน

    The background music is such a distraction....really serves no other useful purpose

  • @rizvirishal1
    @rizvirishal1 หลายเดือนก่อน

    thank you very much 😃

  • @noorseen5226
    @noorseen5226 หลายเดือนก่อน

    What is the theme extention please !

  • @abdelhamidmerghad1324
    @abdelhamidmerghad1324 หลายเดือนก่อน

    Do a video about mapbox inreact native

  • @ronunkwor
    @ronunkwor หลายเดือนก่อน

    You're a life saver ❤

  • @alpmelihilgin1691
    @alpmelihilgin1691 หลายเดือนก่อน

    God Bless You Bro 🙏🙏

  • @deucalion910
    @deucalion910 หลายเดือนก่อน

    What a complete waste of time! Just wrap the scrollview with keyboardAvoidingView and set the behavior for ios padding and for Android undefined. And you're good to go..

  • @nyogrson1
    @nyogrson1 หลายเดือนก่อน

    Looks like gmail no longer supports App Passwords or allows access from less secure apps. Sigh..

  • @nyogrson1
    @nyogrson1 หลายเดือนก่อน

    Do you have the backend video uploaded?

  • @kehrin
    @kehrin หลายเดือนก่อน

    Hey man thanks for once again completely wasting my time. Really appreciated ❤

  • @user-sq5kf1fv2h
    @user-sq5kf1fv2h หลายเดือนก่อน

    can you plz tellme dependencis my react native working on ios not opening on andriod ,plz provide some steps to build (react native cli ,macos) gradle version java kotlin ...

  • @paulinkladi1689
    @paulinkladi1689 หลายเดือนก่อน

    good tuto!! i got an issue every time i want to handle the selected value , i got the previous value can you help me fixing that issue ?

  • @Array_of_objects
    @Array_of_objects 2 หลายเดือนก่อน

    didnt work for me either

  • @stanleysantacruz9767
    @stanleysantacruz9767 2 หลายเดือนก่อน

    Test it in web XD XD

  • @dihuynh4893
    @dihuynh4893 2 หลายเดือนก่อน

    thanks !!!

  • @tusharnagar1398
    @tusharnagar1398 2 หลายเดือนก่อน

    Really helpful, thanks man! You video quality and way to understand is great

  • @--Vishnu--
    @--Vishnu-- 2 หลายเดือนก่อน

    Hii bro I have small help I have already code is there in that you have implement that login with OTP and after registration verification link to send with email these 2 logic implemented that code please reply

  • @jeetpatel1619
    @jeetpatel1619 2 หลายเดือนก่อน

    Thanks for the amazing tutorial

  • @nyogrson1
    @nyogrson1 2 หลายเดือนก่อน

    The google auth is deprecated - is there an updated version to this video?

  • @minhnhat4482
    @minhnhat4482 2 หลายเดือนก่อน

    Nice!! but I wonder whether there is a way we can pick multiple photos at once using this library. I'm kinda struggling with this

  • @ismailchbiki
    @ismailchbiki 2 หลายเดือนก่อน

    Thank you very much for your video. That helped me a lot.

  • @i_am_spex6312
    @i_am_spex6312 2 หลายเดือนก่อน

    i hail o

  • @kshitijkhot1401
    @kshitijkhot1401 2 หลายเดือนก่อน

    Hi @ToThePointCode , Thanks for this amazing content !!! I want to ask a question. Is this styled component styling consistent across Android and IOS, or any extra adjustments are required? Thanks in advance.

  • @kshitijkhot1401
    @kshitijkhot1401 2 หลายเดือนก่อน

    Hi @ToThePointCode, What is your opinion on Styled components i.e. CSS based styling vs Stylesheet components for production projects in react native? Thanks in advance :)

  • @user-cg1pq2kh6t
    @user-cg1pq2kh6t 2 หลายเดือนก่อน

    <ScrollView contentContainerStyle={{ flexGrow: 1 }}> <View style={{ flex: 1 }}> ... </View> </ScrollView>

  • @user-ff7vr7er2r
    @user-ff7vr7er2r 2 หลายเดือนก่อน

    { "status": "FAILED", "message": "An error while checking for existing user!" } This is what it gives me after testing on postman. Help please 10:48

  • @user-rk9py6qf5s
    @user-rk9py6qf5s 2 หลายเดือนก่อน

    Very bad English, only Indians understand.

  • @nyogrson1
    @nyogrson1 2 หลายเดือนก่อน

    Keep getting this error when using .env for my URI string: MongooseError: The `uri` parameter to `openUri()` must be a string, got "undefined". Make sure the first parameter to `mongoose.connect()` or `mongoose.createConnection()` is a string.. Only works when I hard code the URI in the db.js file----I also use .env for my PORT and it works. Seems to be an issue with my mongoDB string. Any suggestions appreciated

  • @nyogrson1
    @nyogrson1 2 หลายเดือนก่อน

    Why did you choose to place front end and backend in separate directories?

  • @godeons
    @godeons 3 หลายเดือนก่อน

    Create a video for the complete ui of the app please. Thanks always

  • @sergioberberian1514
    @sergioberberian1514 3 หลายเดือนก่อน

    Great tutorial, it worked, Thanks man !!

  • @akkaya5009
    @akkaya5009 3 หลายเดือนก่อน

    how can i prevent going back from dashboard screen to login. in other words, how can i set dashboard as initialRoute after login? the user should log out to go back login.

    • @ToThePointCode
      @ToThePointCode 3 หลายเดือนก่อน

      That concept can be found here th-cam.com/video/-N12hjV3DPQ/w-d-xo.html

    • @akkaya5009
      @akkaya5009 3 หลายเดือนก่อน

      @@ToThePointCode thanks

  • @abauchu
    @abauchu 3 หลายเดือนก่อน

    Ok wow, i watched the video before looking up the name of your channel. You ARE "to the point" 👍

  • @abauchu
    @abauchu 3 หลายเดือนก่อน

    Straight and to the point, thank you

  • @D_Ladybug
    @D_Ladybug 3 หลายเดือนก่อน

    Thank you.