![React Native Bros](/img/default-banner.jpg)
- 23
- 6 339
React Native Bros
India
เข้าร่วมเมื่อ 22 ต.ค. 2016
Welcome to my TH-cam channel, where I share my journey of learning and overcoming challenges in React Native app development. My goal is to provide valuable insights and solutions to help you navigate your own projects seamlessly. Let's collaborate and create high-quality apps together.
React Native BLE - Part 2: Reading Characteristics from BLE Devices
In this video, we dive into reading characteristics from BLE (Bluetooth Low Energy) devices using React Native. Whether you're developing an IoT application or just curious about BLE technology, this tutorial will guide you through the essential steps to retrieve data from BLE characteristics.
What You'll Learn:
Setting up your React Native environment for BLE communication.
Scanning and connecting to BLE devices.
Reading characteristics from BLE devices.
Handling characteristic value updates in real-time.
We'll be using an ESP32 microcontroller paired with a DHT11 temperature and humidity sensor to demonstrate practical use cases. By the end of this video, you'll have a solid understanding of how to read data from BLE devices and integrate it into your React Native app.
Don't forget to:
👍 Like this video if you found it helpful
🔔 Subscribe to stay updated on our BLE series
💬 Comment below with any questions or topics you'd like us to cover next!
ESP32: robocraze.com/products/nodemcu-32-wifi-bluetooth-esp32-development-board30-pin?_pos=1&_sid=421881ef4&_ss=r
DHT11: Maison Up | Accurate Temperature... www.amazon.in/dp/B0C41NJSTP?ref=ppx_pop_mob_ap_share
Links:
Part 1: React Native Ble #1
th-cam.com/video/5kg08q4c4Tk/w-d-xo.html
Source Code: github.com/Jeopardous/HelloBros/tree/ble_manager
Reach Out To Me-
Linkedin: www.linkedin.com/in/adarsh-sharma-77191914a/
Instagram: _adarshboss_?igsh=dTBrZmVja2ZrOHJi&
Let's get started and unlock the potential of BLE in your React Native applications!
What You'll Learn:
Setting up your React Native environment for BLE communication.
Scanning and connecting to BLE devices.
Reading characteristics from BLE devices.
Handling characteristic value updates in real-time.
We'll be using an ESP32 microcontroller paired with a DHT11 temperature and humidity sensor to demonstrate practical use cases. By the end of this video, you'll have a solid understanding of how to read data from BLE devices and integrate it into your React Native app.
Don't forget to:
👍 Like this video if you found it helpful
🔔 Subscribe to stay updated on our BLE series
💬 Comment below with any questions or topics you'd like us to cover next!
ESP32: robocraze.com/products/nodemcu-32-wifi-bluetooth-esp32-development-board30-pin?_pos=1&_sid=421881ef4&_ss=r
DHT11: Maison Up | Accurate Temperature... www.amazon.in/dp/B0C41NJSTP?ref=ppx_pop_mob_ap_share
Links:
Part 1: React Native Ble #1
th-cam.com/video/5kg08q4c4Tk/w-d-xo.html
Source Code: github.com/Jeopardous/HelloBros/tree/ble_manager
Reach Out To Me-
Linkedin: www.linkedin.com/in/adarsh-sharma-77191914a/
Instagram: _adarshboss_?igsh=dTBrZmVja2ZrOHJi&
Let's get started and unlock the potential of BLE in your React Native applications!
มุมมอง: 217
วีดีโอ
Netflix-Like Card Animation in React Native | Reanimated 3 (Motion Sensor)
มุมมอง 9721 วันที่ผ่านมา
Welcome to my channel! In this video, we'll be recreating the captivating card animation effect from Netflix's home page, where the cards move dynamically in response to your device's motion. 🔗 Resources: Source Code: github.com/Jeopardous/HelloBros/tree/gravity_sensor Reanimated Sensor Documentation: docs.swmansion.com/react-native-reanimated/docs/device/useAnimatedSensor/ 📺 Watch Next: th-cam...
Stunning Parallax Swipe Effect in React Native with FlatList & Reanimated 3
มุมมอง 371หลายเดือนก่อน
Welcome to my React Native tutorial! In this video, I'll walk you through the steps to create an eye-catching parallax swipe effect using FlatList and Reanimated. This effect is perfect for making your app's UI more engaging and dynamic. What You'll Learn: Setting up a FlatList with custom snap intervals for smooth scrolling. Utilizing Reanimated to achieve seamless animations. Fetching and dis...
Typing Indicator & Typewriter Effect (Reanimated 3)
มุมมอง 3312 หลายเดือนก่อน
📝 Description: Welcome to an exciting journey into the world of dynamic user interfaces with Reanimated 3! In this video, we dive deep into creating immersive typing indicators and captivating typewriter effects using the powerful Reanimated 3 library in React Native. 👀 What You'll Learn: Typing Indicator: Discover how to create a sleek and engaging typing indicator that brings life to your cha...
Ripple Effect In React Native (Reanimated 3)
มุมมอง 2963 หลายเดือนก่อน
In thins video Learn how to add captivating ripple effects to your React Native apps using Reanimated 3 and Gesture Handler. Elevate your user experience with sleek animations. Let's dive in! Other Animation Videos AnimatedBottomSheet : th-cam.com/video/yhN-R8B0fvM/w-d-xo.html Swipe To Start : th-cam.com/video/l69EcMjSFGg/w-d-xo.html Drag N Drop : th-cam.com/video/sI5ml-1H_Rc/w-d-xo.html Circle...
React Native BLE - Part 1: Scanning NearBy BLE Devices
มุมมอง 1.4K3 หลายเดือนก่อน
In this video, we scan nearby BLE (Bluetooth Low Energy) devices using React Native. Whether you're developing an IoT application or just curious about BLE technology, this tutorial will guide you through the essential steps to ble setup and scan nearby devices. What You'll Learn: Setting up your React Native environment for BLE communication. Scanning and connecting to BLE devices. Don't forge...
React Native #4 - Redux Toolkit
มุมมอง 873 หลายเดือนก่อน
This video would help you to setup redux with redux-toolkit, redux-thunk, redux-persist to your react native application smoothly. Github Link: github.com/Jeopardous/HelloBros/tree/organize_folders BottomSheet Animation: th-cam.com/video/yhN-R8B0fvM/w-d-xo.htmlsi=j6_15J8vr GXozh CustomTextInput: th-cam.com/video/s9HsLoT3GB8/w-d-xo.htmlsi=WZ9poX62czQTgOI3 #reactnative #redux #reduxtoolkit #javas...
Animated Bottom Sheet & Lottie Animation (Reanimated 3 & Lottie)
มุมมอง 2593 หลายเดือนก่อน
In this video we are creating customised bottom sheet with lottie animation using Reanimated & GestureHandler. Timecodes 0:00 - Introduction 0:46- LottieAnimation 12:24 - BottomSheet UI 26:55 - Gesture Animation Custom Textinput React Native (Reanimated) th-cam.com/video/s9HsLoT3GB8/w-d-xo.html Code Link: github.com/Jeopardous/HelloBros/tree/handshake_animation #reactnative #javascript #coding ...
React Native #3 - React Native Custom Fonts
มุมมอง 1143 หลายเดือนก่อน
This video would help you to import custom fonts to your react native smoothly. #reactnative #javascript #coding #customfonts #customfont #typescript #react #setup #beginners
React Native #2 - React Native Localization Setup
มุมมอง 1314 หลายเดือนก่อน
This is the 2nd video of our "React Native Project Setup Form Scratch" series where we have setup a localization service to change app language. It's a simpler way to handle change language throughout the app. CustomTextInput Video Link: th-cam.com/video/s9HsLoT3GB8/w-d-xo.htmlsi=vtx4OVAeVbQkNYIp CustomInput Code: github.com/Jeopardous/HelloBros/tree/custom_textinput #reactnative #javascript #c...
React Native Drag and Drop (Reanimated & GestureHandler)
มุมมอง 5964 หลายเดือนก่อน
React Native Drag and Drop (Reanimated & GestureHandler)
Animated Loader In React Native Using Reanimated
มุมมอง 754 หลายเดือนก่อน
Animated Loader In React Native Using Reanimated
Ripple Effect In React Native (Reanimated 3)
มุมมอง 2444 หลายเดือนก่อน
Ripple Effect In React Native (Reanimated 3)
Custom Textinput React Native (Reanimated 3)
มุมมอง 794 หลายเดือนก่อน
Custom Textinput React Native (Reanimated 3)
React Native Swipe To Start Animation (Reanimated 3 & Gesture Handler)
มุมมอง 3235 หลายเดือนก่อน
React Native Swipe To Start Animation (Reanimated 3 & Gesture Handler)
Bro you are doing good job. Waiting for next topic
Hi bros please create tutorial like half pie chart showing progress with arrow indicator like speedometer
Sure 👍
Hi Bro, i want to fetch MULTIPLE values FROM single characteristicuuid by map or array iterate in react native ble manager display in react native app
sry bro didn’t see your reply do you still need any help ??
Thanks man it was a great work. Helped me a lot! Keep doing....
Welcome and stay tuned😁
Main aapko zarur support karunga bhai bass hindi main bana na aur source code uploaad ksrte rahna aur mic use karoo aacha wala your sound havebtoo much low 🙌
Thanks bro, Phla video tha kuch pta nhi tha kya krna h 😅
Are you shying too communicate in Hindi
Nhi bhai tum bologe to marwadi me bhi bna dunga but hindi me jyada logo tk nhi jayega aur bitter truth yhi h ki corporate me aage kaam kroge to english me hi hoti h communication aur mujhe bhi itni hi aati h jitna me smjh pau aur dusro ko smjha pau 😅
hi, i'm noticing that you are using expo for this tutorial. mind if you explain to us how do you do when you first setup/initialize the project ? i'm new to this mobile development. thank you very much
No I am not using expo in this. Its React Native CLI. If you still need help with expo then I can help you.
I have my linkedIn link in description you can msg me there I will help you setting up with expo.
Nice work bro. Will you create a series of react native reanimated ? How to use it all
I am thinking about that one. 😃
@@reactnativebros that would be great 👍
@@reactnativebros yes i think you should it since there arent much videos in it to learn
bro this is sick 🔥🔥
Thanks Bro 👊
i try to read data using characteristics and i did it, but i got numbers what does it mean how to communicate with this numbers Read value from 34:85:18:94:14:B1 - 4fafc201-1fb5-459e-8fcc-c5c9c331914b - beb5483e-36e1-4688-b7f5-ea07361b26a8: 48,0,206,63,9,0,0,0,51,112 please do the needful i want to send instructions to the esp32 and receive data from esp32 as well using react native ble manager. please do the needful Thanks.
Each digit represents different types of data or depends upon the manufacturer. You have to check docs of the ble sensor you are using.
I want to create the video but My esp32 is not connecting with mac. Can you send me the esp32 controller link ???
Yeah bro thats cool !
Thanks Bro 😄
very good man keep up the good work
Thanks Bro 👊
How to get Local own Bluetooth Ip Address
Are you talking about esp32 or arduino? If it’s not Bluetooth low energy device then you have to use react-native-bluetooth-classic.
Can we use the react-native-ble-manager to connect with bluetooth neckband
Yes you can but you won’t be able to perform action other than connecting like tap to pause and play because we don’t have access to its characteristic and services
@@reactnativebros Do you know how to communicate with drone transmitter and get information related to drone.
I haven’t worked with the drone but we can do that by Implementing the SDK provided by the manufacturer. If it does not support react native then we can write native methods and export those to react native. I have done that with agora SDK.
please make it using ble-plx
Ok I will update it.
@@reactnativebros thanks alot, but make changes in same code and techniques please.
All is Fine but Mobile Device Bluetooth not access
same issue
We can not search for Mobile devices because mobile devices comes under the classic Bluetooth not Low energy. This library only search for Bluetooth Low Energy devices like tracker,temperature,heart rate etc.
@@reactnativebros i have install classic bluetooth library but throw gradle error
Let me try it. I will give you update.
@@reactnativebros ??? have u tried?
Awesome video, just a heads up the audio is really quiet I had to listen on max volume ❤
Sorry about that 😅 I forgot to connect the mic
Love the video, Keep them coming on reanimated!!
Thanks bro, They are coming 😁
Hey thank you for this. waiting for #2
Thanks bro I am finding the open source device so that we can do the proper ble communication with its services, read and write characteristics.😀
@@reactnativebrosAlright brother, I'm working with an ESP32 and I'm particularly interested in your upcoming videos on reading and writing characteristics to the device. I'm eager to learn more about this!
thanks
Welcome
Love you so much bhai
bạn có thể cho tôi xin source code được không, cảm ơn bạn
github.com/Jeopardous/HelloBros/blob/button_ripple_animation/src/components/ButtonRipple.tsx
Really nice video. 8:47 Why you have added base width to 365? Is there any documentation or reference to get more details. Thanks
Thanks Bro, I have chosen 365 as base width by experience in creating apps for different devices. There is no such documentation.😄
this tutorial help me lot but can you explain me why its not working for scrollable list like I have 20+ images in list so now it is scrollable but I cant able to drag the images from outside the component ... so please can you help to fix this ?
Let me try it out and I’ll get back to you
@@reactnativebros Hey brother did you try it ? ,because I try it in your project but it drag under the scrollview so now cant able to drag it out from the list of images can you please tell me how can I solve this issue
Yes you are correct its not working. I tried many solutions but nothing is working but we can do workaround and make this work. I will share with you currently I am out of town for personal reasons once I am back we will find a way 👍
@@reactnativebros ok please find any solution
Did you find it?
Bro can you make tutorial for kanban board in react native
I will try. Its just drag and drop with scroll view 👍
Please make something like this
@@kamal9650-z1w I was trying to do it but mobile screen is very small for kanban board and there are certain limitations for mobile android and ios OS does not allow drag and drop from a scroll view to another view.
Very informative bro, thank you
Thanks bro 👍
@@reactnativebros bro can you make some videos on react native svg library, I'm a newbie and wanted to use this library to make a custom tab bar but can't find any tutorial on TH-cam that explain fundamentals of using svg in react native
svg is used for creating shapes that can not be done with simple views but for tab bar you should explore the reanimated library 😃
@@reactnativebros can i dm you the picture of tab bar that i wanted to create on Instagram? Maybe you can help me with something
sure bro instagram.com/_adarshboss_?igsh=dTBrZmVja2ZrOHJi&
Help me find solutions 6 days but not solved React native firebase firebase me collection user he user id bhi diya he data{ Item { mobile 📱 laptop } How to add items without any item delete }
No worries I will help you. Ping me on insta instagram.com/_adarshboss_?igsh=dTBrZmVja2ZrOHJi&
hello brother, what is your tech stack ? i want to learn react native .
I am proficient in React Native with 4.5 years of experience and have some familiarity with Node, React Js and native Android. 😁
This is my instagram you can contact me. I will help you 😄instagram.com/_adarshboss_?igsh=dTBrZmVja2ZrOHJi&
@@reactnativebros okey I'll ping you then.
Bhai you are hidden gem. Glad I found you.
Thanks 👊, Let me know if anything specific you need😬
@@reactnativebros bhai bluetooth or push notification with expo and app ki pyari awaz mein,
sure 👍
Shandar zabardast zindabad ❤
Thanks brother 😊
Nice and informative content
Thank you for making this video. Much needed 🙏
Good Tutorial.
Please create more animation videos like this and add source code please
Thank you for your response. While the description is pending verification, you can find the code on this GitHub repository: github.com/Jeopardous/HelloBros/tree/swipe_animation