Introducing React-Native-iOS-Kit

Authors

Adam Trzciński

Software Engineer

Callstack

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.

  
          import * as React from 'react';
        
          import { AppRegistry } from 'react-native';
        
          import { ThemeProvider } from 'react-native-ios-kit';
        
          import App from './src/App';
        
          function Main() {
        
            return (
        
              <ThemeProvider>
        
                <App />
        
              </ThemeProvider>
        
            );
        
          }
        
          AppRegistry.registerComponent('main', () => Main);

view raw rn-ios-kit-theme-provider.js hosted with ❤ by GitHub

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

  
          /* @flow */
        
          import React, { Component } from 'react';
        
          import { View, StyleSheet } from 'react-native';
        
          import { withTheme, SearchBar } from 'react-native-ios-kit';
        
          import type { Theme } from 'react-native-ios-kit/types';
        
          type Props = {
        
            theme: Theme,
        
          };
        
          type State = {
        
            text: string,
        
          };
        
          class SearchBarExample extends Component<Props, State> {
        
            state = {
        
              text: '',
        
            };
        
            render() {
        
              return (
        
                <View style={styles.screen}>
        
                  <SearchBar
        
                    value={this.state.text}
        
                    onValueChange={text => this.setState({ text })}
        
                    withCancel
        
                    animated
        
                  />
        
                </View>
        
              );
        
            }
        
          }
        
          export default withTheme(SearchBarExample);

view raw rn-ios-kit-search-bar.js hosted with ❤ by GitHub

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.

  
          import * as React from 'react';
        
          import { AppRegistry } from 'react-native';
        
          import { DefaultTheme, ThemeProvider } from 'react-native-ios-kit';
        
          import color from 'color';
        
          import App from './src/App';
        
          const theme = {
        
            ...DefaultTheme,
        
            primaryColor: 'tomato',
        
            primaryLightColor: color('tomato').lighten(0.2).rgb().string(),
        
            disabledColor: 'yellow',
        
          };
        
          function Main() {
        
            return (
        
              <ThemeProvider theme={theme}>
        
                <App />
        
              </ThemeProvider>
        
            );
        
          }

view raw rn-ios-kit-custom-theme.js hosted with ❤ by GitHub

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.

Launching or scaling an open-source project?

We help teams bring new open-source projects to life and grow them within the React Native space.

Let’s chat

Insights

Learn more about Open Source

View all

Aug 7Article

Visualizing Open Source Licenses to Analyze Compliance and Reduce Legal Risk

Discover how license-kit visualize maps and analyzes your dependency graph, helping you spot license issues, duplicates, and restrictive packages with interactive views, stats, and AI-powered summaries.

Mar 26Podcast

How Definitely Typed Changed TypeScript Forever

Discover the story behind Definitely Typed with its creator, Boris Yankov, and learn how it became essential for type-safe JavaScript in the TypeScript ecosystem.

Oct 14Article

Introducing the OMH Cloud Storage Module

Discover the OMH Cloud Storage Module. This open-source solution simplifies cloud storage integration for React Native apps.

Jul 12Article

Introduction to the React Native OMH Maps Library

Discover how the React Native OMH Maps library simplifies map integration with cross-platform compatibility, ease of use, and customization options.

Apr 22Podcast

Behind the Scenes of React Native 0.74 Release

Join the release crew members to find out what new features and improvements React Native 0.74 brings to the cross-platform development world.

Apr 27Podcast

Callstack OSS Update

April 2023 Callstack OSS Update: RFC for Expo Config Plugins, Re.Pack & Paper news.

Dec 6Article

React Native Paper 5.0 - What’s New?

React Native Paper 5.0 is here! Dive into the latest updates and improvements.

Feb 8Article

Stripe React Native: the Most Common Questions - Tipsi Migration Guide, Part 5

Check out the list of the most common questions about Stripe react Native Library prepared by Jakub Kłobus, software engineer at Callstack.

Feb 6Article

Stripe React Native Migration Function by Function - Tipsi Migration Guide, Part 3

