FullStack Labs

Please Upgrade Your Browser.

Unfortunately, Internet Explorer is an outdated browser and we do not currently support it. To have the best browsing experience, please upgrade to Microsoft Edge, Google Chrome or Safari.
Welcome to FullStack Labs. We use cookies to enable better features on our website. Cookies help us tailor content to your interests and locations and provide many other benefits of the site. For more information, please see our Cookies Policy and Privacy Policy.

React Native App Of The Week: Copart App

Written by 
Brian Smith
Vice President of Design
React Native App Of The Week: Copart App
blog post background
Recent Posts
Getting Started with Single Sign-On
Choosing the Right State Management Tool for Your React Apps
Accessibility in Focus: The Intersection of Screen Readers, Keyboards, and QA Testing

Hello, I’m Brian Smith, the Design Director at the React Native consultancy, FullStack Labs. In our first installment of the React Native App of the week, I completed a design review of Copart, a React Native app that hosts live vehicle auctions, to identify areas of the app that succeed and others that could use some improvement.

Table of contents

Load Times

The best feature of this app is the load times. Moving from view to view is a breeze and considering the amount of data that is being displayed, it’s impressive how fast these React Native views load.

Asset Quality

An important aspect of visual design is that there is no pixelation in any of the assets you control. You can see on the homepage that there are a couple of issues that can be easily fixed. The hamburger navigation icon (at the top left) and the promotional image (at the bottom) are both a bit pixelated. This can be resolved by replacing icon assets with SVGs, and using higher resolution raster images. 

Columns & Guides

Whenever possible, there should be clear guides for columns, this allows a user to easily scan information. Within the homepage, you can see that the distance from the left of the screen to the content is inconsistent. By establishing and following a 4-column grid, the content will appear more organized to users. 

Create and adhere to a 4-column layout.

Region Settings

This React Native app serves several regions and switching between both regions and languages is done easily through the nav drawer. However, given the nature of the app, it is likely that once a user sets a region and language they will rarely change the region or language again. If those are moved to the app settings view, it would de-clutter the navigation drawer.

Move rarely used settings to the General Settings.

Prioritize Important Content

The location detail view makes displays all of the information a user might want for that location. This expanded information means that the auction list is pushed toward the bottom so that on a large device like an iPhone 11 the list is barely visible, whereas on a smaller device, the list is completely off of the screen. By condensing the location information to the most pertinent information and allowing the user to view the additional info in a dialog, for example, the auction list could be moved up so that it is always in view. 

Prioritize the most important content.

Emphasize Calls-to-Action

It is nice that you are able to see all lots at a particular location, but the action is a bit hard to notice. Yes, it is up at the top, but being gray and rather small, it almost appears disabled. By increasing the contrast between the background and the text, it will be easier for users to see it as an action they can take. 

Emphasize the Calls-to-Action

UI Polish

Throughout the app, there are a few minor UI fixes that if made would add to the existing polish. A prime example is in the search filters. You can see that the search container isn’t a consistent height, extends beyond the edge of the screen, and the placeholder text is not vertically centered in the field. 

Additionally, the bottom actions appear disabled. This can be improved by adding color to the icon and text: Green for apply, Red for clear all, and Black for cancel.

Clean up the details of the UI

Combining Views

The calendar feature makes it relatively easy to view auctions for a particular date, but requires the user to move back and forth between the calendar and auction list. By placing the auction list for the selected date below the calendar, the user would be able to search for auctions within a single view. 


There’s a lot more to this React Native application that we didn’t review today. If you are interested in learning more about how FullStack Labs can help you with your React Native app, or if you’re looking to hire React Native Developers, please let us know and we’d be happy to arrange a free consultation. 

Brian Smith
Written by
Brian Smith
Brian Smith

As the Vice President of Design at FullStack Labs, I lead a team that specializes in user experience and interface design, through rapid high-fidelity prototyping, user flow creation, and feature planning. I have over a decade of experience designing complex software applications with a focus on user-centered design principles. Prior to FullStack Labs I was the Creative Director at Bamboo Creative and the Director of Design at Palmer Capital. I hold a B.A. in Design from UCLA.

People having a meeting on a glass room.
Join Our Team
We are looking for developers committed to writing the best code and deploying flawless apps in a small team setting.
view careers
Desktop screens shown as slices from a top angle.
Case Studies
It's not only about results, it's also about how we helped our clients get there and achieve their goals.
view case studies
Phone with an app screen on it.
Our Playbook
Our step-by-step process for designing, developing, and maintaining exceptional custom software solutions.
VIEW OUR playbook
FullStack Labs Icon

Let's Talk!

We’d love to learn more about your project.
Engagements start at $75,000.