React (Native) Journey
React (Native) Journey
  • 20
  • 29 426
Handling SVG Files and Custom Code in React Native
Hello, React Native enthusiasts! Welcome back to our channel, 'React Native Journey'. If you're new here, don't forget to hit that subscribe button for more exciting content on everything React Native.
Today, we're diving into a fascinating topic - Displaying SVG files and custom code in our React Native applications. SVG, or Scalable Vector Graphics, are an excellent way to add complex, scalable visuals to your app. And the best part? It's easier than you might think!
In this video, we'll walk you through the process step-by-step, from installing the necessary packages to rendering your first SVG image. We'll also explore how to integrate custom code into your React Native project, opening up a world of possibilities for your app's functionality and design.
So, whether you're a seasoned developer or just starting your React Native journey, there's something for everyone in this tutorial. Let's get started!
Starter Code: github.com/AkbarBakhshi/RN-Journey/tree/Features/BottomSheet
Final Code: github.com/AkbarBakhshi/RN-Journey/tree/Features/SVG
Useful links:
www.npmjs.com/package/react-native-svg-transformer
www.npmjs.com/package/react-native-svg
github.com/software-mansion/react-native-svg/blob/main/USAGE.md
fontawesome.com/v5/icons/home?f=classic&s=solid
Video Timeline:
00:00 Intro
00:15 Starter Code
00:58 Displaying SVG file in React Native
06:11 Add Custom SVG code in React Native
มุมมอง: 425

วีดีโอ

