React Native UI DevKit

https://reactnativeuidevkit.com/docs
Admin
React Native UI DevKit is a free component library that delivers a native interface for each...
Tokens:50,116
Snippets:199
Trust Score:4.2
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install React Native UI DevKit

Source: https://reactnativeuidevkit.com/docs/Introduction/Getting-Started

Installs the core react-native-ui-devkit package using npm.

```bash
npm install react-native-ui-devkit
```

--------------------------------

### Install iOS Pods

Source: https://reactnativeuidevkit.com/docs/Introduction/Getting-Started

Installs necessary pods for iOS development after installing the library and its dependencies.

```bash
cd ios && pod install
```

--------------------------------

### Install Peer Dependencies (npm)

Source: https://reactnativeuidevkit.com/docs/Introduction/Getting-Started

Installs all required peer dependencies for React Native UI DevKit using npm.

```bash
npm install react-native-gesture-handler react-native-device-info react-native-vector-icons react-native-sfsymbols react-native-haptic-feedback react-native-reanimated
```

--------------------------------

### Install Peer Dependencies (pnpm)

Source: https://reactnativeuidevkit.com/docs/Introduction/Getting-Started

Installs all required peer dependencies for React Native UI DevKit using pnpm.

```bash
pnpm add react-native-gesture-handler react-native-device-info react-native-vector-icons react-native-sfsymbols react-native-haptic-feedback react-native-reanimated
```

--------------------------------

### Install Peer Dependencies (Yarn)

Source: https://reactnativeuidevkit.com/docs/Introduction/Getting-Started

Installs all required peer dependencies for React Native UI DevKit using Yarn.

```bash
yarn add react-native-gesture-handler react-native-device-info react-native-vector-icons react-native-sfsymbols react-native-haptic-feedback react-native-reanimated
```

--------------------------------

### Run Android Project

Source: https://reactnativeuidevkit.com/docs/Introduction/Getting-Started

Command to run the React Native application on an Android emulator or device.

```bash
npx react-native run-android
```

--------------------------------

### Configure RNUIDevKitProvider

Source: https://reactnativeuidevkit.com/docs/Introduction/Getting-Started

Demonstrates how to import and use the RNUIDevKitProvider in your React Native application to manage theme and background colors.

```javascript
import React from 'react';

// React Native UI DevKit
import {RNUIDevKitProvider} from 'react-native-ui-devkit'

const App=()=>{
return(
<RNUIDevKitProvider theme={'auto'} backgroundColor={'both'}>
  
{...}
  
</RNUIDevKitProvider>
);
}

export default App;
```

--------------------------------

### Install Dependencies (npm)

Source: https://reactnativeuidevkit.com/docs/Library

Installs the necessary Node.js dependencies for the project using npm.

```bash
npminstall
```

--------------------------------

### Install Dependencies (Yarn)

Source: https://reactnativeuidevkit.com/docs/Library

Installs the necessary Node.js dependencies for the project using Yarn.

```bash
yarninstall
```

--------------------------------

### Install Dependencies (pnpm)

Source: https://reactnativeuidevkit.com/docs/Library

Installs the necessary Node.js dependencies for the project using pnpm.

```bash
pnpinstall
```

--------------------------------

### Install iOS Pods

Source: https://reactnativeuidevkit.com/docs/Library

Installs the required CocoaPods dependencies for iOS development after cloning the repository.

```bash
cd ios && pod install
```

--------------------------------

### Install React Native Vector Icons

Source: https://reactnativeuidevkit.com/docs/Introduction/Troubleshooting

This section addresses issues related to the react-native-vector-icons package. Proper installation is crucial for icon rendering. Follow the platform-specific guides for Android and iOS.

```bash
# General Installation
npm install react-native-vector-icons
# or
yarn add react-native-vector-icons

# Android Specifics
# Refer to: https://github.com/oblador/react-native-vector-icons#android

# iOS Specifics
# Refer to: https://github.com/oblador/react-native-vector-icons#ios
```

--------------------------------

### Install Dependencies (npm, Yarn, pnpm)

