React Native is used to build cross-platform mobile applications using JavaScript and React. Since its initial release in 2015, the library has grown and today enjoys widespread adoption among the mobile developer community.
In fact, the community has been a huge part of React Native’s success. It seems like every day, someone releases a new library that makes building apps with React Native much easier.
In this guide, we’ll compare 10 of the most-used UI libraries for React Native:
- styled-components
- React Native Extended StyleSheet
- React Native Elements
- React Native Paper
- React Native Credit Card Input
- React Native Gifted Chat
- react-native-animatable
- React Native Lottie
- React Native Vector Icons
- React Native SVG
1. styled-components
styled-components enable you to write CSS as React components, which allows for dynamic styling and auto-prefixing. It also supports React Native.
In React Native, you would usually write styles as JavaScript objects. However, writing styles as components allows you to write readable code and reusable components and use your styles multiple times, which means less code.
For example, you could use the classic style object, like below:
import {StyleSheet, Text, View} from 'react-native' export default function App() { return ( <View style={{ backgroundColor: '#a1cae2', borderRadius: 10, height: 200, width: 150 }} > <View style={{ padding: 2 }} > <Text style={{ fontSize: 20, color: '#000', textAlign: 'center' }} > Header </Text> </View> <View style={{ padding: 2, display: 'flex', alignItems: 'center' }} > <Text style={{ fontSize: 14 }} > Lorem ipsum dolor sit amet consectetur adipisicing elit. </Text> </View> </View> ) }
But with styled-components, you can make the code more readable and consistent:
import {StatusBar} from 'expo-status-bar' import React from 'react' import {StyleSheet, Text, View} from 'react-native' import styled from 'styled-components/native' const CardContainer = styled.View` background-color: #b34180; height: 200px; border-radius: 10px; width: 150px; ` const CardHeader = styled.View` padding: 2px; text-align: center; ` const CardTitle = styled.Text` font-size: 20px; text-align: center; color: #fff; ` const CardBody = styled.View` padding: 2px; align-items: center; display: flex; ` const CardDescription = styled.Text` font-size: 14px; color: #fff; text-align: center; ` export default function App() { return ( <View style={styles.container}> {/* styled component */} <CardContainer> <CardHeader> <CardTitle>Header 2</CardTitle> </CardHeader> <CardBody> <CardDescription>Lorem ipsum dolor sit amet consectetur adipisicing elit.</CardDescription> </CardBody> </CardContainer> </View> ) }
You can see the major difference between the two examples in terms of code readability and component consistency.
The results will still be the same in the UI:
Another reason to use styled-components is that it enables you to use the CSS syntax you’re already comfortable with if you’re coming from the CSS world.
2. React Native Extended StyleSheet
This is one of my favorite tools for styling in React Native. Though similar to the React Native StyleSheet abstraction that comes with React Native, React Native Extended StyleSheet offers extra advantages such as media queries, variables, dynamic styles, and themes. Using React Native Extended StyleSheet enables you to make the UI responsive across multiple devices.
In general, React Native Extended StyleSheet is used the same way as the React Native StyleSheet. Below is a practical example of how to use variables and media queries at the same time with React Native StyleSheet.
First, define the global variables with the EStyleSheet.build()
method. Usually, you would this code in the main entry file App.jsx
:
EStyleSheet.build({ /* Smartphones (portrait and landscape) ----------- */ $primary: '#301551', $green:"green", $white:'#fff', $black:"#000", $gray:"#ccc" });
Next, get the value of any variable using EStyleSheet.value('variableName')
:
const styles = EStyleSheet.create({ container: { backgroundColor: EStyleSheet.value('$primary'), }, });
Here’s the full example:
/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */ import React from 'react'; import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, } from 'react-native'; import EStyleSheet from 'react-native-extended-stylesheet'; // This file is for a reusable grouping of Theme items. // Similar to an XML fragment layout in Android EStyleSheet.build({ /* Smartphones (portrait and landscape) ----------- */ $primary: '#301551', $green:"green", $white:'#fff', $black:"#000", $gray:"#ccc" }); const App: () => React$Node = () => { return ( <> <View style={styles.container}> <StatusBar barStyle="dark-content" /> <SafeAreaView> <ScrollView> <Text>EStyleSheet </Text> </ScrollView> </SafeAreaView> </View> </> ); }; const styles = EStyleSheet.create({ container: { width: '100%', backgroundColor: EStyleSheet.value('$primary'), height: '100%', /** IPad */ '@media (min-width : 768px) and (max-width : 1024px) ': { backgroundColor: '#ed8a0a', }, }, }); export default App;
Above, we caused the backgroundColor
to change when the app is accessed on an iPad:
3. React Native Elements
In the wide world of web development, there are many UI libraries, such as Bootstrap and MaterialUI, that save you the hassle of writing your own from scratch. You can enjoy the benefits of responsible design and improve support across browsers.
React Native Elements is my favorite UI library for React Native because it is simple to use, has great documentation, and superior support across iOS and Android.
Here’s an example of how to use React Native Elements:
@copyrights https://reactnativeelements.com/docs/tooltip import { Tooltip, Text } from 'react-native-elements'; ... <Tooltip popover={<Text>Info here</Text>}> <Text>Press me</Text> </Tooltip>
4. React Native Paper
React Native Paper is fairly similar to React Native Elements. The major difference is that React Native Paper uses the Material Design UI as the foundation of its UI components. If you’re a fan of the Material UI design system, React Native Paper is the UI library for you.
When using React Native Paper, you’ll probably use the theming feature quite often. Theming allows you to integrate your own custom design system that can be combined with the library’s design. For example, you could integrate your own color scheme, typography, etc.
Using the theming feature in React Native is simple: just wrap your app with PaperProvider
and pass your theme object to it:
import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper'; import Home from '/home' const theme = { colors: { primary: '#90eee1', accent: '#6356e5', }, fonts:{ regular:16, small:12, }, typography:{ title:'Roboto', paragraph:'Open Sans' } }; export default function App() { return ( ); }
Now you can access theme values anywhere in your app and enjoy a consistent design system. To access the theme in any component, you have to wrap it using the withTheme
higher-order component:
import {View,Text} from 'react-native' import { withTheme } from 'react-native-paper'; const CardTitle = ({theme})=>{ return ( Headline 3 ) } export default withTheme(CardTitle)
Building forms can be tricky for mobile developers. The UI libraries we’ll explore from here can help you save time and avoid common keyboard-related issues, such as UI views being unresponsive when the user is typing.
5. React Native Credit Card Input
React Native Credit Card Input is super easy to use. It has a nice UI and engaging animation and produces a great user experience by making it easy to enter credit card info.
Below is simple example of how to use React Native Credit Card Input:
import React from 'react'; import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, } from 'react-native'; import { CreditCardInput, } from 'react-native-credit-card-input'; const App: () => React$Node = () => { const _onChange = (e) => { /** * * * {"status": {"cvc": "incomplete", "expiry": "incomplete", "number": "invalid"}, "valid": false, "values": {"cvc": "", "expiry": "", "number": "8", "type": undefined}} */ console.log(e.values.number); console.log(e.valid); console.log(e.values.cvc); console.log(e.values.expiry); }; return ( <> <StatusBar barStyle="dark-content" /> <SafeAreaView> <View> <CreditCardInput onChange={_onChange} /> </View> </SafeAreaView> </> ); };
React Native Credit Card Input makes entering payment info more intuitive. It has an autocomplete feature and handles validation of the credit card number, so you don’t have to write any extra code to sanitize the input. React Native Credit Card Input also comes with custom styling, which enables you to integrate your own style and icons.
The biggest advantage of using React Native Credit Card Input is that it’s a pure React component, so you don’t need to do any linking, which is not the case when using react-native-awesome-card-io
, a similar tool.
6. React Native Gifted Chat
If you’re looking to add chat to your React Native app, react-native-gifted-chat is an amazing library that enables you to create a UI chat box in a few simple steps. The library has support for iOS, Android, and the web.
react-native-gifted-chat doesn’t require any linking because it doesn’t contain any native code. You can simply install the package using Yarn or npm:
yarn add react-native-gifted-chat
Here’s an example of how to start using the Box UI component:
# copyright https://github.com/FaridSafi/react-native-gifted-chat import {GiftedChat} from 'react-native-gifted-chat'; import React, {useCallback,useState} from 'react'; const App: () => React$Node = () => { const [messages, setMessages] = React.useState([]); React.useEffect(() => { setMessages([ { _id: 1, text: 'Hello developer', createdAt: new Date(), user: { _id: 2, name: 'React Native', avatar: 'https://placeimg.com/140/140/any', }, }, ]); }, []); const onSend = useCallback((messages = []) => { setMessages((previousMessages) => GiftedChat.append(previousMessages, messages), ); }, []); return ( <> <View style={styles.container}> <StatusBar barStyle="dark-content" /> <GiftedChat messages={messages} onSend={(messages) => onSend(messages)} user={{ _id: 1, }} /> </View> </> ); };
7. react-native-animatable
react-native-animatable enables you to add transitions and animations to the UI in React Native. It has a declarative API component, which you can use as a wrapper to the component you want to animate or add a transition to it. Best of all, it’s customizable so you can control the duration, delay and the direction of the transition.
Below is an example of a simple transition:
import React from 'react'; import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, TouchableHighlight, } from 'react-native'; import * as Animatable from 'react-native-animatable'; const App: () => React$Node = () => { const phoneRef = React.useRef(null); return ( <> <StatusBar barStyle="dark-content" /> <SafeAreaView> <ScrollView> <View style={{ borderColor: 'red', flex: 1, alignItems: 'center', justifyContent: 'center', }}> {/* <LiteCreditCardInput onChange={_onChange} /> */} {/* <PhoneInput ref={phoneRef} /> */} <Animatable.View animation="slideInDown"> <TouchableHighlight style={{ width: 160, height: 160, borderRadius: 8, backgroundColor: '#6155a6', alignItems: 'center', justifyContent: 'center', }}> <Text style={{ color: '#fff', }}> SlideInDown </Text> </TouchableHighlight> </Animatable.View> <Animatable.View animation="slideInLeft"> <TouchableHighlight style={{ width: 160, height: 160, borderRadius: 8, backgroundColor: '#fdb827', alignItems: 'center', justifyContent: 'center', }}> <Text style={{ color: '#fff', }}> SlideInLeft </Text> </TouchableHighlight> </Animatable.View> <Animatable.View animation="bounce"> <TouchableHighlight style={{ width: 160, height: 160, borderRadius: 8, backgroundColor: '#ff4646', alignItems: 'center', justifyContent: 'center', }}> <Text style={{ color: '#fff', }}> Bounce </Text> </TouchableHighlight> </Animatable.View> </View> </ScrollView> </SafeAreaView> </> ); };
8. React Native Lottie
Lottie is a library developed by Airbnb that converts Adobe After Effect animations. It support iOS, Android, and the web.
In React Native react-native-lottie
allow you to use Lottie animations by providing a component wrapper API. It can be installed the same as any React Native library. You can import LottieView
as a component and pass the animation file path.
You can get Lottie animations on LottieFiles.
Here’s an example of how to use Lottie in React Native:
import LottieView from 'lottie-react-native'; <LottieView source={require('./images/lottie-af-animation.json')} loop autoPlay />
9. React Native Vector Icons
Icons in mobile apps serve a purpose similar to that of signs on the road: you can’t navigate without them. Put simply, icons help users understand how to interact with your app.
I recommend using react-native-vector-icons
because:
- It has cross-platform support (iOS, Android, web, Windows, etc.)
- It comes with popular icon libraries such as FontAwesome and MaterialIcons
- Super easy to use and customizable
Here’s an example of how to use react-native-vector-icons
:
import React from 'react'; import { SafeAreaView, StyleSheet, ScrollView, TouchableOpacity, View, Text, StatusBar, } from 'react-native'; import Icon from 'react-native-vector-icons/FontAwesome'; const myIcon = <Icon name="rocket" size={30} color="#900" />; const App: () => React$Node = () => { return ( <> <View style={styles.container}> <StatusBar barStyle="dark-content" /> <SafeAreaView> <TouchableOpacity> <Icon name="chevron-left" color="#000" size={20}/> <Text>Click Here</Text> </TouchableOpacity> </SafeAreaView> </View> </> ); };
10. React Native SVG
Scalable Vector Graphics (SVG) is an XML-based markup language for describing two-dimensional vector graphics. SVG files are designed to be rendered cleanly at any size and with other popular web standards such as JavaScript, CSS, DOM, and SMIL. According to MDN, “SVG is, essentially, to graphics what HTML is to text.”
SVG is not supported by default in React Native. react-native-svg enables you to render SVG in React Native on both iOS and Android.
The installation is pretty simple. With Yarn, just run the following command line:
yarn add react-native-svg
Next, install pods for iOS with cocoapods. In your terminal, navigate to the ios
folder:
cd ios
Then, run:
pod install
If you’re using an old version of React Native (0.60 or earlier), you’ll have to link the package manually by running the following command line:
react-native link react-native-svg
There are two ways you can use reac-native-svg. You can include your SVG as a file, as show below:
import {SvgXml} from 'react-native-svg'; import SVGImage from './images/undraw_happy_2021_h01d.svg'; const App: () => React$Node = () => { return ( <> <View style={styles.container}> <StatusBar barStyle="dark-content" /> <SafeAreaView> <ScrollView> <SvgXml width="200" height="200" xml={SVGImage} /> </ScrollView> </SafeAreaView> </View> </> ); };
Or, you can use it as a component, like so:
#@copyrights https://github.com/react-native-svg/react-native-svg <Svg width="130" height="130" fill="blue" stroke="red" color="green" viewBox="-16 -16 544 544" > <Path d="M318.37,85.45L422.53,190.11,158.89,455,54.79,350.38ZM501.56,60.2L455.11,13.53a45.93,45.93,0,0,0-65.11,0L345.51,58.24,449.66,162.9l51.9-52.15A35.8,35.8,0,0,0,501.56,60.2ZM0.29,497.49a11.88,11.88,0,0,0,14.34,14.17l116.06-28.28L26.59,378.72Z" strokeWidth="32" /> <Path d="M0,0L512,512" stroke="currentColor" strokeWidth="32" /> </Svg>
Conclusion
You should now have all the basic info you need to choose the right set of UI libraries for your next React Native project. It’s worth noting, however, that the React Native ecosystem is huge and getting huger all the time as the community churns out tool after tool to make the developer experience even better.
To see what else the React Native ecosystem has to offer, join the open-source community Awesome React Native.
LogRocket: Instantly recreate issues in your React Native apps.

LogRocket is a React Native monitoring solution that helps you reproduce issues instantly, prioritize bugs, and understand performance in your React Native apps.
LogRocket also helps you increase conversion rates and product usage by showing you exactly how users are interacting with your app. LogRocket's product analytics features surface the reasons why users don't complete a particular flow or don't adopt a new feature.
Start proactively monitoring your React Native apps — try LogRocket for free.
Nice summary. For our project, using react-native-web in addition to iOS and Android, React Native Paper has been great. Really well-maintained library with surprisingly good web support out of the box. If your design philosophy is closer to Material Design, it’s a no-brainer.