The differences between a premium application and a low-quality, maybe bad coded application are in the details. It's not about implementation, you could actually generate it with AI, but if you don't know about these little details that level up your application, you're never going to be able to create a premium application. These subtle details are acquired throughout years of experience of building mobile applications or exposing yourself to high-quality designs and premium applications out there. In today's video, I'm going to share with you five things that I do make my applications feel more premium. These things are actually implemented in my AI Tattoo application, which is in the App Store right now, making, at the time that I'm recording this video, close to $800 in monthly recurring revenue, which is very exciting. I consider my AI Tattoo application to be on the premium end of the niche because I charge $20 a month for premium access, and the other option is $10 per week. Based on my research, none of my competitors are charging that much. They charge $3.99 for premium access to their applications. My opinion, their applications are as well low-quality, and people are actually paying for my app, which is absolutely crazy considering that it's pretty new to the store. And the reason people are actually paying for the application is because it feels premium. It feels real, high-quality, and it actually works. So, in today's video, I'm going to share with you five things that I do in my applications to make them feel more premium. Let's get into it. Okay, number one is going to be press states and spring physics. So, here I have my AI Tattoo application, and if you notice when I press the generate from idea button, we get a very quick animation that scales down the item. I can actually press and cancel the press by scrolling. It's very subtle. It communicates to the user that they are actually performing an action and the application detected their intent of pressing this card, which is generate a new idea. So, if they release, that means they are going to navigate to the playground screen. And if you scroll down, you notice that the item cancels the gesture. That also communicates the user that they are not going to navigate if they release at this point because they canceled the press event. iOS 26 with liquid glass handles this beautifully. If I press on this upgrade plan button, you can see that the button is reacting and detecting to my finger moving around. Similarly, this button does the same. But we still have a couple problems. We need to handle this on older iOS versions and Android because I use React Native. So, to handle my press events in other platforms and older iOS versions, I use Presto. Presto is a package that uses React Native gesture handler in React Native and React Native Reanimated to animate items and things that you want to react to press events. It's very simple to use. You can just replace the regular pressable from React Native with pressable opacity, as you can see here, and that's it. Number two is going to be subtle animations. Most React Native developers and I would say any mobile developer, once they learn how to animate things, they actually are going to overdo it in their application. And at that point, the application could actually start feeling cheap if you add too much animation. Too much of everything is going to make your application feel bad. So, what I mean by subtle? For example, let's take my Inkygo application. I'm going to reload this screen and check the fading animation when everything loads for the first time. That's a fading animation, very subtle, and it makes it feel way better instead of just putting the items on screen when they appear. That's one thing. Another subtle animation is going to be the press of items like this one. >> >> But also, for example, let me go ahead and upgrade here. I'm going to select the weekly plan. And by the way, another subtle animation here is when I press one of these items. It's actually pretty hard to notice, but we are cross-fading the check up icon >> >> and the circle. It's cross fading when you toggle it and it just makes it look way better, higher quality. In this case, when I toggle between this, we also have haptics, which I'm going to talk about it in a moment. Yeah, this is a subtle effect. The thing is that you should play these subtle animations whenever something happens, not when you want to show off, right? So, let's go ahead and subscribe to the monthly. I'm going to test a successful purchase here. Successful and then we navigate back. And that's a subtle animation again showing the toast and boom, it's gone. And now I'm actually showing another kind of like subtle animation. Let's select one of these suggestions. Not sure if you noticed, but the image as well faded in super nicely. For example, if I go here and select this tattoo, let's use this one. You will notice how we have a fading super quick when the image appears in the playground. That is all intentional. When I press the image, we have an opacity that you can see briefly on the image because I'm pressing it. I have a context menu here, but if I press it, it's going to navigate to the um preview screen. All these little details are intentional and really level up your application. Another quick thing that I want to mention in this same topic is that you should also take advantage of that native animation depending on the platform. For example, on iOS 18 and above, Apple introduced zoom transitions. So, for example, I have zoom transitions when I press these images uh of the styles of the tattoo. And that's just an animation that feels very nice, feels native, feels high quality. It feels like this is not a website, this is a a real application and you get it for free by using just the native primitives in Expo router. You can just use native transitions and it looks super amazing. So, for the fade animations, I use React Easing, which is a new package from the App and Flow team. And I actually made a video on the channel, in case you want to check it out. I'm going to leave it in the description. All right, number three it's going to be haptics. So, haptics are a bit tricky to show on a video, but if you want to actually try out Inkigo, I'm going to leave the link in the description, and I would encourage you to go through the onboarding flow. And if you like it, please leave a review. But basically, haptics are the closest thing in software to making a user trust your application physically. Things like success patterns when something was submitted, or a subtle tick when a toggle flips. And in the case of Inkigo, I actually have a haptic when you move the before and after in the onboarding. This also makes the application level up because it feels like you went step beyond, right? It's not just static. You know that you are doing something on the application because you are feeling it. And when I move this to the left and right, it's hard to show on screen, but I'm feeling a really nice haptic pattern that just feels super nice. Apart that we also have the press state that we mentioned at the beginning. When I press this, because it's using liquid glass, same with this button. I'm pressing it and canceling it, and you can see that it's detecting the press events. For haptics, I actually used to use Expo Haptics, but since Software Mansion released Pulsar, I now use Pulsar in all my applications. It's just super nice. Pulsar gives you ready-made haptic resets, and you can extend it with custom patterns. You can compose anything that you want. It's really nice, and it's also available natively for iOS and Android and React Native. So, definitely, if you're looking for the best React Native haptics, check out Pulsar. Number four it's going to be keyboard behavior. Keyboard behavior is what really separates a good high-quality application versus one that was created by chat G P T. Let's take a look here what happens when I press continue. You notice how we're animating the item as we navigate, the keyboard appears, and the button reacts to the keyboard, and the input gets focused. Everything looks super nice. And another subtle animation, you can see the gradient glow effect as I type. This is another little detail. It's very subtle. The effect is not screaming, right? This is what you want. Elegant, clean, and subtle. So, the keyboard handling in the onboarding is not as complex as the one that I have in the playground, which also it auto focus when you navigate. And another thing is that I actually implemented gestures. So, when I swipe down, drag up and down, the keyboard gets blurred and focused automatically. You can also just press on the input and it's going to focus it. And everything has been reacting to the keyboard nicely, cleanly using the package React Native Keyboard Controller, by the way. It's I think the only one you can use that will provide really nice results, and it also works on Android exact same way. And as I type, the input is going to grow. I'm using Expo UI in this part. I only have four lines. After that, it's going to have like a little scroll view inside the input. And then you can also, again, use the gestures, select everything, delete. Just having the input being dynamically moving depending on what I want to do when the gestures that I'm doing on the application, it it tells me that this application is it's real. It's high-quality. The person who created this application knows what they're doing. And you can see in low-quality applications, the input is going to be static at the top, and it's not going to move. That tells me that, you know, the developer either was lazy to implement something like this, or maybe they just don't know how to do it, or how to prompt for it. But I would say with React Native Keyboard controller, you actually can do this very easily. Number five is going to be loading and empty states. For example, in my AI tattoo application, if I come to this screen, select the camera, this is what I mean by an empty state. This, in my opinion, it's very clean, elegant. Maybe I could generate a custom asset for this view, branded to my application, but so far I think this is super clean. It shows you an icon and it explains the user, you know, let's get started. We need access to your camera to take a photo. And then the user knows what to do instead of just navigating to the screen and then prompt the user abruptly, "Hey, we need permissions to use the camera." It's way cleaner and it feels more premium if you onboard the user to each feature. Example, here I'm going to say continue and then I ask. Now I'm asking you to provide permissions. And in this case, the user is going to, 100% of the time, allow it because they know what we want to do with the camera. Same applies for notifications. Don't just show an alert saying that, "Oh, we want to send you notifications." First, you need to explain why. And you need to make it compelling, right? We want to send notifications because we want to remind you of important things about the application, right? Otherwise, people are going to think that it's going to be just marketing and they're just going to say no, right? Or why do you want to access my photos? Because we want to show them here. We want to save your tattoos. >> >> Things like that, okay? So then I can just allow and it's going to show me the camera and I get the feedback. Now, let me show you an example of a loading state. This screen is actually another great example of how to handle an empty state because right now the user hasn't generated anything, right? So, I'm just showing describe your tattoo or choose a suggestion below. And it's showing a nice shimmer text that looks beautiful and it's also telling the user what to do, what's next. So then you can prompt for, you know, create a dot work style tattoo, and then you submit, you get a little haptic, and something changes, right? The color is different, and now, instead of showing a spinner, or just saying that we are loading, we show this nice shimmer. It's like a classic nowadays with all the AI. Um and it's basically telling the user what we are doing. I found that using the shimmer text makes it somehow feel like we are not waiting too much. Maybe I'm just used to it. >> >> But yeah, here's the result. Once we're finished loading, you can see it here, and it just looks very nice. That's a good example of a loading state, I would say. And then, if you decide to create a new tattoo, we're going to show you the empty state with instructions on what to do, right? And this is just to describe what you want, but in another example could be, you know, you don't have any items saved yet. To create an item, press this button, go here. Or, you don't have any tattoos yet, you know, generate some tattoos, and then you're going to see something in this list. Things like that. Something important to notice is that none of this alone makes your application feel premium. Premium A is what happens when you stack 20 of these little subtle details and decisions on top of each other. Users won't notice it, maybe, every single detail, but they will know that this app feels different. And that's the goal. I almost forgot to mention that I also created a prompt to audit your application based on these things that I do to level up my application. I actually created this blog post, which covers everything step by step, including some code examples for things like the UI handling. The link is in the description, and if you want to start your next application with all these things already baked in, and more, check out my latest template, Platano, which already comes with everything baked in, payments, and everything you need to ship quickly, including Figma assets for App Store screenshots. It's a template that Inkigo, my AI tattoo application, is based on. If you're interested, the link is in the description. If you want to keep learning about subtle animations and how to implement them in your application, check out this other video. I'll see you there.