Implement Bottom Sheet in React Native & Handle Input Fields Inside the Sheet on iOS/Android
มุมมอง 1.3K5 หลายเดือนก่อน
In this comprehensive React Native tutorial, I demonstrate how to implement a bottom sheet in your application. Learn to set up a speed dial button with multiple options and efficiently handle input fields inside the bottom sheet for both iOS and Android. Perfect for developers looking to enhance their app’s UI/UX, this step-by-step guide covers everything from initial setup to advanced customi...
Expo Prebuild Showcase: Dynamically Change Application Icons in React Native
มุมมอง 1.2K6 หลายเดือนก่อน
Discover how to dynamically change application icons in React Native with Expo Prebuild in this detailed showcase! This video provides a step-by-step guide to utilizing Expo Prebuild for seamless icon library changes, enhancing your app's customization and functionality. In this video, you'll learn: - The basics of Expo Prebuild and its benefits for React Native developers. - How to dynamically...
How to Integrate Sanity CMS with React Native/Expo - Step-by-Step Guide
มุมมอง 4566 หลายเดือนก่อน
Learn how to seamlessly integrate Sanity CMS with React Native/Expo in this comprehensive step-by-step tutorial. Whether you’re a beginner or an experienced developer, this video will guide you through the entire process, from setting up your Sanity CMS to integrating it with your React Native/Expo project. Discover tips, best practices, and troubleshooting advice to ensure a smooth integration...
Reset Password & Email Verification with Firebase in Expo App | Step-by-Step Guide
มุมมอง 3716 หลายเดือนก่อน
🔐 Reset Password & Email Verification with Firebase in Expo 🔐 In this comprehensive tutorial, you'll learn how to implement password reset and email verification features in your Expo app using Firebase. Follow along as I walk through each step to ensure your app provides a seamless user experience. 📌 What You'll Learn: Password Reset: How to allow users to reset their passwords securely. Email...
Ultimate Firebase Setup for Expo in 2024: Step-by-Step Guide with Expo Router V3 & Full Auth Flow
มุมมอง 1.1K7 หลายเดือนก่อน
🚀 Ultimate Firebase Setup for Expo (in 2024) 🚀 Welcome to the complete guide for setting up Firebase with your Expo app! In this video, you'll learn how to seamlessly integrate Firebase (React Native Firebase library), utilize Expo Router V3, and implement a full authentication workflow (login, signup and logout). 📌 What You'll Learn: Firebase Setup: Step-by-step instructions to configure Fireb...
Build an Interval Timer with React Native (Expo Router, Navigation, Modal with Vibration and Audio)
มุมมอง 5897 หลายเดือนก่อน
In this video, we will build an Interval Timer together with React Native and Expo. You learn how to create your own custom components in React Native, how to implement modal screens and navigating programmatically between screens with Expo Router. While creating custom input fields, we also learn how to handle the device keyboard properly, tapping outside to close it and also making sure keybo...
Upgrade Expo SDK 50 to 51 - Managed workflow w/ Expo Go AND Development Builds
มุมมอง 1.9K7 หลายเดือนก่อน
Expo SDK 51 is now available. In this video I show you how to Upgrade your Expo project from SDK 50 to SDK 51, whether you are using the Expo managed workflow with Expo Go or you have opted to use Expo development builds with expo-dev-client. Useful links: Expo SDK 51 official release notes: expo.dev/changelog/2024/05-07-sdk-51 GitHub Repo for Managed workflow with Expo Go: github.com/AkbarBakh...
Build an AI Chatbot with Python (FastAPI) and Expo (React Native) with Response Streaming
มุมมอง 9157 หลายเดือนก่อน
Build a chatbot using Python's FastAPI and Expo React Native with ability to stream responses from backend to the frontend in chunks (token by token). react-native-polyfill-globals: github.com/acostalima/react-native-polyfill-globals/tree/master Code for this video React Native GitHub Repo: github.com/AkbarBakhshi/RNJ_GenAI/tree/Features/02-SimpleRagWithStreaming Python GitHub Repo: github.com/...
Building an AI Chatbot with Expo React Native and FastAPI (Python)
มุมมอง 1.4K8 หลายเดือนก่อน
In this video, I show you how you can build an AI chatbot using React Native and communicate with a FastAPI backend code where all your logic for an LLM-powered Chatbot resides. This is a typical use-case of Retrieval Augmented Generation (RAG) with LangChain and OpenAI. GitHub repo (Python code): github.com/AkbarBakhshi/RNJ_GenAI_Backend/tree/Features/00-Starter GitHub repo (React Native start...
React Native Text Input iOS and Android - Handling Keyboard
มุมมอง 8338 หลายเดือนก่อน
Ever had a text input in your React Native application that got covered by Keyboard? It probably works fine in Android but not iOS. Watch this video to learn how you can programmatically handle keyboard display and hiding in a React Native application. Link to previous videos: Expo splash screen, app icon and fonts: th-cam.com/video/jEKdBqTclME/w-d-xo.html Expo development build: th-cam.com/vid...
Expo Router - Cannot read property 'useMemo' of null - Solved
มุมมอง 5588 หลายเดือนก่อน
Getting this error while trying to run your Expo app? Cannot read property 'useMemo' of null. Check out the video for a workaround (until it is fixed systematically) Link to the GitHub issue: github.com/expo/expo/issues/28471#issuecomment-2080094893
Expo Fonts, App Icon and Splash Screen (dark/light mode)
มุมมอง 9818 หลายเดือนก่อน
In this video, we see how Expo Google Fonts can be added to your React Native Application. We show a splash screen (dark or light based on the app theme) while fonts are being loaded, and also, we see how app icons can be added to your application. GitHub repo: github.com/AkbarBakhshi/RN-Journey/tree/Features/Splash_Icon_Fonts Useful links: Expo Splash Screen: docs.expo.dev/develop/user-interfa...
Expo Development Build with Expo Dev Client
มุมมอง 3.6K8 หลายเดือนก่อน
Expo Development Build with Expo Dev Client
The best and easiest way to add a custom theme to Expo app with Expo Router (V3) and NativeWind (V4)
มุมมอง 2K8 หลายเดือนก่อน
The best and easiest way to add a custom theme to Expo app with Expo Router (V3) and NativeWind (V4)
Expo Router V3 - Nested Bottom Tabs Inside Drawer Navigation
มุมมอง 1.3K9 หลายเดือนก่อน
Expo Router V3 - Nested Bottom Tabs Inside Drawer Navigation
React Native Expo with Typescript and Tailwind CSS (NativeWind V4) - 2024
มุมมอง 10K9 หลายเดือนก่อน
React Native Expo with Typescript and Tailwind CSS (NativeWind V4) - 2024
Channel Introduction
มุมมอง 229 หลายเดือนก่อน
Channel Introduction

ความคิดเห็น

  • @subinaryal
    @subinaryal 2 วันที่ผ่านมา

    You're amazing man! Keep up the good work❤

  •  3 วันที่ผ่านมา

    For those who's project has no metro.config.js , run this npx expo customize metro.config.js and make the config file

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

    Thank you!

  • @mohammadsakhidelhovasin3215
    @mohammadsakhidelhovasin3215 26 วันที่ผ่านมา

    Thank you Akbar, that was exactly what I needed.

  • @djwooster
    @djwooster 27 วันที่ผ่านมา

    I followed everything step by step but for some reason I am stuck I want to throw my computer into the ocean

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

    I love you so much you have no idea how much <3 <3

  • @DatTran-t8u
    @DatTran-t8u หลายเดือนก่อน

    Thank u so much it worked for me

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

    Thank you very much!

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

    This is super nice! Thanks :) Was looking exactly for this...

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

    Nice video! But do you actually talk like this or is the video slowed? haha

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

    pls help me with error : Error: Cannot find module 'nativewind/metro'

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

    thank you so much😍

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

    Thanks for the video! Did you by any chance find anything on the app icon multipliers in the android emulator?

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

    Thank you bro, had so many issues with this. Amazing tutorial !!!

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

    How to make preview build in react native expo?

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

    Thank you, your video is very helpful

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

    where do I import my global css if I am using expo router and I have no app.tsx, I just have the app/ directory ? thank you !

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

      no worries ! I figured out :)

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

      ​@@camilobriceno1712Bro plz tell me how to do it plz???

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

      I imported in layout.tsx but the styling is not working in files in components folder

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

      @@Vishu-ge9dx thats what I did, also you can import it in the index.tsx inside the app directory but make sure all the path are good, like your tailwind.config as well

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

      @@camilobriceno1712 i tried to import but it's showing error. And btw do u have a insta so we can learn together and help each other in learning react native??

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

    thank you

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

    After some struggle as I missed one folder settings I able to setup nativewind.

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

    Amazing video, you need 2 thumbs up!

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

    is it possible to use the redirect link for password reset from firebase back to the app and reset the password within the app?

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

    I had to check my settings to see if I accidently had enabled double speed or something, man you talk fast! But very good video though!

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

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

    THANKYOU!!!! I had been on this all day yesterday and kept running into issues. this worked like magic!

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

    eas login it is not working in my windows, can you please help me out.

  • @omaral-salem1993
    @omaral-salem1993 3 หลายเดือนก่อน

    Thanks! for the explenation, easy to follow.

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

    very energic voice 😂

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

    This is Golden!

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

    This was great! If I wanted to use my iPhone device to test this out, I feel like we would only need to change a few steps at the end, correct? I ask because I'm developing on a Windows machine and want to test on my iPhone device, like I'm able to with Expo Go.

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

    Muito obrigado amigo, me ajudou muito.

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

    Bro, show some enthusiasm - u look and sound like a damn machine. Watching the video now :P

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

    I tried this using the nagivation(Typescript) It did not work, Please any hack to that

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

    Incredibly helpful. Could you create a tutorial on implementing multiple languages with RTL support in Expo? Thanks for your amazing content!

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

    Good explanation

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

    i was just looking for this specific combination. gonna rewatch again

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

    Love it, excellent content! grats!

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

    Nice tutorial, as a beginner, this video allowed to create my first app and to understand how react native seems to work. I'll follow your next content. Keep up with the good work

  • @bohdan-tolmachov
    @bohdan-tolmachov 4 หลายเดือนก่อน

    in the end of all steps (12:39) i am stuck on getting this error: tailwindcss(ios) rebuilding... TypeError: style.declarations.findLast is not a function at setStyleForSelectorList (/Users/mac/Desktop/projects/rn-voice-assistant-openai/node_modules/react-native-css-interop/src/css-to-rn/index.ts:358:54) at extractRule (/Users/mac/Desktop/projects/rn-voice-assistant-openai/node_modules/react-native-css-interop/src/css-to-rn/index.ts:175:11) at Rule (/Users/mac/Desktop/projects/rn-voice-assistant-openai/node_modules/react-native-css-interop/src/css-to-rn/index.ts:82:9) at cssToReactNativeRuntime (/Users/mac/Desktop/projects/rn-voice-assistant-openai/node_modules/react-native-css-interop/src/css-to-rn/index.ts:76:15) at sendUpdate (/Users/mac/Desktop/projects/rn-voice-assistant-openai/node_modules/react-native-css-interop/src/metro/poll-updates-server.ts:49:42) at Socket.<anonymous> (/Users/mac/Desktop/projects/rn-voice-assistant-openai/node_modules/nativewind/src/metro/tailwind-cli.ts:106:17) at Socket.emit (node:events:513:28) at addChunk (node:internal/streams/readable:315:12) at readableAddChunk (node:internal/streams/readable:289:9) at Socket.Readable.push (node:internal/streams/readable:228:10) as you may see i guess the issue isn't in the path names. expo gave me a warning about incompatible versions of typescript and expo, and I updated them as it told me to do. but it still doesn't work. any ideas what could trigger this error message?

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

    ty bro

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

    Nativewind wasn't working for my previous projects, but it is now!! thank you so much!!!

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

    struggling to add firestore. i cant seem to get the initalization to work i tried to import the app config from app.config.ts to get it initialized but its not importing as an object

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

    Thank you for the content.

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

    The bottom sheet modal scrolls up to the top while focusing the text input, making the sheet go outside the screen. Is there any fix for this? Im using CLI

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

      ios, android or both?

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

    You're the best. Thank you so much. Was having such a bothersome time getting this configured for native & web. Subscribing!

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

    Post React Native CLI Videos

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

      Expo is my preferred way. That being said, I already have and will have some videos talking about prebuilding the app to access and update ios and android folders. Hopefully, those are close enough to RN CLI.

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

    Hi, very helpful - I did follow the video and tailwind worked however, when I restart the simulator, it is not applying the tailwind styles. Not sure why, it is the same code and same file structure. I am getting this warning though which I don't understanding why it would stop working. But I will try to downgrade my typescript The following packages should be updated for best compatibility with the installed expo version: typescript@5.5.4 - expected version: ~5.3.3

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

      for some weird reason, after saving the global file again it started working. But I haven't changed it since the first time. It was a copy and paste from the docs. Weird

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

      @@PedroHenriqueFerreiraCardosoLi Yeah weird things happen all the time. Just make sure that "tailwind.config.js" has all proper values in the "content" array.

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

    Hi great video, I am beginner and found it very hard to search for the correct implementation. how did you learn to do this? Was there a guide you used? And in the future how can I keep up with the changes of implementation?

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

      Honestly, the best way is to follow a library's documentation. Try building projects and also, look at the breaking changes that are normally listed on the library docs when you try to upgrade to a newer version of a library. Also, you can come back here and look for an updated video in the future. If things change, I try to make updated videos :)

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

    i couldnt get passed the npx expo config --type introspect until i did a prebuild, kept getting an error about the runtimeversion and the androidmanifest.xml even though i didnt have a native android folder yet

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

    Amazing tutorial and as you said in the very beginning - an extremely useful boilerplate to get started with app development. Many thanks! I could successfully follow all your steps and create my little app with firebase authentication. And it works perfectly well within the android emulator (pixel pro 6). However when I tried the app out on my real pixel 6 pro (dev build), the app crashes at the start due to an error stating: "Must be called from main thread". After debugging for a bit, I figured that the error is caused by the useEffect to load an existing theme from AsyncStorage. By uncommenting it, the app works just fine on a real android. So far I tried some other approaches to check for an existing theme, and it seems to always break when we try and setColorScheme(). Any idea how we could fix that? Here is the full log from my android phone: "Must be called from main thread" and then.... recreate Activity.java recreate ActivityCompat.java updateAppConfiguration AppCompatDelegateImpl.java applyApplicationSpecificConfig AppCompatDelegateImpl.java applyDayNight AppCompatDelegateImpl.java applyDayNightToActiveDelegates AppCompatDelegateImpl.java setDefaultNightMode AppCompatDelegateImpl.java setColorScheme AppearanceModule.java invoke Method.java invoke JavaMethodWrapper.java invoke JavaModuleWrapper.java run NativeRunnable.java handleCallback Handler.java dispatchMessage Handler.java dispatchMessage MessageQueueThredHandler.java loopOnce Looper.java loop Looper.java run MessageQueueThredImpl.java run Thread.java

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

    Thank you. It's very userful. I'm looking for this content. <3