react-native-ios-kit

The Slider component utilizes the following properties from the theme object:

• placeholderColor: Used for icon colors.
• primaryColor: Used for the minimum track tint color.
• dividerColor: Used for the maximum track tint color.

You can customize the appearance of the TableView header and footer by passing a custom theme object to the theme prop. The component utilizes the following theme properties:

• footnoteBackgroundColor: Sets the background color of the header and footer.
• footnoteColor: Sets the text color of the header and footer.
• primaryColor: Sets the text color of the footer specifically when the onFooterPress prop is provided.

The Theme type defines the color palette used across all components in react-native-ios-kit. It ensures visual consistency by providing specific keys for primary colors, backgrounds, text, and status colors. You can use these keys to build your own custom theme or to ensure your application's styling aligns with the kit's components.

export type Theme = {
  primaryColor: string,
  primaryLightColor: string,
  disabledColor: string,
  backgroundColor: string,
  barColor: string,
  dividerColor: string,
  textColor: string,
  placeholderColor: string,
  footnoteColor: string,
  footnoteBackgroundColor: string,
  positiveColor: string,
};

You can customize the appearance of the PageControlView using the theme prop or by passing specific color props. The component relies on the following theme properties:

• barColor: Used as the default currentPageIndicatorTintColor.
• dividerColor: Used as the default pageIndicatorTintColor.

If you provide a custom theme object via the theme prop, it will override the default values provided by the ThemeProvider.

You can customize the appearance of the SegmentedControl using the theme prop or the tintColor prop:

• tintColor: Sets the accent color of the control. If not provided, it defaults to the primaryColor defined in your current theme.
• theme: Allows you to pass a custom Theme object to override component-specific styling.

Note that tintColor maps to the primaryColor property within the component's theme implementation.

The TextField component is a single-line, fixed-height input field designed for requesting small amounts of information (e.g., email addresses or phone numbers). It automatically triggers the keyboard when tapped. It is a wrapper around the standard React Native TextInput with integrated iOS-style styling.

import { TextField } from 'react-native-ios-kit';

<TextField
  placeholder={'Phone number'}
  value={this.state.phone}
  onValueChange={text => this.setState({ phone: text })}
/>

The Collection component manages and presents an ordered set of content (like a photo grid) in a highly visual, customizable layout. It supports multi-column grids, section headers, footers, and pull-to-refresh functionality.

import { Collection } from 'react-native-ios-kit';

<Collection
  numberOfColumns={4}
  data={data}
  renderItem={item => <Image source={{ uri: item }} />}
  renderSectionHeader={({ section }) => <Title1>{section.title}</Title1>}
  keyExtractor={(item, index) => `${item}_${index}`}
  refreshing={this.state.refreshing}
  onRefresh={this.refresh}
/>

To use the components from react-native-ios-kit, you must wrap your root component in the ThemeProvider. This component provides the theme context to all components and acts as a portal for components that need to be rendered at the top level.

It is recommended to wrap the component passed to AppRegistry.registerComponent.

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);