Introducing React-Native-iOS-Kit

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 customizable set of UI components that have been designed with iOS guidelines in mind.

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

Theming

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.

TL; DR;

Feeling already like crafting some beautiful layout for iOS? Check the react-native-ios-kit page or 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.