Source: https://reactnativeuidevkit.com/docs/Layout

Install project dependencies using npm, Yarn, or pnpm. For iOS development on Mac, ensure pods are installed via Cocoapods.

```bash
npminstall
```

```bash
yarninstall
```

```bash
pnpinstall
```

```bash
cd ios && pod install
```

--------------------------------

### Install React Native UI DevKit

Source: https://reactnativeuidevkit.com/docs/Introduction/Troubleshooting

Ensures the react-native-ui-devkit package is installed in your project. If you encounter issues, verify its presence in package.json or reinstall it.

```bash
npm install react-native-ui-devkit
# or
yarn add react-native-ui-devkit
```

--------------------------------

### Run React Native Application

Source: https://reactnativeuidevkit.com/docs/Library

Starts the React Native application on an Android emulator or device.

```bash
npx react-native run-android
```

--------------------------------

### Clone Repository

Source: https://reactnativeuidevkit.com/docs/Layout

Clone the React Native UI DevKit Layout repository from GitHub to start using the project.

```bash
git clone https://github.com/reactnativeuidevkit/react-native-ui-devkit-layout.git
```

--------------------------------

### RNUIDevKitProvider Usage Example

Source: https://reactnativeuidevkit.com/docs/Introduction/Provider

Demonstrates how to integrate the RNUIDevKitProvider with React Navigation to manage application-wide theming and native-style navigability. It shows the necessary imports and the structure for wrapping navigation stacks.

```javascript
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

// RNUIDevKitProvider
import { RNUIDevKitProvider, Item } from 'react-native-ui-devkit';

const Stack = createNativeStackNavigator();
const App = () => {
  const Component = (props) => {
    return (
      <Item data={{ title: 'Item', onPress: async () => {} }} />
    )
  }

  return (
    <RNUIDevKitProvider theme={'auto'} backgroundColor={'both'}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Component" component={Component} />
        </Stack.Navigator>
      </NavigationContainer>
    </RNUIDevKitProvider>
  );
}

export default App;
```

--------------------------------

### Button Usage Example (JavaScript)

Source: https://reactnativeuidevkit.com/docs/Components/Button

Provides a JavaScript example for using the Button component from React Native UI DevKit. This snippet illustrates the import and data structure for the button.

```javascript
import React from 'react';

// React Native UI DevKit
import {Button} from 'react-native-ui-devkit';

const App = () => {
  const _item = {
    title: 'Button',
    onPress: () => {}
  };

  return (
    <Button data={_item}/>
  );
}

export default App;
```

--------------------------------

### Configure Native-style

Source: https://reactnativeuidevkit.com/docs/Introduction/Troubleshooting

For Native-style to function correctly, your project must be configured properly. Refer to the provider documentation for detailed setup instructions.

```APIDOC
Provider Configuration:
  Ensure the Provider component is correctly set up in your application's root.
  Refer to the documentation for specific configuration props and usage.
  Example:
    <Provider>
      <App />
    </Provider>
```

--------------------------------

### Install React Native SFSymbols

Source: https://reactnativeuidevkit.com/docs/Introduction/Troubleshooting

If you are using SF Symbols and encountering rendering issues, ensure the react-native-sfsymbols package is installed correctly. This package is iOS-specific and requires iOS 14 or later. Verify the icon names using Apple's SF Symbols reference.

```bash
# Installation
npm install react-native-sfsymbols
# or
yarn add react-native-sfsymbols

# Usage Note:
# This package only works on iOS and versions above iOS 14.
# Ensure correct icon names are used from: https://developer.apple.com/sf-symbols/
```

--------------------------------

### marginBottom() Usage Example

Source: https://reactnativeuidevkit.com/docs/Functions/marginBottom

Demonstrates how to import and use the marginBottom() function from the react-native-ui-devkit library to apply bottom margin styles to a View component.

```javascript
import React from 'react';
import { Text, View } from "react-native";

// React Native UI DevKit
import { marginBottom } from 'react-native-ui-devkit';

const App = () => {
  return (
    <View style={[ 
      marginBottom(),
      {
        // your custom style here...
      }
    ]}>
      <Text>Text</Text>
    </View>
  );
}

export default App;
```

