---
title: "Introducing React-Native-iOS-Kit"
description: "Discover react-native-ios-kit - the definitive React Native UI Kit for iOS."
url: https://www.callstack.com/blog/introducing-react-native-ios-kit
updated: 2026-10-24T08:39:32.054Z
---

# Introducing React-Native-iOS-Kit

Discover react-native-ios-kit - the definitive React Native UI Kit for iOS.

_By Adam Trzciński, Software Engineer @ Callstack · Published 2018-01-16 · Category: Open Source_

At Callstack, we help developers and companies deliver and create functional and beautiful apps. That’s why we’re putting such strong emphasis on open-source projects, knowing that it is the best way to help the community. And since most of our projects are made with \<rte-code\>react-native\<rte-code\> that’s where most of our attention focuses.

Today, I would like to unveil to all of you[ react-native-ios-kit](https://github.com/callstack/react-native-ios-kit)  -  the missing React Native UI Kit for iOS, a highly customizable set of UI components that have been designed with iOS guidelines in mind.

![UI components react-native-ios-kit](https://www.callstack.com/assets/UI-components-react-native-ios-kit.png)

_UI components react-native-ios-kit_

### Why?

During developing our applications, we were often asked to re-create some components for iOS, like SearchBar, TabBar, Stepper and more.

Normally, when you do native development, you have Xcode and these things are provided out of the box. You can style them and get there. With React Native, we ended up creating them over and over again, as I’m sure some of you have also done that.

To make your (and ours!) life easier, we have decided to create a library which exposes most often used iOS components.

### How to?

\<rte-code\>yarn add react-native-ios-kit \<rte-code\>— and voila. (Well, not really, you need to install [react-native-vector-icons ](https://github.com/oblador/react-native-vector-icons)as well, but that’s it, I promise). Now, you are all set and good to go.

We’re using \<rte-code\>ThemeProvider\<rte-code\> to inject some basic colors into our components, so first of all, you should wrap your main container (preferably one that you register via \<rte-code\>AppRegistry\<rte-code\>) with it.

[GitHub Gist](https://gist.github.com/adamTrz/066ef188fb3723c517372c3a47108493)

Now you are ready to use any exported components in your app, wherever you want.

[GitHub Gist](https://gist.github.com/adamTrz/2b3db720f4fabb6b8d77d16d9f88f1c7)

![react-native-ios-kit search bar](https://www.callstack.com/assets/react-native-ios-kit-search-bar.gif)

_react-native-ios-kit search bar_

### Theming

![react-native-ios-kit theming examples](https://www.callstack.com/assets/react-native-ios-kit-theming-examples.png)

_react-native-ios-kit theming examples_

As I’ve mentioned earlier — each of our components receive \<rte-code\>Theme\<rte-code\> object which is passed to it as a prop. With it, you can control basic look of the components — you can add your app’s color palette to it and customize how all pieces looks together.

[GitHub Gist](https://gist.github.com/adamTrz/0d620d1a1905a4fea00c811e14738662)

And even if you need to have more control over how your components look, you can pass style object to most of those, just like you are used to do in every day work.

### TL; DR;

Feeling already like crafting some beautiful layout for iOS? Check the [react-native-ios-kit page](https://callstack.github.io/react-native-ios-kit/) or [Readme file](https://github.com/callstack/react-native-ios-kit) of our repo to see all the components we offer. There’s also an [ExampleApp](https://expo.io/@mobile-dev/react-native-ios-kit) that you can launch with Expo, and try out our components live.

As always, all your input is highly welcomed, either in form of some praise words (leave us a ⭐️ on GitHub!️) or in form of an issue — we are curious about all use cases and how you are using our library.