Front-end Development for a React Native project isn’t the easiest task, as some of you may know. If you’re an experienced React Developer and/or fluent in your sass skills, you may think, “It can’t be that different, right?”
Unfortunately, React Native is an entirely different ball game, especially when it comes to styling content because styles are written in JavaScript. At one point or another, you’ll face challenges like a different markup, style properties, number conversions, boundaries, and lots of weird errors.
Luckily, after working on numerous React Native projects here at Revelry, I’ve seen my fair share of common issues and I’ve learned so much from them. As I continue to work on these projects, my Native knowledge base continues to grow. It’s definitely a new challenge to take on, but very rewarding in the end!
Here are some key components and resources to help you improve your UX design with React Native.
ScrollView Fixed Header
The React Native Fixed Header/Footer is a fun tool to help improve the user experience of your app. A basic ScrollView Header scrolls with the user so they have links, headers, or back buttons on their screen at all times. This is especially useful when your app has long lists of items to scroll down to.
If you want to amp up your UX even more, the React Native ScrollView animated header adds that extra pop of animation, allowing you to show items at the top of the screen, and then the ScrollView transitions down with the user as they begin to scroll down the page. I find these small additions make the experience that much better.
To begin, I always do some thorough research and make sure I have all of the tools and resources I may need, along with plenty of pairing time from a programmer so you can work together to get everything set up properly.
The effort is worth it because the final product looks clean and functions great!
Resources
React Native Animations Using the Animated API
Animated – A React Native Library
How I linked animated headers to scroll position in React Native
Modals
React Native modals are somewhat easy to set up, compared to animations and some other components. If you follow this reference step-by-step, you’ll have a working Modal in no time.
Styling the Modal component is also less of a headache, fortunately. It’s easily reusable, which is a plus.
At Revelry, we typically try to use Modals as seldom as possible. But they work well for these instances.
Resources
React Native Modal Component
Build an awesome scrollable modal in React Native
Activity Indicators
A loading spinner, or Activity Indicator component, is very easy to set up and style for a Front-Ender, especially if you already have a modal component and container styles that exist.
Activity Indicators are great to use for checkout flows, long-form submissions, or any screen that may take a few seconds to load.
This improves the overall UX for the user. It helps assure them that they are on the right track to finish the user flow, without causing any doubt about a buggy app.
You can also add an Activity Indicator within a button, called a BusyButton, or an AwesomeButton.
Resources
React Native Activity Indicator Component
Awesome Button
Carousels with Pagination
The React Native Snap Carousel looks great, and it creates a better UX so the user can easily swipe through each item. And, it transitions really well.
If you want to show something such as a list of tickets, images, or anything that contains multiple items with a lot of information on each, this is a good resource for you.
We’ve also paired the React Native Snap Carousel with the React Native Pagination component that comes available together. Their props are easy to set up, and I had little to no stylesheet bugs or overrides.
Using a Pagination component on a slideshow is a vital piece for the user, so they are aware of how many items they are swiping through without missing anything or having trouble navigating to a desired item.
I would recommend scanning through the tips and tricks section before getting started. It helped me debug and solve a few of common issues that I came across.
Resources
React Native Snap Carousel
React Native Pagination Component
Improve User Experience!
I hope these ideas and resources will help you tackle these React Native features! This should set you well on your way to improving your User Experience.
The sooner you start dabbling in React Native code and setting up components like these, the better you’ll become as a Native developer. All it takes is practice, a basic understanding of the markup, and most of all, patience.
Building these components may be a little time consuming, but in the end, your product’s UX is going to go from a basic snooze-fest to a “wow, I’m really proud of this” kind of project.
We're building an AI-powered Product Operations Cloud, leveraging AI in almost every aspect of the software delivery lifecycle. Want to test drive it with us? Join the ProdOps party at ProdOps.ai.