--------------------------------

### Button Usage Example

Source: https://reactnativeuidevkit.com/docs/Components/Button

Demonstrates how to use the Button component from React Native UI DevKit in a React Native application. It shows the import statement and how to pass button configuration data.

```typescript
import React from 'react';

// React Native UI DevKit
import {Button,IButtonProps} from 'react-native-ui-devkit';

const App = () => {
  const _item: IButtonProps = {
    title: 'Button',
    onPress: () => {}
  };

  return (
    <Button data={_item}/>
  );
}

export default App;
```

--------------------------------

### paddingTop() Usage Example

Source: https://reactnativeuidevkit.com/docs/Functions/paddingTop

Demonstrates how to import and use the paddingTop() function from React Native UI DevKit to apply top padding to a View component. This function handles platform-specific styling automatically.

```javascript
import React from 'react';
import { Text, View } from "react-native";

// React Native UI DevKit
import { paddingTop } from 'react-native-ui-devkit';

const App = () => {
  return (
    <View style={[
      paddingTop(),
      {
        // your custom style here...
      }
    ]}>
      <Text>Text</Text>
    </View>
  );
}

export default App;
```

--------------------------------

### Icon Component Usage

Source: https://reactnativeuidevkit.com/docs/Components/Icon

Demonstrates how to import and use the Icon component from React Native UI DevKit. It shows a basic example of rendering an icon with specified name, type, size, and color.

```javascript
import React from "react";

// React Native UI DevKit
import { Icon } from "react-native-ui-devkit";

const App = () => {
  return (<Icon name='home' type='antdesign' size={23} color={'#000000'}/>)
};

export default App;
```

--------------------------------

### Switch Component Usage (JavaScript)

Source: https://reactnativeuidevkit.com/docs/Components/Switch

Provides a JavaScript example of integrating the Switch component within an Item using React Native UI DevKit. It illustrates state management and passing the switch configuration to the Item component.

```JavaScript
import React, { useState } from 'react';

// React Native UI DevKit
import { Item } from 'react-native-ui-devkit';

const App = () => {
  const [vars, setVars] = useState({ switch: false });
  const _item = {
    title: 'Switch',
    switch: {
      value: vars.switch,
      onValueChange: async (value) => {
        setVars((prevState) => ({ ...prevState, switch: value }));
      }
    }
  };

  return (
    <Item data={_item} />
  );
}

export default App;
```

--------------------------------

### marginTop() Usage Example

Source: https://reactnativeuidevkit.com/docs/Functions/marginTop

Demonstrates how to import and use the marginTop() function from the react-native-ui-devkit library to apply platform-specific top margins to a View component. The function can be used directly within the style array of a component.

```javascript
import React from 'react';
import { Text, View } from "react-native";

// React Native UI DevKit
import { marginTop } from 'react-native-ui-devkit';

const App = () => {
  return (
    <View style={[ 
      marginTop(),
      {
        // your custom style here...
      }
    ]}>
      <Text>Text</Text>
    </View>
  );
}

export default App;
```

--------------------------------

### FlatList Separator Properties

Source: https://reactnativeuidevkit.com/docs/Components/FlatList

Configures the separator properties for FlatList items. It defines the starting point of the separator and can receive item data for context.

```APIDOC
separator: object
  start: number // Defines where the separator will start.
  index: number // Used in conjunction with FlatList, it receives the index of the item in question.
  data: [{},{}] // Used in conjunction with FlatList, it receives an array of 2 items. The first item must be the previous item in the FlatList, and the second item must be the Item in question.
```

--------------------------------

### paddingBottom() Usage Example

Source: https://reactnativeuidevkit.com/docs/Functions/paddingBottom

Demonstrates how to import and use the paddingBottom() function from React Native UI DevKit to apply bottom padding to a View component. This function dynamically adjusts padding based on the platform and version.