In the third part of the Tipsi Migration Guide we describe the Stripe React Native migration function by function.

Mar 19Tutorial

The Hard Way vs. The React Native AI SDK Way: Stop Writing Custom Modules for Every Model

Learn how React Native AI uses a unified provider model to switch between cloud and on-device LLMs without rewriting application logic, enabling reliable AI experiences online and offline.

Mar 12Tutorial

Build Smarter Apps: Tool Calling & AI Orchestration Explained

Learn how on-device models in React Native can call tools, interact with external APIs, and return structured outputs you can use directly in application logic.

Mar 5Tutorial

MLC LLM + React Native: On-Device AI Without the Pain

Learn how to run third-party on-device LLMs in React Native using MLC LLM. Choose your models, run them efficiently across platforms, and keep a unified JavaScript API with React Native AI.

Feb 24Tutorial

Intelligent Fallbacks with Apple Intelligence in React Native

Learn how to use Apple’s built-in Foundation Models in React Native apps, reduce memory usage, and enable fast, fully on-device AI with React Native AI Apple.

Feb 10Tutorial

What Is the React Native AI SDK? A Complete Intro & Quickstart

Learn why on-device AI matters for React Native apps, how local LLMs behave offline, and what problems React Native AI is designed to solve from day one.

Jan 29Tutorial

Implementing an Android TurboModule with Kotlin

Learn how to implement a React Native TurboModule on Android, from the TypeScript spec and Codegen to the Kotlin implementation and package registration.

Jan 19Tutorial

Working with Different Threads in Swift TurboModules

Learn how JavaScript, native module, background, and main threads interact in React Native TurboModules, and how to use GCD queues to run async work safely in Swift.

Jan 9Tutorial

How to Add Type-Safe Constants to Swift TurboModules

Learn how to expose typed, immutable constants from a Swift TurboModule using Codegen, and get full end-to-end type safety between native and JavaScript.

Dec 30Tutorial

Adding Event Emitters to Your TurboModule in Swift

Learn how to emit native events from a Swift TurboModule and subscribe to them in JavaScript, including proper memory management and Codegen integration.

Dec 22Tutorial

Writing Your First TurboModule in Swift

Learn how to build a fully working TurboModule in Swift, integrate it with Codegen, and bridge it through Objective‑C inside an Expo app.

	import * as React from 'react';
	import { AppRegistry } from 'react-native';
	import { ThemeProvider } from 'react-native-ios-kit';
	import App from './src/App';

	function Main() {
	return (
	<ThemeProvider>
	<App />
	</ThemeProvider>
	);
	}

	AppRegistry.registerComponent('main', () => Main);

	/* @flow */
	import React, { Component } from 'react';
	import { View, StyleSheet } from 'react-native';

	import { withTheme, SearchBar } from 'react-native-ios-kit';
	import type { Theme } from 'react-native-ios-kit/types';

	type Props = {
	theme: Theme,
	};
	type State = {
	text: string,
	};

	class SearchBarExample extends Component<Props, State> {
	state = {
	text: '',
	};
	render() {
	return (
	<View style={styles.screen}>
	<SearchBar
	value={this.state.text}
	onValueChange={text => this.setState({ text })}
	withCancel
	animated
	/>
	</View>
	);
	}
	}

	export default withTheme(SearchBarExample);

	import * as React from 'react';
	import { AppRegistry } from 'react-native';
	import { DefaultTheme, ThemeProvider } from 'react-native-ios-kit';
	import color from 'color';
	import App from './src/App';

	const theme = {
	...DefaultTheme,
	primaryColor: 'tomato',
	primaryLightColor: color('tomato').lighten(0.2).rgb().string(),
	disabledColor: 'yellow',
	};

	function Main() {
	return (
	<ThemeProvider theme={theme}>
	<App />
	</ThemeProvider>
	);
	}

Why?

How to?

Theming

TL; DR;

Ship priority features with React and React Native experts.

React Native Development

React Development

Next.js Development

Expo Development

Node.js Development

C++ Development

Module Federation Development

On-Device AI

Feature UX/UI Design

Cross-Platform Design Systems