21 posts tagged with "Mobile Design"

Gradients bring out a colorful taste in our apps. So it’s important to know how and when to use them in your mobile apps. In React Native, gradients are extremely easy to integrate and in this article we are going to describe exactly how to implement them. There are mainly two types of linear gradients in React Native and CSS: Linear and Radial gradient Two of the most used JavaScript libraries for generating gradients in React Native are

The best React Native app ideas for beginners are small enough to finish, but complete enough to teach real mobile development. A good beginner project should include screens, navigation, lists, forms, data, error states, and a build you can install on a device.

This guide gives you practical project ideas and explains what each one teaches.

In this tutorial, we are taking a look at how to detect and support dark mode in React Native apps. You are going to build a small demo app that sets its appearance based on the platform OS. The platform OS will have two theme modes, dark or light. By default, when the app will start, it is going to have the theme based on the platform OS but the user is going have an option to toggle between the themes.

Perceived performance is how fast an app feels to the user. A screen can take the same amount of time to load, but feel much faster when it shows immediate feedback, preserves user work, avoids blank states, and explains what is happening.

Entrepreneurs, designers, and developers tend to separate Growth aspects from the mobile app development process. They are usually perceived as completely different focus areas. After all, what does marketing have to do with app development, right? Because of this, many startups fall into the trap of building onboarding screens that are so beautiful it blows the user’s mind, but they are not optimized for Growth, hence don’t convert well.

An App Walkthrough Screen is a slider screen which allows the user to learn everything about the features of a mobile app when they open the application for the first time. We can implement this feature in a React Native application in multiple ways. In this React Native tutorial, we describe how we implemented the Walkthrough Screens in all of our React Native Templates so that you can speed up your app development by reusing our open source code.

“The notch” has been introduced by Apple a few years ago, with the launch of iPhone X. For iOS developers, this introduced more work on the day to day layout efforts, as it added an extra set of device types. On most devices that have a notch, regular views do not display well and they block out a considerable part of the top of the screen. Let’s see how we can avoid the notch in React Native projects, with the help of SaveAreaView, a component that’s built into the React Native core.

Instagram has been growing like crazy over the past few years, and one of its key features that fueled that growth was the famous photo filters. By allowing users to apply various filters to their photos to make them better looking, Instagram has created an amazing product. Any modern photo app must support photo filters nowadays, so we are going to take a look at how to implement the Instagram photo filters in React Native.

Mobile banking, electronic transactions and online payments have been a growing trend in the modern world. It will not surprise you that every buy and sell transaction will take place online through the internet in the near future. Take a look at our curated list of the best free and premium Finance UI Kits, to use as inspiration while developing your next FinTech app in React Native. Mobile banking application, e-commerce websites and apps are increasing on a day to day basis. Every business companies are developing their own financial software and application. A large number of people already use mobile banking and finance apps to complete transactions, check balances, and explore financial services or financial product options. Financial apps have made it easy to manage your financial information and keep track of personal expenses and savings. As a result, you can leverage these Financial UI kits as inspiration for our next personal finance app project. Due to an increasing number of mobile banking applications, tools and kits are necessary for their quick and efficient designs. Therefore, we provide you with a list of Financial UI kits which will help you get started with your very own business finance application.

This article is focused on finance screens. For the broader React Native UI kit decision, read Best Free React Native UI Kits. If you need a full production starter instead of design inspiration, compare options in The Ultimate Guide to React Native App Templates.

In today’s world, with massive production of mobile application and websites, designing and building mobile interfaces and user experiences have been a growing trend. The ability to produce prototype designs rapidly has been an intriguing topic. At Instamobile, we build beautiful React Native templates to help designers and developers create their mobile apps more quickly. Let’s take a look at the best mobile app design tools that mobile designers and developers can use to produce high-quality prototypes.