```javascript
import React from 'react';
import { Text, View } from "react-native";

// React Native UI DevKit
import { paddingBottom } from 'react-native-ui-devkit';

const App = () => {
  return (
    <View style={[
      paddingBottom(),
      {
        // your custom style here...
      }
    ]}>
      <Text>Text</Text>
    </View>
  );
}

export default App;
```

--------------------------------

### Action Component Usage in a List (JavaScript)

Source: https://reactnativeuidevkit.com/docs/Components/Action

Provides a JavaScript example of integrating the Action component into a List using React Native UI DevKit. This snippet illustrates the data structure for list items, defining the title and action properties, including icon details and the onPress callback.

```javascript
import React from 'react';

// React Native UI DevKit
import { List } from 'react-native-ui-devkit';

const App = () => {
  const _list = [
    {
      title: 'Item 1',
      action: {
        icon: { name: 'more-horizontal', type: 'feather', color: '#333333', size: 20 },
        onPress: async () => {}
      }
    },
    {
      title: 'Item 2',
      action: {
        icon: { name: 'more-horizontal', type: 'feather', color: '#333333', size: 20 },
        onPress: async () => {}
      }
    }
  ];

  return (
    <List data={_list} />
  );
}

export default App;
```

--------------------------------

### paddingHorizontal() Usage Example

Source: https://reactnativeuidevkit.com/docs/Functions/paddingHorizontal

Demonstrates how to import and use the paddingHorizontal() function from React Native UI DevKit to apply horizontal padding to a View component. It shows the necessary imports and how to integrate the function within the style prop.

```javascript
import React from 'react';
import { Text, View } from "react-native";

// React Native UI DevKit
import { paddingHorizontal } from 'react-native-ui-devkit';

const App = () => {
  return (
    <View style={[
      paddingHorizontal(),
      {
        // your custom style here...
      }
    ]}>
      <Text>Text</Text>
    </View>
  );
}

export default App;
```

--------------------------------

### RNUIDevKitProvider API Documentation

Source: https://reactnativeuidevkit.com/docs/Introduction/Provider

Details the properties accepted by the RNUIDevKitProvider component, including theme settings and background color configurations for managing native-style presentation.

```APIDOC
RNUIDevKitProvider:
  Props:
    theme: Set whether the theme is automatic, light or dark.
      Type: "auto" | "light" | "dark"
    backgroundColor: Defines whether the system's native background color will be used.
      Type: "both" | "android" | "ios" | "none"
```

--------------------------------

### Separator Component Props

Source: https://reactnativeuidevkit.com/docs/Components/Separator

Details the available props for the Separator component, including 'props' for FlatList item separator props, 'start' to define the division's starting point, and 'end' to define its ending point.

```APIDOC
Separator:
  props: object
    description: Receives the ItemSeparatorComponent props from a FlatList.
    type: object
  start: number
    description: Defines where the division will start.
    type: number
  end: number
    description: Defines where the division will end.
    type: number
```

--------------------------------

### Clone Project Repository

Source: https://reactnativeuidevkit.com/docs/Library

Clones the React Native UI DevKit Library project from GitHub to your local machine.

```bash
git clone https://github.com/reactnativeuidevkit/react-native-ui-devkit-library.git
```

--------------------------------

### Separator Configuration

Source: https://reactnativeuidevkit.com/docs/Components/Swipeable

Configures the separator properties for a swipeable item, including its start position and integration with FlatList.

```APIDOC
separator: object
  start: number // Defines where the separator will start.
  index: number // Used in conjunction with FlatList, it receives the index of the item in question.
  data: [{},{}] // Used in conjunction with FlatList, it receives an array of 2 items. The first item must be the previous item in the FlatList, and the second item must be the Item in question.
```

--------------------------------

### React Native UI DevKit Licensing

Source: https://reactnativeuidevkit.com/docs/Faqs

This section clarifies that the React Native UI DevKit package is free to use for personal and commercial projects without restrictions.

```javascript
Yes, the React Native UI DevKit package is completely free and you can use it for your personal projects or projects you are working on. You can also create applications and sell them without any restrictions.
```

--------------------------------

### borderRadius() Usage Example

Source: https://reactnativeuidevkit.com/docs/Functions/borderRadius

