Welcome to React Native Journey, where we dive deep into the world of React Native app development, from start to finish and beyond! Join me, a fellow developer who's been through it all, from setting up projects to getting apps live and kicking. I'll share my experiences and tips, including cool AI integrations like user data-driven chatbots and streaming LLM responses in React Native (With Python Fast API backend). Let's make your React Native journey exciting, informative, and fun!
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.
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
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?
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
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
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.
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
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
@@PedroHenriqueFerreiraCardosoLi Yeah weird things happen all the time. Just make sure that "tailwind.config.js" has all proper values in the "content" array.
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?
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 :)
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
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
Your video helped me implement a similar thing. And thanks for sharing the repo as well as I missed following a few steps in the video and ended up with the "Unmatched Route" error on app reload. Turned out I wasn't naming the default/first tab as "index".
Thank you so much, this actually worked like a charm, i've been running into issues trying to integrate tailwindcss into react native using tsx but this solved it, I really appreciate the effort
Can i ask is it actually even possible to even make a dev build locally?I would like to use Mapbox and i dont want to build with EAS. I dont want to pay them per build
yes, you can. Please check this video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-T7ybGL5HUhI.html . Also, note that you get 30 free builds per months (15 iOS). I think that is enough for a lot of projects, but depending on your situation, it may not.
@@tuhablasingles With this, I did not prebuild the app locally. I used EAS as you see in the video. I suggest you post something on SO or Github with the exact issue
If you are talking about the Python code, I deploy on Heroku normally. Create a requirements.txt file with pip freeze or stackoverflow.com/questions/31684375/automatically-create-file-requirements-txt. Then create a Procfile. I'm sure there are many tutorials out there to show you how you can deploy FastAPI to Heroku or other hosting platforms/
Thank you for watching the video. What you hear is the normal sound of my voice. While making a video there are so many things happening at once that I sometimes lose focus on how I am heard. I definitely like what I am doing. I'm doing this for free on top of my full-time job as well as maintaining a personal application currently in production. Please consider playing my videos at 1.5x or 2x speed, if you decide to watch any other one of them.
Just a quick question, So i have specific tab screens i want to show in my drawer, but im not sure how to navigate to those nested tab routes from the drawer, or display them. Ive tried having the name as (tabs)/messages , for instance , but i just cant get it to work. Any advice?
Would you please give me a sketch/design of what you are describing or a little bit more explanation of what structure you are trying to achieve? I am not sure I understand your question completely, so I want to make sure.
Thank you SO MUCH!!!! i had so many problems and i almost gave up and was about to just use stylesheet but watching ur video helped me so much!!!! Thank you again
Wouldn't "npx expo prebuild" make this process easier so that you can do the builds on your local machine using "npx expo run:android" and "npx expo run:ios" without the need for eas services?
As much as possible, I'd like to stick with EAS because of all the benefits it offers. Also, a lot of people do not have macOS: docs.expo.dev/workflow/customizing/#manage-custom-native-projects "npx expo run:ios requires Xcode (macOS only) installed on your computer"
If you prebuild native project files (Android and iOS folders), you also need to follow the guidelines here: docs.expo.dev/bare/upgrade/?fromSdk=50&toSdk=51
This was extremely helpful. Starting my journey in react native has been very tough. There are so many ways of doing one thing and I don't even know which one to pick. Watching this video helped me a lot. Thanks man.✊
How do you view your "get" and "post" endpoints in vs code? I'm used to using 127.0.0.1:8000/docs for the swagger interface but want to try your method
