HOME
|
COMMUNITY
|
BLOG
|
Introducing React-Native-iOS-Kit

Introducing React-Native-iOS-Kit

In short

Callstack, with a strong commitment to open-source contributions, introduces react-native-ios-kit, a comprehensive React Native UI Kit for iOS. This customizable collection of UI components aligns with iOS design guidelines, catering to developers and companies striving to create functional and aesthetically pleasing apps in the React Native ecosystem.

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.

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

React Galaxy City
Get our newsletter
Sign up

By subscribing to the newsletter, you give us consent to use your email address to deliver curated content. We will process your email address until you unsubscribe or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.

Callstack astronaut
Download our ebook
Download

I agree to receive electronic communications By checking any of the boxes, you give us consent to use your email address for our direct marketing purposes, including the latest tech & biz updates. We will process your email address and names (if you have entered them into the above form) until you withdraw your consent to the processing of your names, or unsubscribe, or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.

By pressing the “Download” button, you give us consent to use your email address to send you a copy of the Ultimate Guide to React Native Optimization.