Demonstrates how to import and use the borderRadius() function from the react-native-ui-devkit library to apply border radius styles to a View component.

```javascript
import React from 'react';
import { Text, View } from "react-native";

// React Native UI DevKit
import { borderRadius } from 'react-native-ui-devkit';

const App = () => {
  return (
    <View style={[
      borderRadius(),
      {
        // your custom style here...
      }
    ]}>
      <Text>Text</Text>
    </View>
  );
}

export default App;
```

--------------------------------

### Run Project on Android

Source: https://reactnativeuidevkit.com/docs/Layout

Execute the command to run the React Native project on an Android device or emulator.

```bash
npx react-native run-android
```

--------------------------------

### React Native UI DevKit Security

Source: https://reactnativeuidevkit.com/docs/Faqs

This section discusses the security of the React Native UI DevKit. It advises using the official package and warns against using forks due to potential security and copyright issues.

```javascript
Yes, use the React Native UI DevKit package. However, if you use a `fork` of our package for some benefit or feature, we do not guarantee its security and copy rights may apply.
```

--------------------------------

### Separator Configuration

Source: https://reactnativeuidevkit.com/docs/Components/Switch

Configures the separator properties for an item. This includes defining the start position of the separator, its index (useful with FlatList), and data for FlatList integration.

```javascript
{
  start: number, // Defines where the separator will start.
  index: number, // Used in conjunction with FlatList, it receives the index of the item in question.
  data: [{}, {}] // Used in conjunction with FlatList, it receives an array of 2 items. The first item must be the previous item in the FlatList, and the second item must be the Item in question.
}
```

--------------------------------

### Correct Component Import

Source: https://reactnativeuidevkit.com/docs/Introduction/Troubleshooting

Demonstrates the correct way to import components from the 'react-native-ui-devkit' package to avoid errors caused by incorrect imports or conflicts with other packages.

```javascript
import{Item}from'react-native-ui-devkit';

```

--------------------------------

### Collapsible Item in a List (JavaScript)

Source: https://reactnativeuidevkit.com/docs/Components/Collapsible

Provides an example of using the Collapsible component in a list with JavaScript. This snippet illustrates state management and conditional rendering for collapsible content.

```JavaScript
import React, { useState } from 'react';
import { Text, View } from 'react-native';

// React Native UI DevKit
import { List, MediumFontSize } from 'react-native-ui-devkit';

const App = () => {
  const [vars, setVars] = useState({ collapsible: false });

  const _list = [
    {
      icon: { name: 'chevron-collapse', type: 'ionicons', size: 18, color: '#FFFFFF', backgroundColor: '#333333' },
      title: 'Collapsible',
      collapsible: vars.collapsible,
      onPress: async () => {
        setVars((prevState) => ({ ...prevState, collapsible: !prevState.collapsible }));
      }
    },
    {
      ...vars.collapsible &&
      {
        component: (
          <View style={{ marginVertical: 10 }}>
            <Text style={[MediumFontSize(), {
              // your custom style here...
            }]}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Integer odio nisi, commodo eu semper sed, elementum a risus.Nulla facilisi.</Text>
          </View>
        )
      }
    }
  ];

  return (
    <List data={_list} />
  );
}

export default App;
```

--------------------------------

### Checkbox Usage with Item (JavaScript)

Source: https://reactnativeuidevkit.com/docs/Components/Checkbox

Provides a JavaScript example of integrating the Checkbox component into an Item. It utilizes the useState hook for state management and imports 'Item' from 'react-native-ui-devkit'.

```javascript
import React, { useState } from 'react';

// React Native UI DevKit
import { Item } from 'react-native-ui-devkit';

const App = () => {
  const [vars, setVars] = useState({ check: false });
  const _item = {
    title: 'Checkbox',
    checkbox: vars.check,
    onPress: async () => {
      setVars((prevState) => ({ ...prevState, check: !prevState.check }));
    }
  };

  return (
    <Item data={_item} />
  );
}

export default App;
```

--------------------------------

### Separator Configuration

