Introducing react-native-ios-kit

Adam Trzciński

blog content

Need help with React Native?
hire us
Our React Native EU Conference is back
register nowlearn more

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 — the missing React Native UI Kit for iOS,

a highly customisable set of UI components that have been designed with iOS guidelines in mind.

UI components react-native-ios-kit
UI components react-native-ios-kit


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 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.

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

react-native-ios-kit search bar
react-native-ios-kit search bar


react-native-ios-kit theming examples
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.

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.


Feeling already like crafting some beautiful layout for iOS? Go visit our page or read Readme file of our repo to see all the components we offer. There’s also an ExampleApp 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.

Adam Trzciński
JS dev focused on enhancing his skillset with every day. Passionate with learning and getting to know new techs and skills.
arrow icon
MORE posts from this author

learn more

More posts from this category

stay tuned

Subscribe to our newsletter

You may unsubscribe from these communications at any time. For details see the Privacy Policy.