- Видео 36
- Просмотров 7 203
Gautham Vijay
Индия
Добавлен 19 авг 2022
Master Frontend React & React Native App Development with my Videos.
I am Gautham and I am a Lead React and React Native developer with more than 4+ years experience in making 10+ apps and websites and I am based out of India 🇮🇳.
I make tutorial videos on React Native and Mobile app development in general. My unique selling point is that, I do not use any filler or excess stuff and just dive deep into the technical concepts by properly explaining the code and by providing a full demo of the feature I am developing in the tutorial as well as the source code used in that so you can use it in your projects.
Subscribe to get updates on the content I post here!
I am Gautham and I am a Lead React and React Native developer with more than 4+ years experience in making 10+ apps and websites and I am based out of India 🇮🇳.
I make tutorial videos on React Native and Mobile app development in general. My unique selling point is that, I do not use any filler or excess stuff and just dive deep into the technical concepts by properly explaining the code and by providing a full demo of the feature I am developing in the tutorial as well as the source code used in that so you can use it in your projects.
Subscribe to get updates on the content I post here!
AI Chat Bot Text & AudioDemo with Sarvam AI in React Native. @SarvamAI
Here is the complete demo of my AI ChatBot with Indian regional languages support in React Native with help of
SarvamAI's Audio LLMs.
I have discussed,
1. How you can ask questions in Hindi/Tamil and get the responses with text and audio responses.
2. Showcased real time speech transcription with speech recognition API from Apple and retrieving real time answers in form of normal text and audio and on how Character AI and other AI apps like Replika get the real time transcription to work seamlessly.
3. Translating Spoken english to the selected regional language and getting answers in it.
4. Generating profile image for the chatbot with help of Flux.
5. Discussed technicalities on how I impleme...
SarvamAI's Audio LLMs.
I have discussed,
1. How you can ask questions in Hindi/Tamil and get the responses with text and audio responses.
2. Showcased real time speech transcription with speech recognition API from Apple and retrieving real time answers in form of normal text and audio and on how Character AI and other AI apps like Replika get the real time transcription to work seamlessly.
3. Translating Spoken english to the selected regional language and getting answers in it.
4. Generating profile image for the chatbot with help of Flux.
5. Discussed technicalities on how I impleme...
Просмотров: 55
Видео
பெரிய திரைகள் மற்றும் அனிமேஷனுக்கான டெயில்விண்ட் சிஎஸ்எஸ் இன்டர்செக்ஷன் அப்சர்வருடன்.
Просмотров 5421 день назад
கடந்த 3 வாரங்களாக, எங்கள் SAAS பயன்பாட்டிற்காக எங்கள் லேண்டிங் பக்கத்தை மறுசீரமைப்பதில் பணிபுரிந்தேன், மேலும் Frontend டெவலப்மென்ட் மற்றும் டைனமிக் டேட்டாவை எங்கள் அடுத்த JS லேண்டிங் பக்கத்துடன் இணைப்பது பற்றிய எண்ணற்ற கருத்துகளைக் கற்றுக்கொண்டேன் & மீண்டும் கற்றுக்கொண்டேன். நோ கோட் தீர்வை நாங்கள் பயன்படுத்தியிருக்கலாம், ஆனால் நெக்ஸ்ட் ஜேஎஸ் மற்றும் டெயில்விண்ட் ஆகியவற்றுடன் அவுட் அண்ட் அவுட் க...
Tailwind CSS For Larger Screens and Animations with Intersection Observor.
Просмотров 13921 день назад
For the past 3 weeks, I worked on revamping our Landing Page for our SAAS application and learnt & re-learnt numerous concepts about Frontend development and connecting dynamic data to our Next JS landing page. We could have used a No Code solution, but we went with a out and out coded version with Next JS and Tailwind because we wanted 100% customisability of our Landing Page which No Code too...
React Native 76.0 Box Shadows and Filters Integration
Просмотров 17021 день назад
Here is an in depth guide about 2 brand new features in React Native 76.0 with new architecture enabled. 1. Box Shadows. 2. Filters. I have drawn an interesting parallel on how you can compare them with Web based Normal CSS & Tailwind CSS so you can understand them more clearly. Before this update, we had to use the shadow prop which wouldn't work in android and did not give the required end re...
React Native 76.0 - Exploring & Enabling new architecture by fixing CMAKE build issues.
Просмотров 63421 день назад
React Native 76.0 is out and it provides new architecture by default. I have used old architecture for all of my production apps in the past 4 years and the time has come for me to migrate to the stable new architecture for enhanced performance. I have discussed in depth about, 1. Metro Bundler is 10-15x faster with proof. 2. New RN Dev tools. 3. Box shadows and filter use cases 4. Using react-...
Achieving Android 15 Edge to Edge compatibility for your React Native App.
Просмотров 349Месяц назад
Android 15 is around the corner and Google has introduced a new requirement for apps where their app has to be Edge-to-edge compatible and it will be enabled by default for all the apps if the device runs on API Level 35. The latest version as of October 12, 2024 is Android 14 with API Level 34 which does not require your app to be Edge-to-edge compatible. In this video, I will explain how to m...
React Native Maps Integration and Clustering of Markers with help of JSI powered clustering library
Просмотров 235Месяц назад
Hi Guys, I have made a detailed video on how you can integrate clustering in your react-native application with help of react-native-maps I have accomplished the following concepts and discussed in depth about them., 1. Installing react-native-maps for the old architecture and new architecture. 2. Asking location permissions with help of react-native-permissions. 3. Implemented Region Changes a...
React Native Mapbox Integration and Clustering of Markers with help of turf helpers
Просмотров 322Месяц назад
Hi Guys, I have made a a detailed video on how you can integrate Mapbox in your react-native application. I have discussed in depth about, 1. How to install the rnmapbox/map with the privacy attest fix. 2. How to configure them properly in Android & iOS with proper permissions. 3. How to implement Camera animations. 4. How to integrate Clustering with their own turf/helper library. Bonus: This ...
Gautham's Channel Trailer
Просмотров 29Месяц назад
Hi Guys, I am Gautham. I am a Lead Frontend React JS Developer and React Native mobile app developer who has 4 years experience in making responsive websites and apps and has published multiple apps to Apple and Google play stores. I am currently working remotely as a Lead Engineer in an American health and wellness based startup. Whenever I am free during the weekends (As I do not have much fr...
React Native AI Chat Bot App With Server Side Streaming (SSE) with a Express JS Backend. #openai
Просмотров 259Месяц назад
In this video, I have discussed how you can implement Server Side Streaming in React Native with OpenAI's APIs or your own LLMs. I have made the backend with Express JS and have explained each and every line required to make both the frontend and backend work. I have used the react-native-sse library to consume the server side event powered apis in your app. I have discussed how you can use Cha...
Making a Wallpaper App in React Native - Concepts I used to do it.
Просмотров 78Месяц назад
Hi Guys. I made a small but performant wallpaper app in React Native with help of Unsplash API. I used, 1. Infinite Query from React-query for the infinite scroll logic. 2. React Native blob util library to save the image to gallery. 3. Debounced TextInput to prevent race conditions while calling our APIs. The wallpaper app works in both Android and iOS and I can improve more on it. Do let me k...
Background Geolocation Tracking in React Native and mocking locations in Android and iOS simulator.
Просмотров 701Месяц назад
In this video, I have discussed how you can get the location of the user with help of React Native's Geolocation API and found a lot of insights on it which I am sharing here. I have discussed the following concepts on how you can, 1. Mock location in both Android emulator and iOS simulator. 2. How you can draw PolyLines on the map with react native maps' PolyLines when the user moves. 3. I als...
Adding coupon promotion codes to your Stripe Checkouts to generate more revenue for your SAAS.
Просмотров 1032 месяца назад
Adding coupon promotion codes to your Stripe Checkouts to generate more revenue for your SAAS.
Learn how to Localise your iOS App's name - From a React Native Project | With help of XCode.
Просмотров 1142 месяца назад
Learn how to Localise your iOS App's name - From a React Native Project | With help of XCode.
Learn how to Localise your Android App's name - From a React Native Project | Android Studio
Просмотров 552 месяца назад
Learn how to Localise your Android App's name - From a React Native Project | Android Studio
Create AI Generated Ganesha Pictures with React Native and Flux AI and save to Gallery #reactnative
Просмотров 172 месяца назад
Create AI Generated Ganesha Pictures with React Native and Flux AI and save to Gallery #reactnative
Learn to create Stripe customer portal links for your SAAS to manage their user subscriptions
Просмотров 1752 месяца назад
Learn to create Stripe customer portal links for your SAAS to manage their user subscriptions
Customised Video Player with "React Native Video" Library - Demo
Просмотров 583 месяца назад
Customised Video Player with "React Native Video" Library - Demo
Showcasing rn-emoji-keyboard customizability and code in React Native
Просмотров 1214 месяца назад
Showcasing rn-emoji-keyboard customizability and code in React Native
iOS 18 Beta 3 | Changing app icon themes and adding tints | FaceId lock + preview & Hide app
Просмотров 324 месяца назад
iOS 18 Beta 3 | Changing app icon themes and adding tints | FaceId lock preview & Hide app
Android 14 & iOS 17 - Schedule Local & Alarm Notifications with Notifee in React Native
Просмотров 8224 месяца назад
Android 14 & iOS 17 - Schedule Local & Alarm Notifications with Notifee in React Native
Learn to disable font scaling in React Native app.
Просмотров 1,4 тыс.Год назад
Learn to disable font scaling in React Native app.
NeoBudget - Your Personal Finance Budgeting App.
Просмотров 36Год назад
NeoBudget - Your Personal Finance Budgeting App.
Stripe Checkout Session With Next JS, React JS and Node JS with Firebase.
Просмотров 5712 года назад
Stripe Checkout Session With Next JS, React JS and Node JS with Firebase.
really good explanation
Thank you max for your kind words. It helps me out immensely❤️. Do let me know which other topics i should cover. Thanks for the support.
Bro would you like to help me I am stucked at error
What error brother. I would recommend not to upgrade to latest version until 2025 January. There are some crashes for people who upgraded.
@gauthamvijay bhai mai new learner hu JS se react par switch kar rha hu Lekin phla app "Hello World!" ka nhi bna pa rha hu error Aa ja rha hai. Ek bar zoom ya email par video chat kar skte ho kya
@gauthamvijay please bhai madad kar do ho sakta hai to zoom link de do ya Phir koi bhi video call link. Please bhai!
No brother i cant do that. Please refer to online solutions.
did you added this code in the GitHub ?
Hi Bro, I have a question in some other else i need integrate voice to text for that i use @react-native-voice/voice or react-native-voice/voice both are gitting same error on a brand new project and build a project ... can you help me with that?
I am using 73.8 with old arch for this. Open a new issue in GitHub for this package so the members will look into it.
Interesting video. Do you have any idea about offline app using mapbox and react native?
No. I have not come across them.
Hii gautham, I have one question, I know react native pretty well and now want to learn how to develop turbo module and how to write native kotlin and objectives c code, can you share any resources or make video yourself
I am learning it myself and am 90 percent into finishing it. I will take time till 2024 end and once 2025 starts, i will make native kotlin and swift videos which will be advanced. I will also upload expo videos from new year. Thanks for the support. Recommend my channel to my friends so they can subscribe which will motivate me.❤️🔥
Please upload a video explaining how you made it. That will be very helpful. Thanks for this video. I am waiting for a complete tutorial about how to build this app. I hope you upload it soon.
I will definitely do it when the time comes chetan. The main issue is I have to go out with my Android and iPhone and check if background is working in a real scenario. If some projects come up and it has this feature, I will try to do a full fledged video on this which will cover each and every concept where I will explain how Swiggy/Zomato use real time tracking of food delivery agents in React Native with backend support in PostgresSQL with real time data for both delivery agent and users. ( I still have to work and research more on this to make it work ). The amount of effort it will take to do it is astronomical as its very advanced topic. I have about 50+ subscribers and if it increases more, I will do it. Thanks for the support. Please do like share and subscribe so i will get the motivation to do it.
@gauthamvijay don't worry about subscribers. Developer need quality educational and problem solving video content. If you do that the subscribers will increase automatically.
Thats correct chetan. I post moderate to advanced concepts which cater to a smaller audience. But i will definitely make a banger video on location feature when i get all the features done. Thanks for your support❤️🔥
Hi, will this edge to edge thing works on below android 15 for both navigation and status bar color? I'm also doing the same right now using the useLayoutEffect. It manages the status bar but not the bottom navigation bar.
There is a library called react native navigation bar color which i use in production and it works well for this feature. You can use it for android 14 and below. For android 15 the solution i said in video has streamlined a lot of issues for me in my android apps. Let me know if this helped you.
I am not able to find the command to create new project on official docs, do you know it?
Use this brother. npx @react-native-community/cli@latest init AwesomeProject They changed it and put it in a different section. reactnative.dev/docs/getting-started-without-a-framework Use this to create a bare project.
Did you get it?
@gauthamvijay yes
@@gauthamvijay can we connect over linkedin
Sure. I have the link in the profile. Thanks for the support.
Very helpful tutorial about React Native Mapbox indeed. Can you also provide source code link please?
Thank you haasan for the kind words. ❤️🔥 I will provide the source code at a later period for both the react native maps and mapbox videos. Thank you for your support.
Thanks for the Video. Please keep making such content
Thank you pratik for the kind words. I will definetly make indepth videos like these. Please ask your friends to subscribe and like my channel and videos as it will be a boost for me. Please suggest other topics in React Native and in Web React JS/Next JS development. I will do it next.
Thank you for the explanation. How is different than the built-in status bar? I used background transparent and it works for both light and dark. Of course I did the step edge to edge in the xml.
This is a new requirement from google and this library solves it. Like we can make them transparent before the making of this library, but it has become extremely easy to do so now.
in android we can set loopSound as true to continue sound until user do some actions, can we achieve the similar sound functionality in iOS?
Actually i have not tried this out. I will let you know when i come across this feature. Thanks for the support 💖❤️🔥
we need this full vedio with code and explanation
Sure i will share it in future videos. Thanks for the support.
Helpfull Please also provide github for code to understand
Yes we need this feature in react native also update location to backend while in background or in foreground BTW thanks for this intro
I have finished the function you have said here. I will try to upload it when i get free time♥️ Thanks for the support. Please do like share and subscribe❤️
Good work 👏💯
Thanks ❤️
bạn có thể chia sẻ cho tôi được không ?
Sure bro I will. I will try to make a GitHub repository for this.
Do let me know if the technical content I have made here is valuable to you. You can contact me via email for more queries or comment here!
We need updated content about that. So if you share part of this code and make a video it will be best react native video bro
- Which pakcages did you use? - How did you use? - How to make animations?
@@omerdemir9716 1. I used this package for the geolocation tracking - react-native-community/geolocation 2. I used it where when the user starts their trip, they will take on the button and the geolocation tracking starts. 3. I made it with react-native-maps polyline and animated markers, where when the location changes, the polylines and markers move. Do let me know if it helped you out.
@@omerdemir9716 Yeah I will try to do. I am not getting a lot of views or likes or subscribes which is demotivating. So I will do it when I get free time in the weekends. If i get more traction, I will make a full fledged videos as it requires even more advanced implementation as this video itself is an advanced topic.
@@gauthamvijay you right i hope it will
❤
💌🤟
❤🎉
❤
❤
how to show the pop up on screen when have notification?
Hey, Do you mean in android or iOS or both. In iOS there is foregroundsettings which we can use and get it working.
how bro
Will make a video about this
GOT YOU FROM MEDIUM
🎉
Promo`SM 😣
😔 promo sm