Source: https://reactnativeuidevkit.com/docs/Components/Checkbox

Configures the separator properties for an item. This includes defining the start position, the item's index for FlatList integration, and data for comparison within the FlatList.

```javascript
{
  start: number, // Defines where the separator will start.
  index: number, // Used in conjunction with FlatList, it receives the index of the item in question.
  data: [{}, {}] // Used in conjunction with FlatList, it receives an array of 2 items. The first item must be the previous item in the FlatList, and the second item must be the Item in question.
}
```

--------------------------------

### React Native UI DevKit v2.0.0 Release Notes

Source: https://reactnativeuidevkit.com/docs/Introduction/Versions

Details the release of version 2.0.0 of React Native UI DevKit. This version is plug-and-play, eliminating the need for a configuration file. Theme control (light/dark and system background) is now handled within the provider.

```React Native
## v2.0.0
> Now it's plug and play, there is no more configuration file.  
> Control the light or dark theme and system background in the provider.
> ## Release Notes
> Plug and play
```

--------------------------------

### Margin and Padding Utilities

Source: https://reactnativeuidevkit.com/docs/index

These functions help in applying consistent margin and padding styles to React Native components. They simplify the process of creating responsive layouts by abstracting common spacing values.

```javascript
import { marginTop, marginBottom, marginHorizontal, paddingTop, paddingBottom, paddingHorizontal } from 'react-native-ui-devkit';

// Example usage:
const topMarginStyle = marginTop(16);
const horizontalPaddingStyle = paddingHorizontal(8);

// Apply styles to a View component:
<View style={[topMarginStyle, horizontalPaddingStyle]}>
  {/* Content */}
</View>
```

--------------------------------

### Separator Configuration

Source: https://reactnativeuidevkit.com/docs/Components/Radio

Configures the separator properties for an item. This includes defining the start position of the separator, its index when used with FlatList, and data for rendering the separator in relation to list items.

```javascript
{
  start: number, // Defines where the separator will start.
  index: number, // Used in conjunction with FlatList, it receives the index of the item in question.
  data: [{}, {}] // Used in conjunction with FlatList, it receives an array of 2 items. The first item must be the previous item in the FlatList, and the second item must be the Item in question.
}
```

--------------------------------

### Migrating to React Native UI DevKit Button

Source: https://reactnativeuidevkit.com/docs/index

Demonstrates the process of migrating a standard React Native TouchableOpacity component to the Button component provided by React Native UI DevKit. This highlights the ease of integration and the benefits of using the library's components.

```javascript
// From  
import React from "react";  
import {Text,TouchableOpacity} from "react-native";  
  
const App=()=>{
return(
<TouchableOpacity onPress={async()=>{}}>
<Text>Button</Text>
</TouchableOpacity>
)
};
  
exportdefault App;
```

```javascript
// To  
import React from "react";  
  
// React Native UI DevKit  
import {Button} from "react-native-ui-devkit";  
  
const App=()=>{
return(
<Button data={{ title:'Button',onPress:async()=>{}}}/>
)
};
  
exportdefault App;
```

--------------------------------

### TextInput Separator Configuration

Source: https://reactnativeuidevkit.com/docs/Components/TextInput

Sets the separator properties for a TextInput component, typically used in conjunction with FlatList. It defines the starting point of the separator and can use item index and data for context.

```APIDOC
separator:
  start: number // Defines where the separator will start.
  index: number // Used in conjunction with FlatList, it receives the index of the item in question.
  data: [{},{}] // Used in conjunction with FlatList, it receives an array of 2 items. The first item must be the previous item in the FlatList, and the second item must be the Item in question.
```

--------------------------------

### Card Separator Properties

Source: https://reactnativeuidevkit.com/docs/Components/Card

Defines the properties for a separator within a Card component, typically used with FlatList. It specifies where the separator starts and can utilize item index and data for conditional rendering.

```javascript
{
  start: number, // Defines where the separator will start.
  index: number, // Used in conjunction with FlatList, it receives the index of the item in question.
  data: [{}, {}] // Used in conjunction with FlatList, it receives an array of 2 items. The first item must be the previous item in the FlatList, and the second item must be the Item in question.
}
```

