Hey, welcome back to Code Vetto. In today's video, I want to share with you five tips that will help you survive 2026 as a React Native developer. These tips will help you simplify your components and screens and write better code more scalable, easier to understand for you and your teammates and also follows best practices. This is going to be a short video. Make sure to stick till the end. You don't want to miss any of these tips. If you like this type of video, don't forget to give it a like and subscribe. And without further ado, let's dive in. If you want to become a master in React Native, check out my course at codevetto.dev. We have courses on React Native, TypeScript, React, Git, GitHub, Live Store for local first applications, and more. In case you didn't know, pro members at Code Vetto get access to a private GitHub organization where you can find production ready examples and applications that some of them are in production, some of them are ideas and examples that you can use to actually implement something similar in your application or just take inspiration from the UI or just to learn how you can implement a specific AI feature or a specific technology. One of my favorite projects and the one that I've been working the most is the AI tattoo application that I'm super proud to share that it's actually a real application that you can check out in the description in case you're curious and it's actually making money already. $49 per month and we're close to 500 customers which is really exciting. Definitely one of the best resources that we have right now for you to take as a reference and learn how to implement Nano Banana for example for image generation and many many more things. I'm going to leave the link in the description with a nice promo code for a nice discount for you. Now, let's get back to the video. Tip number one, guys, prefer pressible over touchable opacity. All right, so to showcase these tips, I'm going to be using my AI tattoo application repo. And the first thing that I want to mention is that please guys, stop using touchable opacity. As you may know, touchable opacity is a component that comes by default with React Native and you can import it to handle press events, but actually no one recommends using touchable opacity nowadays. Instead, please use pressable that also comes with React Native and you can do actually more events and you you get access to on press in for example. That's one you get access on press out, on long press and it's more more versatile. You can style it as you need. And personally, what I've been doing recently is just use this amazing package, Presto. Presto is a React Native library package that you can use from Enzo, one of my friends. He's well known in the React Native community. And he created this abstraction from a pressible that you can just install. Here are the instructions. Personally, I use it in my AI uh tattoo application and it's great because you don't have to worry about haptics or animations when you press a button, an image, whatever you need to be pressable. You can just wrap it like this and use it. And that's what I use in my AI tattoo application. For example, when you press, let's say, one of the images here, uh, you notice that nice animation, when I press it in and then when you release it, it nicely animates back. Then when I press it in a physical device, I will get a haptic feedback. You can configure this in the entry point of your application by configuring the haptics that you want to use. You can even use a different haptic engine if you want to. But in this case, I'm using Expo Haptics. This configuration, it's, you know, at the entry point of my application. And then all the principles that I'm using inside the application will have a nice haptic feedback. Of course, you can also disable it if you don't want it in some cases, as well as the animation. This honestly saved me a lot of time, so highly recommended for 2026. Tip number two, use platform file extensions instead of runtime checks. So if you've been developing React Native applications for a while, you might be familiar with the platform API that you can import from React Native and then have validations like OS equal to then validate the operating system that you want to run this specific code. That works great. But as your application grows in complexity and also if you are implementing native functionality for a specific platform which is what I'm doing here in my AI tattoo application I wanted to go very uh deep native into the iOS APIs. So I'm using Expo UI a lot. That means that some of the things that I'm using here are only going to work on iOS. And instead of having platform validations in line checks for the platform that I want to run this code, I would recommend that instead you use platform extensions for the files. On the left, you can see that I have a profile screen. This is like the default for other platforms that are not iOS. And then I created my profile.ios.tsx screen for iOS only. And in here, as you notice, I'm using a bunch of stuff from Expo UI, Swift UI, which will only work on iOS at the moment. You can do that for components, but it's actually also possible to do it for a specific route. So, for example, let's say that I wanted to create a specific index file in my home route only for iOS. You can create an an index.ios.tsx and have the implementation of iOS here. And then when you compile your application, the iOS it's going to be used for iOS platforms and then other platforms needs to it's going to default to the normal index.tsx. You can use iOS or Android or you can even say native only for iOS and Android or web if you plan to support web in the future and you want to keep the implementation separate. It's really nice and easier to understand, very scalable to just have different platform extensions. Tip number three, and this is actually more like a personal preference, but you know, it's totally okay if you don't want to follow this tip. React Native comes with a model that you can use to present, you know, models and views like on top of other content and that's totally okay. Now the only disadvantage of that is that you need to implement the logic yourself and be very careful when you are defining the model because you want it to be reusable. You want it to look good. You want to to use to look native. But you know personally I would recommend that instead of using the modal use the presentation form sheet to present quickly context on top of the screen that you are working on. For example, let me sign out of the application. What I'm doing in AI tattoo is that of course I allowed the users to go and navigate to the application at any time. But then when you press new tattoo you need to sign in and let me switch to main so that it looks it's because I'm working on a feature but let me again select this is how it looks right now in production. So pretty cool UI. Now, the cool thing about using the form sheet instead of having a modal view here is that on iOS 26, you get this beautiful blur background with liquid glass that looks absolutely amazing. And in this case, I'm constraining the detents to 45% of the screen. But you can even allow the user to move this, right? So, for example, if I allow one, then I can, you know, expand it like this. Even if you are just presenting some options for the screen behind the sheet, I would recommend that you use form sheet instead of a model. It just feels better. And the form sheet, I think, also works on Android if I'm not mistaken. Or on Android, what you can do is just present it as model and then set the presentation animation to be slide from bottom. And this is going to present the model on Android from the bottom. And just to add one more thing before we move on to the next step, I've seen applications like chat GBT to use uh form sheets to present modals to add more context to a chat with more options to add an image or add more context a file to the chat. And you know, it works great instead of having a model that at the end of the day looks more like web stuff. I recommend this tip at least for iOS um because you know it really takes advantage of the native form sheet implementation. Tip number four, prefer flat list over scroll view when it makes sense. React Native comes with a scroll view that you can use like this and you know it works really nice but in some cases especially if you're rendering data that is coming from an API or it's a long list you should use a flat list for example let's take a look at the home screen in my application since I know that this is going to be a pretty short list I only have rows here 1 2 3 four rows this is totally okay being a scroll view and by the way another Pro tip that I wanted to squeeze in here. I also recommend using content insert adjustment behavior property set to automatic instead of wrapping the view in a safe area view. So if you say save area view, you can import it. And this is kind of kind of works. But you can actually just have the main component in the application be a scroll view. And you know if I if you actually do that, this is how it looks, right? the content is behind the header. That looks pretty bad. So, some beginners or some naive solution would be to just use a safe area view. And by the way, these are mistakes that AI makes a lot. So, let me wrap this in here like that. Now, everything is inside the safe area, but still it's not respecting the header because I'm using a large header on iOS. So to prevent that, you can just remove this or maybe keep the safe area view for Android, but I don't think it's needed on Android because we don't have a large header and just have this property to automatic. And this will make sure that the content fits nicely within the scroll area. You can use this property as well on a flat list. Cool thing about flat list over the scroll view is that flat list comes with many other things that you can reutilize and helper properties like for example empty list component when the array of items that you are passing it's an empty array the component will render this component just like that you can just pass a component here you don't need to have a validation like in this case I can just say you know no body parts found and that's it you can also use heather components and the goal is to try to keep the flat list. So in this case, I'm using legend list, but the properties are basically the same. If you're just using flat list, you can just pass the same properties. And you can use, like I said, header components. You can also have a sticky header. There are so many properties that you can use. And the goal is to try to keep the list as the main entry point and the only component that you are rendering for the screen. That way you can again still use the behavior content insert behavior to automatic and this will help you have everything inside the safe area view with the nice animation as you scroll as you can see here. Tip number five and this tip applies if you're using export router or just bare react navigation. Keep your files inside the app folder. Only focus on routing stuff. As an example, here I have my index file which contains a screen, right? This is my on boarding and this is a component that I'm importing. You know, you might be tempted to instead of importing this component, start doing your logic here, having us use the state, fetching data in this screen and this is a bad pattern because it makes refactoring the navigation and moving the layout around very complex because you need to update the imports and stuff like that. So keep these routes as lean as possible. Right? So for example here in my payw wall, the only thing that I'm exporting here is just this component that is coming from my components screen payroll. This allows me to quickly refactor at any time and also reutilize this screen in multiple routes if I need to and present it in a different way if I need to as well because everything related to router is going to be handled within these components. This helps refactoring, maintaining, and really makes it easy to scale. That's it for this quick video, guys. I hope you like it. I hope you learned something new. Don't forget to give it a like and subscribe. Let me know in the comments if I missed something important. And also, let me know the one that you're going to be using the most in 2026. Don't forget to check out kodetto.dev. There is a promo code in the description. And I'm happy to announce that we also offer purchase parity power. Please send me an email at bettoc.dev and I'm happy to help. Thanks for watching and I'll see you in the next one. What's up? Hey