- Видео 10
- Просмотров 4 058
Rami Elwan
Добавлен 22 окт 2012
Learn React Native iOS Turbo Modules by Building a Photo Picker with Swift
In this video you will learn how to create a photo picker native module for React Native using Turbo Modules for iOS using Swift.
Twitter: ElwanRami
Github: github.com/itsramiel
LinkedIn: www.linkedin.com/in/rami-elwan
00:00:00 - Intro
00:00:27 - Developing the iOS Turbo Module with Swift
00:55:39 - Outro
Twitter: ElwanRami
Github: github.com/itsramiel
LinkedIn: www.linkedin.com/in/rami-elwan
00:00:00 - Intro
00:00:27 - Developing the iOS Turbo Module with Swift
00:55:39 - Outro
Просмотров: 104
Видео
How to Play Low-Latency Audio in React Native
Просмотров 9414 дней назад
Struggling with sound issues in your React Native app? In this video, I’ll guide you through react-native-audio-playback solving common audio challenges like: - Reducing latency for precise sound playback. - Playing multiple sounds simultaneously across iOS and Android. - Creating seamless, perfect sound loops. By the end of this tutorial, you’ll have a solid understanding of how to handle audi...
How is Redux better than Zustand?
Просмотров 3072 месяца назад
Both Redux and Zustand are excellent state management libraries. Each of them has their own Pros and Cons. However, one edge that Redux has that is not very obvious when comparing the two is "Cross Store Selection" Cross Store Selection refers to the ability of selecting state across different stores/slices while deriving a piece of state. This feature of redux is crucial for performance purpos...
React.Children API Explained!
Просмотров 1302 месяца назад
The React children props can take many different forms and working with it can sometimes be challenging especially when needing to manipulate the children prop. In this video I introduce you to the 5 functions that React.Children API exposes: React.Children.count React.Children.map React.Children.forEach React.Children.toArray React.Children.only Twitter: ElwanRami Github: github.co...
How to build a React Native C++ Turbo Module (Part 2 Android)
Просмотров 3955 месяцев назад
Hi guys! Today is a special video. I will be showing you how to create a react native c turbo module for Android. The beauty of this approach is that the module is purely C without having to invoke java/kotlin methods as a layer between js and c . Link to repo: github.com/itsramiel/react-native-cpp-turbo/tree/feat/android iOS part: ruclips.net/video/KURIqiCPbco/видео.html This is an upgrade to ...
How to build a React Native C++ Turbo Module (Part 1 iOS)
Просмотров 5245 месяцев назад
Hi guys! Today is a special video. I will be showing you how to create a react native c turbo module for iOS. The beauty of this approach is that the module is purely C without having to invoke objc methods as a layer between js and c . Link to repo: github.com/itsramiel/react-native-cpp-turbo/tree/feat/ios This is an upgrade to react native jsi modules which I showed in the previous two video:...
How to build a React Native C++ module with JSI (Part 2 Android)
Просмотров 2555 месяцев назад
What is up everyone! Today I am following up on the previous video of creating a React Native C module using JSI. In this video, we finish it up by implementing Android and making sure it works for the old and new arch. Here is the link to Part 1: ruclips.net/video/cyFPDoHxD8U/видео.html This module lets you write native code once and share it across platforms. You'll learn how to call function...
How to build a React Native C++ module with JSI (Part 1 iOS)
Просмотров 7075 месяцев назад
Hello Everyone!In today's video, I demonstrate how to harness the power of JSI to build a C React Native module. This module lets you write native code once and share it across platforms.You'll learn how to call functions that: Receive and return primitives Return arrays Return objects Return promises Accept callbacksEnjoy the tutorial! Link to repo: github.com/itsramiel/react-native-jsi-module...
React Native Android Turbo Modules
Просмотров 4925 месяцев назад
Hello everyone! In today's video, I'm building on the previous video and creating a turbo module for Android. You will learn how to: Implement functions with various return types. Create functions that return promises and accept callbacks. Ensure backward compatibility to work with both the old and new architecture. Previous video: ruclips.net/video/Xn1fzgRSHPo/видео.html Project Github: github...
React Native iOS Turbo Modules
Просмотров 1,1 тыс.5 месяцев назад
Hi RUclips, Welcome to my very first RUclips video!. In this video, I show you how to create a react native turbo module and package it inside a library. Specifically, I'll be focusing on the iOS side of turbo modules for this video. Here is the link the projects github url: github.com/itsramiel/react-native-showcase I am planning to make an Android version of this video, so if this sounds like...
What if I want to add my own spm library and want to expose it to react. how can I do that.
As far as I know spm is not supported but you can add pods using the podspec file
@@ramielwan48 hi thanks for reply, But I wrote everything in objc in react library. my spm was completely in swift, I tried to import it in objc files in reactnative library. but my spm not able to create libs , it didn't have .xcodeproj file in it so, let me know if you have some solution on it, I don't even have a clue what I am doing in it. :)
Is it possible to integrate a thirdparty on the module with this new arch??
I believe you can
Thank you!!!❤
You are so welcome!
Again really useful material for learning. Are you planning to make the same tutorial for Android with Turbo Modules?
Thank you! I dont think so since I already had a kotlin Turbo Module video, though not a Photo Picker. I though perhaps something I didnt conver before like Fabric Native Components would be better than covering the same topic again. I did this because I didnt do one with Swift. Feel free to provide suggestions for future videos if you have any!
@@ramielwan48Didn’t find any normal way to use swift native component being integrated with Fabric, seems like still obj-c is needed . But maybe it’s possible to init swift native component as an obj-c class like you did with iOS turbo module?
I am investigating fabric components atm. If I come to anything worth sharing, will do!
hello thanks for the tutorial. i followed it step by step, but i am facing an error i am not able to solve. before adding the changes below the build was successful. i added 2 functions public func peripheralManagerDidUpdateState(_ peripheral: CBPeripheralManager) { return; } var peripheralManager: CBPeripheralManager? = nil private func initBle(){ peripheralManager = CBPeripheralManager(delegate: self, queue: nil) } i started getting 3 errors is swift header Type argument 'CBPeripheralManager' must be a pointer (requires a '*') Type arguments cannot be applied to non-parameterized class 'NSObject' Unknown class name 'CBPeripheralManagerDelegate'; did you mean 'CBPeripheralManager'? are you able to help me solve these issue? i am stuck since the morning with no solution
Hi, It is quite hard to understand and fix the issue from this comment. If you push your code to a repo then I can help you better.
@@ramielwan48 thank you, i was able to fix my error finally. for some reason i had to add #import <CoreBluetooth/CoreBluetooth.h> to my BleAdvertise.h
Yes you absolutely need to import the header files for classes you use 😅. Glad you got it working!
great library to use 👍
I think so too! Thank you Wadee!
how can we make npm package for native modules
You can simply run `yarn release`. The project is already setup to be released
@@ramielwan48 thanks
Is it possible to write turbo modules using swift instead of objective-c??
Yes. I am planning to make a video about it!
@@ramielwan48 thank you! I will wait it
Brilliant explanation! How would you include some 3rd party cpp library into your turbo module?
Hi. Good question! I am honestly not aware of how dependencies are managed in the cpp world, but if I learn how to do that I will make a video about it!
hi i need your help i want to print value from object in cpp code by android log function but it crash my code and Utf8() not convert jsi to std string const std::string addressValue = person.getProperty(rt, "address").asString(rt).utf8(rt); have any function to print detail log
What a great video! 🙏
Hi Beto! I am a fan of your work too. Thanks for passing by and the nice comment!
@ awesome 👏 thank you :)
awesome video, as already said there are some smaller naming changes but i guess one can still get very good information out of this video :) Do you have some ressources to further dive into this topic ?
Hi, yes unfortunately things are changing in react native, so an updated video maybe needed later. My suggestion to dig deeper in the docs in react native, source code, other people libraries.
While generaing example i got this error did not find any solution outside. anyone who faced this? ⠋ Generating example app error: unknown option '--npm' (Did you mean --pm?) node_modules/create-react-native-library/lib/utils/spawn.js:27 reject(new Error(stderr.trim()));
There was an issue with the create react native library package. Try again now
Tremendous value out of the gate. Thanks for this.
Very welcome!
which node version are you using?
you mean on my local machine? 20.11.1
love your vidoes Rami! keep it up
Love your support and work Mo! 🙏
dude keep making videos about advanced react native topics like native implementation and everything. You're doing really good. Please do not stop =)
Hey!! Thank you for the feedback means a lot to know that they are helping you. I would like to make sure that I put quality content and info out there but I am planning to post something in the near future!
Very cool explanation! I'm currently learning and building a small c++ module for fun and just realised with your video I am using the "old way of writing c++ modules for RN?" 😄
Glad you found it useful and led you to the right path!
Great video! Is there a way I can directly contact you? Thank you
Hi, thank you! My twitter is in the description
Awesome content. Please increase the audio by using a mic. Otherwise its great.
Will work on it!
what about react native windows? :(
unfortunately I have no experience with it
So how many languages do I need to know to write a jsi module. 🫠🫠😂😂 Kotlin/Java, objective-c/Swift, c++ and javascript. That's so convenient 😂😂
I feel you😂 I think c++ should be your last resort really, and java/obj c will hopefully be used less and less, and Swift, Kotlin will be the standard. So I guess TS, swift, and kotlin are all you need in the future
Detailed explanation. Thanks for just video, keep creating such content.
Thank you!
awesome video mate Thank you so much for this
Absolutely Welcome!
thank you for such a nice explanation! It would be nice if you made a video about how to use new fabric components
I was thinking of doing something like that. Let me see if I can come up with a good example
what if you replicate some of the native components from react-native, such as text, buttons, and inputs? It will demonstrate how to forward values and callbacks
Yeah that one idea. Also I was thinking of something more interesting maybe a simple time picker? I am not sure I'll see. Also I am not very familiar with the Android dev when it comes to UI, so I will have to see
Btw, the name of the codegen directory has changed to "ReactCodegen" instead of "React-Codegen" in the video
Yes, it was changed with 0.75, pinning this in case someone comes across it. Thank you Charles!
Third video for me! Awesome, as always
Thank you!
Have watched the first turbo module video, the content is awesome! Thanks a lot :D
Glad you are enjoying it!
appreciate your content!
Appreciate your comment!
liked and subscribed! thanks Rami
You're very welcome Mo 🙏
Thanks! I wanna know is support to Expo?
Yes, you just need a development build
@@ramielwan48 Thanks! bro.I using development build.I need to pass the gif image uri to C++ for compression and return either Mat data or gif byte data to JS. Sounds like it could be done with JSI ？right？(I've finished the c++ code)
@@ramielwan48 Thanks ! Then. I have other question. 【Can I using C++ to compress gif just using Expo (native module) without turbo module (JSI) ? 】 because i do made a native module.then i want to use swift code to use Object-C code.then Object-C code use C++ code. But i was get trouble. In expo project. My swift file (in Pods) is fail to import Object-C code because of the xxx-bridging-header.h is not in the same folder. this question make me have to use turbo module (JSI). I am the new.but I really want to know how to use C++ module in Expo before JSI🤣
if you add some graphics for explain and switch to the face camera in some moment when you talk this will make your video 10X better thanks for good content ❤
Appreciate the feedback. Will try it out in future vids
@@ramielwan48❤ One more thing , Try to make short videos And then groub it to one long video
So do you mean like this video I can do it in smaller parts instead of all in one go? Why do you prefer it that way?
@@ramielwan48 1 ) may be someone just want to see specific part 2 ) watch 5 videos every one 5 minutes long It will seem easier to the viewer than watching one 25-minute video Its all up to you if you wana do this or not
Alright thanks for the feedback!
useful☺
Glad you found it this way!
Thanks for the video it would be very helpful
Thank you!!
Thanks a lot man, very very helpful and unique content 🙏🏻🙏🏻
Appreciate the kind words!
Thanks for the context Rami, this is super informative ❤
My pleasure!
This is very good. Keep going
Thanks a lot!
clear explanation! thank you very much for this tutorial
Happy you found it useful!!
Use VS code instead of neo vim(nvim) , so we can better understand the file levels,
Will give that a try
From so long waiting for this, Thanks Man! looking for more content on your channel.
Thanks man! Means a lot
Thanks for the useful video, I hope your next videos about native views, it will be also useful.
Happy it helped you
Good content sir!!
Glad you liked it!
Thank you! That's so cool, bro, it will be perfect if you can give us a real example with a module that is really necessary to use the turbo module. e.g: custom Dynamic Island or handle Kits
Thanks for the idea!
Impressive!! Very informational video
Glad you liked it!
Cool knowledge
Thank you!!