--------------------------------

### Configure React Native Reanimated Plugin

Source: https://reactnativeuidevkit.com/docs/Introduction/Troubleshooting

Ensures the React Native Reanimated plugin is correctly added to your babel.config.js file. This is crucial for Reanimated to function properly within your React Native project.

```javascript
module.exports={
presets:[
...// don't add it here :(
],
plugins:[
...// add here :)
'react-native-reanimated/plugin'
]
};

```

--------------------------------

### List Component Usage (TypeScript)

Source: https://reactnativeuidevkit.com/docs/Components/List

Demonstrates how to use the List component with TypeScript, defining a data array with item configurations including titles and onPress handlers.

```typescript
import React from 'react';

// React Native UI DevKit
import {List,IItemProps} from 'react-native-ui-devkit';

const App = () => {
  const _list: Array<IItemProps> = [
    {
      title: 'Item 1',
      onPress: async () => {}
    },
    {
      title: 'Item 2',
      onPress: async () => {}
    }
  ];

  return (
    <List data={_list} />
  );
}

export default App;
```

--------------------------------

### React Native Haptic Feedback Implementation

Source: https://reactnativeuidevkit.com/docs/Open-source-libraries

React Native Haptic Feedback enables you to incorporate tactile feedback into your React Native applications, enhancing user experience through physical responses. This library allows for various types of haptic feedback.

```javascript
import ReactNativeHapticFeedback from "react-native-haptic-feedback";

const options = {
  enableVibrateFallback: true,
  ignoreAndroidSystemSettings: false
};

// Usage example:
ReactNativeHapticFeedback.trigger("impactHeavy", options);
```

--------------------------------

### Separator Component Configuration

Source: https://reactnativeuidevkit.com/docs/Components/Action

Defines the properties for a separator line within a list or item. This includes controlling the start position of the separator, its index in a FlatList, and providing data for context within the FlatList.

```APIDOC
separator:
  start: number // Defines where the separator will start.
  index: number // Used in conjunction with FlatList, it receives the index of the item in question.
  data: [{},{}] // Used in conjunction with FlatList, it receives an array of 2 items. The first item must be the previous item in the FlatList, and the second item must be the Item in question.
```

--------------------------------

### Item Component Usage (JavaScript)

Source: https://reactnativeuidevkit.com/docs/Components/Item

Shows the basic usage of the Item component in JavaScript, illustrating how to pass item data and define an onPress handler.

```javascript
import React from 'react';

// React Native UI DevKit
import {Item} from 'react-native-ui-devkit';

const App = () => {
  const _item = {
    title: 'Item',
    onPress: async () => {}
  };

  return (
    <Item data={_item}/>
  );
}

export default App;
```

--------------------------------

### List Component Usage (JavaScript)

Source: https://reactnativeuidevkit.com/docs/Components/List

Shows the basic usage of the List component in JavaScript, providing an array of items with titles and onPress functions.

```javascript
import React from 'react';

// React Native UI DevKit
import {List} from 'react-native-ui-devkit';

const App = () => {
  const _list = [
    {
      title: 'Item 1',
      onPress: async () => {}
    },
    {
      title: 'Item 2',
      onPress: async () => {}
    }
  ];

  return (
    <List data={_list} />
  );
}

export default App;
```

--------------------------------

### React Native Library Information

Source: https://reactnativeuidevkit.com/docs/Open-source-libraries

Details the React Native framework, which extends React's declarative UI approach to iOS and Android. It highlights the use of native UI controls and full native platform access, along with its MIT license.

```React Native
/**
 * React Native brings React's declarative UI framework to iOS and Android.
 * With React Native, you use native UI controls and have full access to the native platform.
 *
 * MIT License
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * React Native documentation is Creative Commons licensed, as found in the LICENSE-docs file.
 */

// Example usage (conceptual):
// import React from 'react';
// import { Text, View } from 'react-native';
//
// const App = () => {
//   return (
//     <View>
//       <Text>Hello, React Native!</Text>
//     </View>
//   );
// };
//
// export default App;
```

