arrow icon
REGISTER

Introducing react-native-ios-kit

2018-01-16
Download your copy of the
Ultimate Guide to React Native Optimization

blog content

Need help with Performance Optimization? 
hire us
Need help with Super app development
hire us
Need help with React Native?
hire us
Need help with migration to 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

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.

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

Theming.

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.

TL; DR;

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.

Author:
Adam Trzciński
JavaScript developer focused on enhancing his skill set every day. Passionate with learning and getting to know new technologies. At Callstack, responsible for most of the technical onboarding sessions for new-joiners and maintaining react-native-cli. Privately, a rollerblades master, concert enthusiast and foodie 😋.
arrow icon
MORE posts from this author

Bundle React Native apps using Webpack features

Discover Re.Pack – a Webpack-based toolkit that allows you to build a React Native app with the full support of the Webpack ecosystem.

learn more

More posts from this category

Ensure your React components perform as intended as your app grows

Discover Reassure - our open-source library that allows you to run performance tests measuring the average rendering time of the in-app components.

business benefits

Performance Optimization

To stay competitive, you need a high-performing app. Improving React Native performance can bring your company many business and tech benefits. To learn more about it, check the page entirely dedicated to React Native Performance Optimization. Discover a real-life example of React Native optimization we performed for Aaqua, a Singaporean platform that enables global users to share their passion through groups.

Bundle React Native apps using Webpack features

Discover Re.Pack – a Webpack-based toolkit that allows you to build a React Native app with the full support of the Webpack ecosystem.

business benefits

Why React Native?

Building an all-in-one platform can bring your company a lot of business and tech benefits like seamless UX experience, global reach, brand growth just to name a few. To learn more about the benefits of using React Native to develop super apps, check out the MoMo case study. Where we helped improve app's performance by migrating architecture to Re.Pack.

stay tuned

Subscribe to our newsletter

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