### Running Example App
Source: https://github.com/callstack/react-native-ios-kit/blob/master/CONTRIBUTING.md
This command sequence is used to install dependencies and start the example application for react-native-ios-kit. It should be executed from within the 'example/' directory after cloning the repository.
```Shell
yarn && yarn start
```
--------------------------------
### Install Dependencies using Yarn
Source: https://github.com/callstack/react-native-ios-kit/blob/master/website/docs/installation.md
Installs react-native-ios-kit and react-native-vector-icons using the Yarn package manager.
```Shell
yarn add react-native-ios-kit react-native-vector-icons
```
--------------------------------
### Install Dependencies using npm
Source: https://github.com/callstack/react-native-ios-kit/blob/master/website/docs/installation.md
Installs react-native-ios-kit and react-native-vector-icons using the npm package manager.
```Shell
npm install --save react-native-ios-kit react-native-vector-icons
```
--------------------------------
### Example Usage of React Native Typography Components (JSX)
Source: https://github.com/callstack/react-native-ios-kit/blob/master/website/docs/typography.md
Demonstrates how to use various typography components provided by the library, such as Title1, Body, Caption1, etc., by rendering them with example text content.
```jsx
Title 1Title2Title3Headline
Body
CalloutSubheadFootnoteCaption1Caption2
```
--------------------------------
### Installing react-native-ios-kit with Yarn (sh)
Source: https://github.com/callstack/react-native-ios-kit/blob/master/README.md
Command to add the `react-native-ios-kit` library and its required dependency `react-native-vector-icons` to a React Native project using the Yarn package manager.
```sh
yarn add react-native-ios-kit react-native-vector-icons
```
--------------------------------
### Example Usage of Button Component (JSX)
Source: https://github.com/callstack/react-native-ios-kit/blob/master/website/docs/button.md
This snippet demonstrates how to import and use the Button component with basic styling and the `inline` and `rounded` props applied.
```jsx
import { Button } from 'react-native-ios-kit';
```
--------------------------------
### Example Usage of Icon Component in React Native
Source: https://github.com/callstack/react-native-ios-kit/blob/master/website/docs/icon.md
This snippet demonstrates how to import and use the `Icon` component from `react-native-ios-kit`. It shows how to set the `name`, `size`, and `color` props for basic customization.
```jsx
import { Icon } from 'react-native-ios-kit';
```
--------------------------------
### Example Usage of NavigationRow Component (JSX)
Source: https://github.com/callstack/react-native-ios-kit/blob/master/website/docs/navigation-row.md
Demonstrates how to import and use the `NavigationRow` component in a React Native application, showing basic props like `title`, `onPress`, and `info`.
```jsx
import { NavigationRow } from 'react-native-ios-kit';
alert('NavigationRow pressed')}
info="navigation"
/>
```
--------------------------------
### Example Usage of Toolbar Component (JSX)
Source: https://github.com/callstack/react-native-ios-kit/blob/master/website/docs/toolbar.md
This snippet demonstrates how to import and render the `Toolbar` component from `react-native-ios-kit`. It shows how to configure the toolbar with an array of `items`, each defining an icon, an `onPress` handler, and an optional `disabled` state.
```jsx
import { Toolbar } from 'react-native-ios-kit';
```
--------------------------------
### Wrapping App with ThemeProvider (JavaScript)
Source: https://github.com/callstack/react-native-ios-kit/blob/master/README.md
Example showing how to wrap the root component of a React Native application (`App`) with the `ThemeProvider` from `react-native-ios-kit` to enable theme propagation throughout the component tree. This is typically done in the entry file registered with `AppRegistry`.
```JavaScript
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 (
);
}
AppRegistry.registerComponent('main', () => Main);
```
--------------------------------
### Example Usage of GroupedList (React Native JSX)
Source: https://github.com/callstack/react-native-ios-kit/blob/master/website/docs/grouped-list.md
This snippet demonstrates how to use the GroupedList component with basic configuration. It shows importing the component and passing required props like 'sections', 'renderItem', 'renderSectionHeader', and 'groupBy' to display grouped data.
```jsx
import { GroupedList } from 'react-native-ios-kit';
(
{item.name}
)}
renderSectionHeader={({ section }) => {section.title}}
groupBy={(item: Item) => item.group}
/>
```
--------------------------------
### Example Usage of Collection Component in React Native
Source: https://github.com/callstack/react-native-ios-kit/blob/master/website/docs/collection.md
This snippet demonstrates how to use the `Collection` component from `react-native-ios-kit`. It shows how to configure the number of columns, provide data, render individual items using an `Image` component, render section headers using a `Title1` component, define a key extractor, and handle pull-to-refresh functionality using `refreshing` and `onRefresh` props.
```jsx
import { Collection } from 'react-native-ios-kit';
}
renderSectionHeader={({ section }) => {section.title}}
keyExtractor={(item, index) => `${item}_${index}`}
refreshing={this.state.refreshing}
onRefresh={this.refresh}
/>
```
--------------------------------
### Example Usage: Implementing SwitchRow in React Native
Source: https://github.com/callstack/react-native-ios-kit/blob/master/website/docs/switch-row.md
Demonstrates how to import and use the SwitchRow component, binding its value and onValueChange props to component state to control the switch's state.
```jsx
import { SwitchRow } from 'react-native-ios-kit';
this.setState({ switchSelected: value })}
/>
```
--------------------------------
### Example Usage of TextFieldRow in React Native
Source: https://github.com/callstack/react-native-ios-kit/blob/master/website/docs/text-field-row.md
Demonstrates how to import and use the TextFieldRow component, binding its value and handling changes using component state.
```jsx
import { TextFieldRow } from 'react-native-ios-kit';
this.setState({ textFieldValue: text })}
/>
```
--------------------------------
### Example Usage of PageControlView in React Native
Source: https://github.com/callstack/react-native-ios-kit/blob/master/website/docs/page-control-view.md
Demonstrates how to import and use the `PageControlView` component from `react-native-ios-kit`. It shows how to wrap multiple `View` components within `PageControlView` to create swipeable pages, setting the initial page using `defaultPage`.
```jsx
import { PageControlView } from 'react-native-ios-kit';
First page.Second page.Third page.
```
--------------------------------
### Basic TableView Usage with RowItems (JSX)
Source: https://github.com/callstack/react-native-ios-kit/blob/master/website/docs/table-view.md
Demonstrates how to import and use the TableView component within a ScrollView, including examples with headers, footers, and different configurations of RowItem components.
```jsx
import { ScrollView, TableView } from 'react-native-ios-kit';
alert('Hello')}>
```
--------------------------------
### Example Usage - SegmentedControl - JSX
Source: https://github.com/callstack/react-native-ios-kit/blob/master/website/docs/segmented-control.md
Demonstrates how to import and use the SegmentedControl component. It shows how to provide values, manage the selected index using component state, handle value changes with the onValueChange callback, and apply basic styling.
```jsx
import { SegmentedControl } from 'react-native-ios-kit';
this.setState({
selectedValue: value,
selectedIndex: index
})
}
style={{ width: 222, alignSelf: 'center' }}
/>
```
--------------------------------
### Example Usage of RowItem Component - JSX
Source: https://github.com/callstack/react-native-ios-kit/blob/master/website/docs/row-item.md
Demonstrates how to use the RowItem component with various props including icon, title, subtitle, onPress, and how to specify the right-side content using either `rightComponent` or `renderRight`.
```jsx
import { RowItem } from 'react-native-ios-kit';
alert('Hello')}
/>
}
onPress={() => alert('Hello')}
/>
```
--------------------------------
### Example Usage of Slider Component in React Native
Source: https://github.com/callstack/react-native-ios-kit/blob/master/website/docs/slider.md
This snippet demonstrates how to import and use the Slider component from react-native-ios-kit. It shows how to bind the slider's value to component state, set a step value, and configure custom icons for the minimum and maximum ends.
```jsx
import { Slider } from 'react-native-ios-kit';
this.setState({ value2: value })}
stepValue={5}
minIconName="ios-thumbs-down"
maxIconName="ios-thumbs-up"
minIconSize={20}
maxIconSize={20}
/>
```
--------------------------------
### Importing and Using Avatar Component in React Native
Source: https://github.com/callstack/react-native-ios-kit/blob/master/website/docs/avatar.md
Demonstrates how to import the Avatar component from 'react-native-ios-kit' and render it with initials and a specified size.
```jsx
import { Avatar } from 'react-native-ios-kit';
```
--------------------------------
### Basic Usage of InfoRow Component (JSX)
Source: https://github.com/callstack/react-native-ios-kit/blob/master/website/docs/info-row.md
Demonstrates how to import and use the InfoRow component from 'react-native-ios-kit' with basic title and info props.
```jsx
import { InfoRow } from 'react-native-ios-kit';
```
--------------------------------
### Providing Custom Theme to ThemeProvider (JavaScript)
Source: https://github.com/callstack/react-native-ios-kit/blob/master/README.md
Illustrates how to create a custom theme object, extending the `DefaultTheme`, and pass it to the `ThemeProvider` component using the `theme` prop. This allows overriding default colors, fonts, and other theme properties for the entire application. Requires the `color` library.
```JavaScript
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 (
);
}
```
--------------------------------
### Applying Main Theme with ThemeProvider (React Native)
Source: https://github.com/callstack/react-native-ios-kit/blob/master/website/docs/customization.md
Demonstrates how to wrap the root component of your application with the ThemeProvider component to apply a custom theme object globally. It shows how to extend the DefaultTheme and override specific properties like primaryColor and disabledColor. This requires importing ThemeProvider and DefaultTheme.
```jsx
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 (
);
}
```
--------------------------------
### Basic Usage of React Native iOS Kit Switch (JSX)
Source: https://github.com/callstack/react-native-ios-kit/blob/master/website/docs/switch.md
This snippet demonstrates how to import and use the `Switch` component from `react-native-ios-kit`. It shows binding the switch's `value` to a state variable and updating the state using the `onValueChange` prop.
```jsx
import { Switch } from 'react-native-ios-kit';
this.setState({ switchValue: value })}
/>
```
--------------------------------
### Basic Usage of SearchBar Component
Source: https://github.com/callstack/react-native-ios-kit/blob/master/website/docs/searchbar.md
Demonstrates how to import and use the SearchBar component from 'react-native-ios-kit'. It shows binding the input value to component state and handling value changes using the `onValueChange` prop, along with enabling the cancel button and animation.
```jsx
import { SearchBar } from 'react-native-ios-kit';
this.setState({ text })}
withCancel
animated
/>
```
--------------------------------
### Basic TextField Usage in React Native
Source: https://github.com/callstack/react-native-ios-kit/blob/master/website/docs/text-field.md
Demonstrates how to import and use the TextField component with a placeholder, value, and an onValueChange handler to manage state.
```jsx
import { TextField } from 'react-native-ios-kit';
this.setState({ phone: text })}
/>
```
--------------------------------
### Initializing Stepper in React Native JSX
Source: https://github.com/callstack/react-native-ios-kit/blob/master/website/docs/stepper.md
This snippet demonstrates how to import and render the Stepper component, binding its value to the component's state and handling value changes via the onValueChange prop. It also shows how to set minimum and maximum allowed values.
```jsx
import { Stepper } from 'react-native-ios-kit';
this.setState({ value })}
minValue={0}
maxValue={10}
/>
```
--------------------------------
### Wrapping Root Component with ThemeProvider (JSX)
Source: https://github.com/callstack/react-native-ios-kit/blob/master/website/docs/usage.md
This snippet demonstrates how to wrap your main application component, typically the one registered with AppRegistry, inside the ThemeProvider component. This is necessary to provide the theme context to all components within the react-native-ios-kit framework and enable features requiring top-level rendering.
```JSX
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 (
);
}
AppRegistry.registerComponent('main', () => Main);
```
--------------------------------
### Using the Spinner Component in React Native (JSX)
Source: https://github.com/callstack/react-native-ios-kit/blob/master/website/docs/spinner.md
Demonstrates how to import the Spinner component from 'react-native-ios-kit' and render it in a React Native application, controlling its visibility using the 'animating' prop.
```jsx
import { Spinner } from 'react-native-ios-kit';
```
--------------------------------
### Using ProgressBar component in React Native iOS Kit
Source: https://github.com/callstack/react-native-ios-kit/blob/master/website/docs/progress-view.md
Demonstrates the basic usage of the ProgressBar component from react-native-ios-kit. It requires importing the component and passing a 'progress' prop, typically bound to component state, to control the fill level of the bar.
```jsx
import { ProgressBar } from 'react-native-ios-kit';
```
--------------------------------
### Customizing Component Theme (JSX)
Source: https://github.com/callstack/react-native-ios-kit/blob/master/README.md
Shows how to apply a specific theme override to an individual component, such as changing the `primaryColor` for an `Icon` component, by passing a theme object directly via the component's `theme` prop. This overrides the global theme for that specific instance.
```JSX
```
--------------------------------
### Accessing Theme with withTheme HOC (React Native)
Source: https://github.com/callstack/react-native-ios-kit/blob/master/website/docs/customization.md
Illustrates using the withTheme Higher-Order Component (HOC) to inject the current theme object as a prop ('theme') into a functional component. This allows custom components to consume theme values applied via ThemeProvider or the component's own 'theme' prop. This requires importing withTheme.
```jsx
import * as React from 'react';
import { Text } from 'react-native';
import { withTheme } from 'react-native-ios-kit';
const CustomComponent = ({ theme }) => (
Morning!
)
export default withTheme(CustomComponent);
```
--------------------------------
### Customizing Theme Per Component (React Native)
Source: https://github.com/callstack/react-native-ios-kit/blob/master/website/docs/customization.md
Shows how to use the 'theme' prop available on certain components (like Icon) to override specific theme properties just for that individual component instance. This allows for localized styling without affecting the global theme applied by ThemeProvider. This requires importing the specific component.
```jsx
import * as React from 'react';
import { Icon } from 'react-native-ios-kit';
```
--------------------------------
### Using TabBar Component in React Native
Source: https://github.com/callstack/react-native-ios-kit/blob/master/website/docs/tab-bar.md
Demonstrates how to import and use the `TabBar` component from `react-native-ios-kit`. It shows how to define the `tabs` array, specifying properties like `icon`, `title`, `onPress`, `isActive`, and `disabled` for each tab item.
```jsx
import { TabBar } from 'react-native-ios-kit';
```
--------------------------------
### Using PageControl Component in React Native
Source: https://github.com/callstack/react-native-ios-kit/blob/master/website/docs/page-control.md
This snippet demonstrates the basic usage of the PageControl component. It imports the component and renders it with required props like currentPage, numberOfPages, and a callback function updateCurrentPageDisplay to handle page changes.
```jsx
import { PageControl } from 'react-native-ios-kit';
this.setState({ currentPage })
}
/>
```
--------------------------------
### Defining Theme Type in React Native iOS Kit (JavaScript/TypeScript)
Source: https://github.com/callstack/react-native-ios-kit/blob/master/website/docs/theme.md
This snippet defines the `Theme` type used within `react-native-ios-kit`. It specifies the expected color properties for various UI elements, allowing for consistent styling across components. This type is used to structure theme objects that can be provided to the `ThemeProvider` component for customization.
```javascript
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,
};
```
--------------------------------
### Accessing Theme with useTheme Hook (React Native)
Source: https://github.com/callstack/react-native-ios-kit/blob/master/website/docs/customization.md
Shows how to use the useTheme hook within a functional component to retrieve the current theme object from the nearest ThemeProvider. This is an alternative to the withTheme HOC for accessing theme values in hook-based components. This requires importing useTheme.
```jsx
import * as React from 'react';
import { Text } from 'react-native';
import { useTheme } from 'react-native-ios-kit';
const CustomComponent = () => {
const theme = useTheme()
return (
Morning!
)
}
export default CustomComponent;
```
--------------------------------
### Using CheckboxRow Component in React Native (JSX)
Source: https://github.com/callstack/react-native-ios-kit/blob/master/website/docs/checkbox-row.md
Demonstrates how to import and render the CheckboxRow component from 'react-native-ios-kit'. It shows how to manage the 'selected' state using the 'onPress' prop and how to set the 'title' and 'subtitle'.
```jsx
import { CheckboxRow } from 'react-native-ios-kit';
this.setState(state => ({
checkboxSelected: !state.checkboxSelected,
}))
}
title="CheckboxRow"
subtitle="Selectable row"
/>
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.