--------------------------------

### Item Component Props

Source: https://reactnativeuidevkit.com/docs/Components/Action

API documentation for the Item component's props, detailing their types, optionality, and specific usage notes.

```APIDOC
Item Component Props:

`data`: This property receives an interface for configuring the action.
  - Type: `IActionProps`

`header` (optional): Inserts a native header into the Item. For use on Android, set headerOnAndroid equal to true.
  - Type: `string`

`headerOnAndroid` (optional): If you want to render the header on Android, set it to true.
  - Only supported Android.
  - Type: `boolean`

`headerToTitle` (optional): If used, it will replace the item title with the header, if any.
  - Only supported Android.
  - Type: `boolean`

`footer` (optional): Inserts a native footer into the Item. For use on Android, set footerOnAndroid equal to true.
  - Type: `string`

`footerOnAndroid` (optional): If you want to render the footer on Android, set it to true.
  - Only supported Android.
  - Type: `boolean`

`tabletIpadMenuType` (optional): Defines whether the item will have the characteristics of a Tablet or iPad navigation menu style item.
  - Supports Tablet and iPad only.
  - Type: `boolean`

`index` (optional): Sets the index of an item. It can be used to join items together to form a list. Used in conjunction with count.
  - Only supported [In the item](https://reactnativeuidevkit.com/docs/Components/Action/#in-the-item).
  - Type: `count`

`count` (optional): Defines when items have a certain list. Used in conjunction with index.
  - Only supported [In the item](https://reactnativeuidevkit.com/docs/Components/Action/#in-the-item).
  - Type: `number`

`style` (optional): Set a custom style for the item.
  - Type: `ViewStyle`
```

--------------------------------

### React Library Information

Source: https://reactnativeuidevkit.com/docs/Open-source-libraries

Provides details about the React JavaScript library, used for creating user interfaces. It includes its purpose, typical usage with renderers like react-dom or react-native, and its MIT license information.

```JavaScript
/**
 * React is a JavaScript library for creating user interfaces.
 * The react package contains only the functionality necessary to define React components.
 * It is typically used together with a React renderer like react-dom for the web, or react-native for the native environments.
 *
 * MIT License
 * Copyright (c) Facebook, Inc. and its affiliates.
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

// Example usage (conceptual):
// import React from 'react';
// import ReactDOM from 'react-dom';
//
// function App() {
//   return <h1>Hello, React!</h1>;
// }
//
// ReactDOM.render(<App />, document.getElementById('root'));
```

--------------------------------

### Item Component Usage (TypeScript)

Source: https://reactnativeuidevkit.com/docs/Components/Action

Demonstrates how to use the Item component with TypeScript, including defining action properties and rendering the component.

```typescript
import React from 'react';

// React Native UI DevKit
import {Item, IActionProps} from 'react-native-ui-devkit';

const App = () => {
  const _item: IActionProps = {
    title: 'Item',
    action: {
      icon: {name: 'more-horizontal', type: 'feather', color: '#333333', size: 20},
      onPress: async () => {}
    }
  };

  return (
    <Item data={_item}/>
  );
}

export default App;
```

--------------------------------

### Action Item Configuration

Source: https://reactnativeuidevkit.com/docs/Components/List

Defines an action item, including an icon, its properties, iOS-specific rendering, and an onPress handler.

```APIDOC
action:
  icon:
    name: string // Defines the icon name.
    type: "antdesign" | "entypo" | "evilicons" | "feather" | "font-awesome" | "font-awesome5" | "font-awesome5pro" | "fontisto" | "foundation" | "ionicons" | "material-community" | "material" | "octicons" | "simplelineicons" | "zocial" | "sfsymbol" // Sets the icon type.
    size: number // Sets the icon size.
    color: string // Sets the icon color.
    component: ReactNode // Defines a custom component in place of the icon.
  iOS: boolean // If you want to render the action on iOS, set it to true. Only supported iOS.
  onPress: async() => void // Performing an action when clicking the button. @returns void
```
Tokens:
Raw