What takes precedence while creating an application—back-end or front-end? For a long time, it was the back-end that got prioritized. Hitting performance benchmarks was the symbol of success. Times are changing. Today, user-experience-driven Front-end development is a priority.
As a result, developers and app designers are turning to easy-to-use UI libraries. Among them, NativeBase and Chakra UI are leading the pack. These two libraries offer easy-to-use components that help build applications with little hassle.
In this blog, we discuss:
🤔 What are the similarities and differences between the two prodigious UI libraries
💪🏽 Pros and cons of using one over the other
⚖️ When to prefer NativeBase over Chakra UI, and vice versa
What is NativeBase?
NativeBase is a free, open-source UI library for building high-quality cross-platform applications. Its documentation is simple and contains clear steps for creating reusable components. With NativeBase, app developers need to spend less time on repetitive tasks.
What is Chakra UI? 🤔
Chakra UI is a modern component library for React, used for web applications. It comes with reusable and composable React components for creating front-end apps. Its popularity comes from its simplicity, modularity, and accessibility. The library has clear explanations on how to use reusable components, reducing development time.
Why compare NativeBase and Chakra UI?
The two libraries—NativeBase and Chakra UI—are highly popular in the developer community. Both reduce application development timelines and resources needed for projects. However, there are key differences in their usability and components.
By comparing them, the goal is to set the record straight on which one to choose based on the project’s requirements.
Comparison
We will be comparing both the NativeBase and Chakra UI libraries based on three yardsticks:
Usages
Functions
Components
First, we look at the similarities between the two platforms and then compare the differences.
Similarities 🟰
The following components are similar in NativeBase and Chakra UI.
Custom themes
Style Props
Design tokens
Let us look at their characteristics in detail.
Custom themes
Both libraries offer a high degree of customization features. All the components in NativeBase and Chakra UI are set in the default theme by default. To customize them, we can extend the themes in both libraries.
Here is a list of customizations the two platforms provide:
Customization based on theme tokens like colors, font sizes, line heights, etc.
Iteration of styles, base styles, sizes, or variants
Modification of global styles
// 1. Import `extendTheme`import{ extendTheme }from"@chakra-ui/react"// 2. Call `extendTheme` and pass your custom valuesconst theme =extendTheme({colors:{brand:{100:"#f7fafc",// ...900:"#1a202c",},},})// 3. Pass the new theme to `ChakraProvider`<ChakraProvider theme={theme}><App /></ChakraProvider>
Adding custom theme in Chakra UI
// 1. Import the extendTheme functionimport{ extendTheme, NativeBaseProvider }from'native-base';// 2. Extend the theme to include custom colors, fonts, etcconst newColorTheme ={brand:{900:'#8287af',800:'#7c83db',700:'#b3bef6',},fontConfig:{Roboto:{100:{normal:'Roboto-Light',italic:'Roboto-LightItalic',},200:{normal:'Roboto-Light',italic:'Roboto-LightItalic',},300:{normal:'Roboto-Light',italic:'Roboto-LightItalic',},400:{normal:'Roboto-Regular',italic:'Roboto-Italic',},}};const theme =extendTheme({colors: newColorTheme });// 3. Pass the `theme` prop to the `NativeBaseProvider`functionApp(){return(<NativeBaseProvider theme={theme}><App /></NativeBaseProvider>);}
Adding Custom theme in NativeBase.
The above code snippets show how similar the two platforms are when customizing a theme. Both allow easy modification and addition of properties to meet preset design standards. We are importing extendTheme in both libraries and adding our custom requirements.
Another example is the code below. It explains how we define the Color pallet in the two libraries.
Also, note that we are passing extendTheme as a prop named theme inside <ChakraProvider> for Chakra and <NativeBaseProvider> for NativeBase.
💡
What are ChakraProvider and NativeBaseProvider?
Every Context object comes with a Provider React component that allows consuming components to subscribe to context changes.
The Provider component accepts a value prop. One Provider connects to many consumers. Providers can be nested to override values deeper within the tree.
In a typical React application, data is passed top-down (parent to child) via props, still such usage can be cumbersome for certain types of props (e.g. locale preference, UI theme) required by many components within an application. Context provides a way to share values like these between components without passing through every level of the tree.
The ChakraProvider and NativeBaseProvider two providers are a component that makes the theme available throughout your app. Both use React's Context API.
Style Props
Both libraries offer several shorthand variations of style props for components. Here are a few popular ones.
m is used for margin.
mr is used for marginRight.
mt is used for marginTop.
p is used for padding.
pr is used for paddingRight.
pt is used for paddingTop.
py is used for padding-top and padding-bottom.
Design tokens
Design tokens bring consistency to user interfaces. They represent spacing, color, typography, etc.
Here is an example for defining design tokens for space and colors.
Instead of using absolute values for the design, we can use the generated design tokens. Here is an example.
<Box mt="4" bg="primary.500"/>
The above code snippet depicts how we can use design tokens to make the code simpler, crisp, and clean. The above code will translate into the following code:
Certain style tokens like mr for margin-right, ml for margin-left are similar in both NativeBase and Chakra UI. However, there are big differences in how to use GradientGrid Layoutas prop and filter.
Gradient
In Chakra UI, the tokens depict the direction of the application of the gradient. For NativeBase, we use the coordinate system to achieve the same output.
For Chakra UI, we can add gradient support using any of the following style props.
bgGradient: Shorthand for the convenient style prop to apply theme-aware gradients.
bgClip: Shorthand for background-clip CSS attribute. Useful when creating text gradients.
backgroundClip: The typical background-clip CSS attribute. Useful when creating text gradients.
For NativeBase, we can add gradient support using the following style props.
bg: Shorthand for background.
colors: Takes the array of colors we want to apply to the linear gradient.
start: This prop is passed under the linearGradient object and denotes the starting point for the color. We can imagine this as a grid system with a starting point.
end: This prop is passed under the linearGradient object. It denotes the ending point for the color. We can imagine this as a grid system with an ending point.
The code snippet below shows the NativeBase props discussed above, in action:
For making divisions responsive, Chakra UI gives us a grid layout. It renders a div element. In NativeBase, we use the Stack component. For example, to provide space between the divisions, in Chakra we have the gripGap prop. NativeBase uses the space prop.
Let us see how we can use space prop to achieve the same output in NativeBase. Point to be noted: The NativeBase Stack aligns items vertically or horizontally based on the direction prop.
NativeBase does not support Filter directly as a prop. We can pass it as a style prop inside _web. If we look at the code snippets below, we can see the difference between the application of filters in the two libraries.
Chakra
<Box filter="grayscale(80%)">
Box with Filter
</Box>
NativeBase:
<Box _web={{style:{filter:"grayscale(80%)"}}}>
Box with Filter
</Box>
as Prop
The as prop allows you to pass an HTML tag or component to be rendered. Say you are using a Button component and you need to make it a link. You can compose a and Button like the example shown below:
For organizing data, Chakra UI offers table. It renders a div that wraps the table component. This makes sure that the table does not overflow into the parent container. It also enables horizontal scrolling and prevents content from breaking lines.
The component renders the following props: display and maxWidth. It can also optionally accept the overflow or overflowX props to override the overflowX default value of auto rendered by this component.
It comes in three variants: simple, striped, and unstyled. The default variant is simple. We can control the sizes of the tables based on requirements. There are three sizes: sm, md, lg The default size is md.
Let us look at the code snippets for all the able variants and see how we can play with variant prop to attain different types of tables.
<TableContainer><Table variant='striped'><TableCaption>Imperial to metric conversion factors</TableCaption><Thead><Tr>.......</Tr></Thead><Tbody><Tr>........</Tr></Tbody><Tfoot><Tr>.......</Tr></Tfoot></Table></TableContainer>
The above code snippet with variant striped
example of table with variant given as stripped
Selection List
This is a convenient wrapper around <VirtualizedList>. It inherits its props (as well as those of <ScrollView>) that aren't explicitly listed here, along with the following caveats:
The internal state vanishes when content scrolls out of the render window. Make sure data is captured in the item data or external stores like Flux, Redux, or Relay.
The selection list is a PureComponent. It will not re-render if props remain shallow-equal. Make sure that everything in the renderItem passes as a prop (e.g. extraData) that is not === after updates. Otherwise, the UI may not get updated. This includes the data prop and parent component state.
Content renders asynchronously offscreen to constrain memory and enable smooth scrolling. However, if the scrolls are faster than the fill rate, the user will momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application. We are working on improving it behind the scenes.
By default, the list looks for a key prop on each item and uses it for the React key. Alternatively, you can provide a custom keyExtractor prop.
Let’s look at a code snippet for the selection list.
The choice boils down to the type of application getting built. If you are looking to develop a web-exclusive application, then there is no harm in going for Chakra UI.
For cross-platform applications, NativeBase wins. It provides the ability to use the same codebase across all platforms. The latest version of NativeBase also contains features like Multiplatformand Accessibility that make it more user-friendly.
Frequently Asked Questions (FAQs)
Q. Is NativeBase and Chakra UI open-source?
Yes, both NativeBase and ChakraUI are open-source.
Q. Is NativeBase and Chakra UI customizable?
Yes, both NativeBase and ChakraUI are customizable and reusable.
.png?table=block&id=4c771d55-3ae9-49ca-aec4-f6b85b8feaa4&cache=v2)
