In this article, we'll introduce you to the best React Native card libraries currently available. Our goal is to help you find the ideal solution to your React Native needs and provide you with compelling arguments on the strengths and weaknesses of this solution.
We'll first define what a React Native card component is. Then we'll explore the top three React Native card libraries you can find right now. Finally, we'll provide you with a comprehensive example of the implementation for each solution, make some arguments for why we think it's a great contender, and warn you about potential drawbacks.
As always, this article is aimed at React Native developers and all curious souls looking to expand their expertise in the world of mobile development. If you don't have experience working with React Native or Typescript, we recommend you take some time to explore the basics and come back after you have a good grasp of them.
However, if you just want to learn about the best React Native card components, by all means, read along.
Let's set up our React Native test project and move on.
Setting up React Native
First things first. Let's get you up and running with a React Native project.
For the development environment, use the Expo CLI Command Line utility, NodeJS runtime, and Visual Studio Code as the IDE. If you don't know what those mean, don't worry. Your environment will be up and running with just a few commands, and you will be ready in a jiffy.
First, install NodeJS on your development machine. Whatever OS you're currently using, installing NodeJS is very similar and rather simple. You can go to the official NodeJS portal and download the installer that works for your OS or use the package managers that come with your system and install it through the command line.
If you're using macOS, you'll be installing NodeJS through homebrew. All you need to do is input the following command on the terminal:
That's it.
Alternatively, you can download the package directly with bash.
To install the Expo CLI, all you have to do is use npm, the package manager that comes with NodeJS, and input the following command:
That's about it.
If you need more information, you can go to the developer website here.
Starting a Project
To create your test project, all you have to do is type the following command in the terminal and select the kind of project you want to create. Feel free to choose the "blank Typescript" option.
This command will create a React Native project with all the necessary components to get you going. Feel free to go into the project directory and check it out yourself.
Finally, install Visual Studio Code to use as the IDE or code editor. You can proceed to the official website and download it here. However, if you prefer working with another coding tool, that's also OK.
Now all you have to do to get your test project running is type the following command on the terminal:
This command will start Metro, the default builder of React Native.
Metro will ask you where you want to run your code. For now, just select web.
Voila!
Now you're good to go.
React Native Card Component
In React Native, a card is a sheet or container that provides an elegant structure to display data. Cards can contain text, images, buttons, etc. In addition, they act as entry points for more information to be structured inside it.
If you come from web development and design, this element will look extremely familiar to you given that it's essentially a one-to-one translation of a popular bootstrap element with the same name.
In general, cards are an excellent way to display data about a single subject.
Best React Native Card Libraries
Alright, so now that you know what cards are, let's talk about the three contenders.
Paper
First, there's the react-native-card from Paper, which is, in my opinion, one of the best cross-platform React Native UI component libraries on the web.
As they describe it: "Paper is a collection of customizable and production-ready components for React Native, following Google's Material Design guidelines." This means that if you're particularly fond of the Material Design paradigm provided by Google for its ecosystem, this is a no-brainer.
Additionally, since this is a UI components library, you can take advantage of its extensive repository of components and elements to style and design your application in an elegant language that's both consistent and functional. All you have to do is run these two commands in the terminal to install it:
After doing this, you can create your new component file and add the corresponding card code.
A basic example would be the following:
The only downside is that it's a bit heavy and overwhelming. So all things considered, this might not be the best option if you want something light and simplistic to minimize the impact on the package size.
Material Cards
Now, if you still want to keep the Material Design language in your application but want a bit more flexibility and performance, we suggest you consider Material Cards. This excellent library contains a significant selection of designs and structures to display your data with elegant cards that adapt to all display structures and needs.
To install it, all you have to do is input the following command in the terminal:
Once you've done this, you can proceed to create your component class file and add the example code to the documentation page:
You can find many more examples of the card styles on the official documentation site.
In terms of downsides, the main issue with this library, in my opinion, is the lack of updates. Lately, there has been little activity on the GitHub page, and this is concerning given that the developer might not address bugs promptly.
Additionally, this library is for vanilla JavaScript projects. So if you started your project in Typescript, that might be an issue.
Paraboly
Finally, we have my personal favorite, Paraboly's React Native cards component.
This library is elegant and well maintained, and it has its own unique design language that's quite aesthetic and pleasing. Additionally, this library is maintained by a well-known developer in the React world with a long history of high-profile projects.
All you have to do is run the following command to install it:
Then add your component class file to your project and the following code:
You can find more examples on the documentation page.
This library is quite robust and reliable while offering flexibility to create any card container you could imagine.
That being said, there has been a bug in the code that has not been addressed in the last few months. This is something to consider if you want to implement this library in your project and need some assistance.
Conclusion
As you have seen, there's a healthy number of options to style your applications with elegant and functional solutions that display data for your users. This is important for developers and companies that want to keep their products and services updated and functional. But most important of all, it's a great indicator of a healthy and thriving community and technology stack.
That being said, it's essential to keep an eye on your applications and ensure that as few bugs as possible reach your clients. Even the best solutions still have some kinks to iron out. That's why we recommend you check out our no-code testing solution at Waldo. Our test suite is geared toward productive and agile teams focused on delivering value and elegance to their clients. If you're in charge of such a team, make sure they have the best tools to continue providing the best in the market.
You can check it out here.
Automated E2E tests for your mobile app
Get true E2E testing in minutes, not months.
