### Start the example app packager

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/CONTRIBUTING.md

Starts the Metro server for the example application.

```sh
yarn example start
```

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

### Run example app on Web

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/CONTRIBUTING.md

Launches the example application in a web browser.

```sh
yarn example web
```

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

### Install dependencies

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/configuration.md

Commands to install the library and its required peer dependencies.

```bash
# Using Expo
expo install react-native-wheel-picker-expo expo-linear-gradient expo-haptics

# Or npm
npm install react-native-wheel-picker-expo expo-linear-gradient expo-haptics
```

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

### Install react-native-wheel-picker-expo

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/README.md

Installation commands for Expo and npm environments.

```sh
expo install react-native-wheel-picker-expo
```

```sh
npm install react-native-wheel-picker-expo
```

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

### Run example app on Android

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/CONTRIBUTING.md

Launches the example application on an Android device or emulator.

```sh
yarn example android
```

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

### Run example app on iOS

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/CONTRIBUTING.md

Launches the example application on an iOS device or simulator.

```sh
yarn example ios
```

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

### Install dependencies

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/CONTRIBUTING.md

Run this command in the root directory to install all required project dependencies.

```sh
yarn
```

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

### Install Dependencies

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/README.md

Commands to install the library and its required dependencies using Expo or npm.

```bash
expo install react-native-wheel-picker-expo expo-linear-gradient expo-haptics
```

```bash
npm install react-native-wheel-picker-expo expo-linear-gradient expo-haptics
```

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

### Implement WheelPickerExpo Component

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/README.md

Basic usage example showing how to import and render the WheelPickerExpo component with a list of items.

```js
import React from 'react';
import WheelPickerExpo from 'react-native-wheel-picker-expo';

const CITIES = 'Jakarta,Bandung,Sumbawa,Taliwang,Lombok,Bima'.split(',');

function App() {
    return (
        <WheelPickerExpo
          height={300}
          width={150}
          initialSelectedIndex={3}
          items={CITIES.map(name => ({ label: name, value: '' }))}
          onChange={({ item }) => setCity(item.label)} />
    );
}
```

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

### Full Component Configuration Example

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/configuration.md

A complete implementation showing how to configure layout, data, styling, callbacks, and behavior for the WheelPickerExpo component.

```typescript
import React, { useState } from 'react';
import { View, Text } from 'react-native';
import WheelPickerExpo from 'react-native-wheel-picker-expo';

const items = [
  { label: 'Option 1', value: 1 },
  { label: 'Option 2', value: 2 },
  { label: 'Option 3', value: 3 },
];

export default function ConfiguredPicker() {
  const [selected, setSelected] = useState(null);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <WheelPickerExpo
        // Layout
        height={300}
        width="80%"
        
        // Data
        items={items}
        initialSelectedIndex={1}
        
        // Colors
        backgroundColor="#202124"
        selectedStyle={{
          borderColor: '#2196F3',
          borderWidth: 2,
        }}
        
        // Callbacks
        onChange={({ index, item }) => {
          setSelected(item);
        }}
        
        // Customization
        renderItem={(props) => (
          <Text
            style={{
              fontSize: props.fontSize,
              color: props.fontColor,
            }}
          >
            {props.label}
          </Text>
        )}
        
        // Behavior
        haptics={true}
        flatListProps={{
          scrollEventThrottle: 16,
        }}
      />
      
      <Text style={{ marginTop: 20 }}>
        Selected: {selected?.label}
      </Text>
    </View>
  );
}
```

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

### Basic Wheel Picker Implementation

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/api-reference/wheel-picker-expo.md

Standard setup for a wheel picker using a list of city objects and state management.

```typescript
import React, { useState } from 'react';
import { View } from 'react-native';
import WheelPickerExpo from 'react-native-wheel-picker-expo';

export default function App() {
  const [selectedCity, setSelectedCity] = useState('');
  
  const CITIES = [
    { label: 'Jakarta', value: 'JKT' },
    { label: 'Bandung', value: 'BDG' },
    { label: 'Sumbawa', value: 'SBW' },
  ];

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <WheelPickerExpo
        height={300}
        width={150}
        items={CITIES}
        onChange={({ item }) => setSelectedCity(item.label)}
      />
    </View>
  );
}
```

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

### Handle Touch Start

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/rendering-system.md

Sets the userTouch flag for haptic feedback and delegates to custom props if defined.

```typescript
onTouchStart={(e) => {
  this.userTouch = true;
  !!flatListProps?.onTouchStart && flatListProps.onTouchStart(e);
}}
```

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

### Apply transparency to colors

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/api-reference/utility-functions.md

Examples of applying partial opacity to hex color strings.

```typescript
const color = setAlphaColor('#FFFFFF', 0.5);
// Returns: '#FFFFFF80' (white at 50% opacity)

const darkColor = setAlphaColor('#202124', 0.2);
// Returns: '#20212433' (dark gray at 20% opacity)
```

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

### Project Directory Structure

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/module-structure.md

Visual representation of the project file hierarchy, including source code, build outputs, and example applications.

```text
react-native-wheel-picker-expo/
├── src/
│   ├── index.tsx              (Main component, 256 lines)
│   ├── types.ts               (Type definitions, 33 lines)
│   ├── util.ts                (Utility functions, 30 lines)
│   └── __tests__/
│       └── index.test.tsx     (Jest test file)
├── lib/                       (Build output)
│   ├── commonjs/
│   │   ├── index.js
│   │   ├── types.js
│   │   └── util.js
│   ├── module/
│   │   ├── index.js
│   │   ├── types.js
│   │   └── util.js
│   └── typescript/
│       ├── index.d.ts
│       ├── types.d.ts
│       ├── util.d.ts
│       └── index.tsx
├── example/                   (Demo application)
│   ├── src/
│   │   └── App.tsx
│   ├── package.json
│   └── tsconfig.json
├── package.json               (Package configuration)
├── tsconfig.json              (TypeScript configuration)
└── tsconfig.build.json        (Build-specific TypeScript config)
```

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

### Apply full opacity to color

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/api-reference/utility-functions.md

Example of using setAlphaColor with full opacity, which returns the original hex string.

```typescript
import { setAlphaColor } from 'react-native-wheel-picker-expo';

const color = setAlphaColor('#F00F00', 1);
// Returns: '#F00F00' (unchanged, full opacity)
```

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

### Calculate adaptive text color for light backgrounds

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/api-reference/utility-functions.md

Examples of using adaptiveColor with light-colored backgrounds, which should return black text.

```typescript
import { adaptiveColor } from 'react-native-wheel-picker-expo';

const textColor1 = adaptiveColor('#FFFFFF');
// Returns: '#000000' (black text on white)

const textColor2 = adaptiveColor('#F0F0F0');
// Returns: '#000000' (black text on light gray)

const textColor3 = adaptiveColor('#FFFF00');
// Returns: '#000000' (black text on yellow)
```

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

### Integrate adaptiveColor in PickerItem

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/api-reference/utility-functions.md

Example of using adaptiveColor within a component to dynamically set font color based on background style.

```typescript
// In PickerItem function (line 220)
const fontColor = adaptiveColor(style.backgroundColor);

return (
  <View style={style}>
    {renderItem ? (
      renderItem({ fontSize, fontColor, label: item.label, textAlign })
    ) : (
      <Item
        fontSize={fontSize}
        fontColor={fontColor}
        textAlign={textAlign}
        label={item.label}
      />
    )}
  </View>
);
```

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

### Calculate adaptive text color for dark backgrounds

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/api-reference/utility-functions.md

Examples of using adaptiveColor with dark-colored backgrounds, which should return white text.

```typescript
const textColor4 = adaptiveColor('#000000');
// Returns: '#FFFFFF' (white text on black)

const textColor5 = adaptiveColor('#1F1F1F');
// Returns: '#FFFFFF' (white text on dark gray)

const textColor6 = adaptiveColor('#202124');
// Returns: '#FFFFFF' (white text on dark gray)
```

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

### Internal usage in WheelPickerExpo

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/api-reference/utility-functions.md

Examples of how the function is utilized internally within the component class.

```typescript
// Internal usage in WheelPickerExpo
backgroundColor = setAlphaColor(this.props.backgroundColor as any, 1);

get gradientColor(): string {
  return Platform.select({
    ios: setAlphaColor(this.backgroundColor, 0.2),
    android: setAlphaColor(this.backgroundColor, 0.4),
    web: setAlphaColor(this.backgroundColor, 0.4),
  }) as string;
}
```

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

### Padded Data Array Initialization

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/rendering-system.md

Adds empty padding items to the start and end of the data array to ensure smooth scrolling and correct center alignment.

```typescript
setData() {
  const { itemHeight, listHeight } = this.state;
  const { items, height } = this.props;

  if (items?.length) {
    const additionalItem = { label: '', value: null };
    const data = [
      additionalItem,
      additionalItem,
      ...items,
      additionalItem,
      additionalItem,
    ] as ItemType[];
    
    // Update state...
  }
}
```

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

### File Structure Overview

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/README.md

Displays the directory structure of the project documentation.

```text
output/
├── README.md                          (this file)
├── api-reference/
│   ├── wheel-picker-expo.md          (main component)
│   └── utility-functions.md           (helper functions)
├── types.md                           (type definitions)
├── configuration.md                   (props and config)
├── module-structure.md                (file organization)
├── lifecycle-and-state.md             (component internals)
├── rendering-system.md                (visual rendering)
└── usage-patterns.md                  (implementation examples)
```

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

### Project File Structure

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/INDEX.md

Displays the directory layout and documentation file organization.

```text
output/
├── README.md                          (Start here - 350 lines)
├── INDEX.md                           (This file)
├── MANIFEST.md                        (Documentation summary)
│
├── api-reference/
│   ├── wheel-picker-expo.md          (Component API - 450 lines)
│   └── utility-functions.md           (Helpers - 380 lines)
│
├── types.md                           (Type definitions - 420 lines)
├── configuration.md                   (All props - 520 lines)
├── module-structure.md                (Files & imports - 380 lines)
├── lifecycle-and-state.md             (Lifecycle & state - 420 lines)
├── rendering-system.md                (How it renders - 480 lines)
└── usage-patterns.md                  (50+ examples - 450 lines)

Total: 10 files, ~3,600 lines
```

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

### Publish new versions

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/CONTRIBUTING.md

Uses release-it to handle version bumping, tagging, and publishing to npm.

```sh
yarn release
```

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

### Implement Responsive Sizing

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/usage-patterns.md

Calculate picker width dynamically based on window dimensions using the useWindowDimensions hook.

```typescript
import { useWindowDimensions } from 'react-native';

export default function ResponsivePicker() {
  const { width } = useWindowDimensions();
  const pickerWidth = width * 0.8;

  return (
    <WheelPickerExpo
      height={300}
      width={pickerWidth}
      items={items}
      onChange={({ item }) => console.log(item)}
    />
  );
}
```

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

### Configure react-native-builder-bob

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/module-structure.md

Build configuration defining source, output, and target formats for the package.

```json
{
  "react-native-builder-bob": {
    "source": "src",
    "output": "lib",
    "targets": [
      "commonjs",
      "module",
      ["typescript", { "project": "tsconfig.build.json" }]
    ]
  }
}
```

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

### Package source mapping configuration

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/module-structure.md

The package.json configuration defining entry points for different module systems and environments.

```json
{
  "main": "lib/commonjs/index",
  "module": "lib/module/index",
  "types": "lib/typescript/index.d.ts",
  "react-native": "src/index",
  "source": "src/index"
}
```

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

### Importing Components and Types

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/README.md

Standard import patterns for the main component, type definitions, and internal utility functions.

```typescript
// Main component
import WheelPickerExpo from 'react-native-wheel-picker-expo';

// Types (direct import from compiled output)
import type { ItemType } from 'react-native-wheel-picker-expo/lib/typescript/types';

// Utilities (rare; primarily internal)
import { setAlphaColor } from 'react-native-wheel-picker-expo/lib/commonjs/util';
```

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

### Custom Picker Theme Integration

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/api-reference/utility-functions.md

Demonstrates applying adaptiveColor and setAlphaColor within a custom component theme.

```typescript
import { setAlphaColor, adaptiveColor } from 'react-native-wheel-picker-expo';
import WheelPickerExpo from 'react-native-wheel-picker-expo';

const THEME = {
  primary: '#2196F3',
  dark: '#1A237E',
  light: '#E3F2FD',
};

export function ThemedPicker() {
  const itemColor = adaptiveColor(THEME.primary);
  const gradientColor = setAlphaColor(THEME.primary, 0.3);

  return (
    <WheelPickerExpo
      backgroundColor={THEME.primary}
      items={[
        { label: 'Item 1', value: 1 },
        { label: 'Item 2', value: 2 },
      ]}
      onChange={({ item }) => console.log(item)}
      renderItem={(props) => (
        <Text style={{ color: itemColor, fontSize: props.fontSize }}>
          {props.label}
        </Text>
      )}
    />
  );
}
```

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

### Run unit tests

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/CONTRIBUTING.md

Executes the project's unit test suite using Jest.

```sh
yarn test
```

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

### Minimal Wheel Picker Configuration

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/usage-patterns.md

The simplest implementation requiring only the items array and an onChange handler.

```typescript
import React, { useState } from 'react';
import { View } from 'react-native';
import WheelPickerExpo from 'react-native-wheel-picker-expo';

export default function App() {
  const [selected, setSelected] = useState(null);

  const items = [
    { label: 'Option A', value: 'a' },
    { label: 'Option B', value: 'b' },
    { label: 'Option C', value: 'c' },
  ];

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <WheelPickerExpo
        items={items}
        onChange={({ item }) => setSelected(item.label)}
      />
    </View>
  );
}
```

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

### Importing Components and Types

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/module-structure.md

Use default imports for the main component and specific paths for utility functions or types. Avoid named imports from the root package as they are not supported.

```typescript
// ✓ Good - simple component usage
import WheelPickerExpo from 'react-native-wheel-picker-expo';

// ✓ Good - with type annotations
import WheelPickerExpo from 'react-native-wheel-picker-expo';
import type { ItemType } from 'react-native-wheel-picker-expo/lib/typescript/types';

// ✓ Good - utility for advanced use (rare)
import { adaptiveColor } from 'react-native-wheel-picker-expo/lib/commonjs/util';

// ✗ Avoid - named imports from root don't exist
import { WheelPickerExpo } from 'react-native-wheel-picker-expo';

// ✗ Avoid - types from root not exported
import type { ItemType } from 'react-native-wheel-picker-expo';
```

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

### Configure TypeScript for build

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/module-structure.md

Build-specific TypeScript configuration extending the base development settings.

```json
{
  "extends": "./tsconfig",
  "compilerOptions": {
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true
  },
  "include": ["src"],
  "exclude": ["**/__tests__", "example"]
}
```

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

### Basic WheelPickerExpo Usage

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/README.md

Demonstrates the basic implementation of the WheelPickerExpo component with required props.

```typescript
import WheelPickerExpo from 'react-native-wheel-picker-expo';

<WheelPickerExpo
  height={300}
  width={150}
  items={[
    { label: 'Option A', value: 'a' },
    { label: 'Option B', value: 'b' },
  ]}
  onChange={({ index, item }) => console.log(item)}
/>
```

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

### Custom Styling and Haptics

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/api-reference/wheel-picker-expo.md

Configures visual appearance, initial selection, and haptic feedback for the picker.

```typescript
<WheelPickerExpo
  height={300}
  width={150}
  items={CITIES}
  initialSelectedIndex={1}
  backgroundColor="#202124"
  selectedStyle={{ 
    borderColor: '#F00F00', 
    borderWidth: 2 
  }}
  onChange={({ index, item }) => {
    console.log(`Selected: ${item.label} at index ${index}`);
  }}
  haptics={true}
/>
```

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

### Data Flow Visualization

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/INDEX.md

Represents the lifecycle of data from input array to selection callback.

```text
Items array → Padded with empty items → Rendered with adaptive styles 
→ User scrolls/taps → onChange callback fires with selection
```

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

### Importing Utilities

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/module-structure.md

Utility functions are not available via root exports and must be imported from the lib/commonjs/util path.

```typescript
// ✗ Utilities not exported from root
import { setAlphaColor } from 'react-native-wheel-picker-expo';
// Error: not exported

// ✓ Direct import from source
import { setAlphaColor } from 'react-native-wheel-picker-expo/lib/commonjs/util';
```

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

### Implement render Method

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/lifecycle-and-state.md

Returns the component's visual tree or undefined if no data is present.

```typescript
render(): JSX.Element | undefined {
  const { data, itemHeight, listHeight, selectedIndex } = this.state;
  const { width, initialSelectedIndex, flatListProps, selectedStyle } = this.props;

  if (!data.length) return;  // Exit early if no data

  return (
    <View style={{ height: listHeight, width, backgroundColor }}>
      <FlatList ... />
      <View style={...}>
        <LinearGradient ... />
      </View>
      <View style={...}>
        <LinearGradient ... />
      </View>
    </View>
  );
}
```

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

### ES Module Usage

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/module-structure.md

Use standard import syntax when working with ES modules.

```typescript
import WheelPickerExpo from 'react-native-wheel-picker-expo';
import { setAlphaColor } from 'react-native-wheel-picker-expo/lib/module/util';
```

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

### Programmatic Scrolling with Ref

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/api-reference/wheel-picker-expo.md

Demonstrates attaching a ref to the component to track selection changes.

```typescript
import React, { useRef } from 'react';
import { Button } from 'react-native';
import WheelPickerExpo from 'react-native-wheel-picker-expo';

export default function App() {
  const wheelRef = useRef<WheelPickerExpo>(null);

  return (
    <>
      <Button
        title="Jump to Index 3"
        onPress={() => {
          // Note: Direct scrolling via ref is not exposed, 
          // but onChange tracks current selection
        }}
      />
      <WheelPickerExpo
        ref={wheelRef}
        items={CITIES}
        onChange={({ index, item }) => {
          console.log(`Now at index: ${index}`);
        }}
      />
    </>
  );
}
```

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

### Verify TypeScript and Linting

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/CONTRIBUTING.md

Runs type checking and linting to ensure code quality.

```sh
yarn typescript
yarn lint
```

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

### adaptiveColor(backgroundColor: string): string

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/api-reference/utility-functions.md

Calculates whether text should be black or white based on background brightness using the WCAG relative luminance formula to ensure readability.

```APIDOC
## adaptiveColor(backgroundColor: string): string

### Description
Calculates whether text should be black or white based on background brightness using the WCAG relative luminance formula. This ensures text remains readable on any background color.

### Parameters
- **backgroundColor** (string) - Required - Hex color string in format #RRGGBB. If parsing fails, returns black as default.

### Return Type
string - Returns '#000000' (black) or '#FFFFFF' (white).

### Usage Example
```typescript
import { adaptiveColor } from 'react-native-wheel-picker-expo';

const textColor = adaptiveColor('#FFFFFF');
// Returns: '#000000'
```
```

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

### Importing the Main Component

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/module-structure.md

Use the default export for the main component. Named exports are not supported from the root package.

```typescript
// ✓ Default export - main component
import WheelPickerExpo from 'react-native-wheel-picker-expo';

// ✗ Named exports not available from root
import { WheelPickerExpo } from 'react-native-wheel-picker-expo';
// Error: named export does not exist
```

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

### Configure backgroundColor

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/configuration.md

Define the background color using a 7-character hex string. Invalid formats will trigger a warning and default to white.

```typescript
// Valid formats
<WheelPickerExpo
  backgroundColor="#FFFFFF"  // White
  items={ITEMS}
  onChange={handleChange}
/>

<WheelPickerExpo
  backgroundColor="#202124"  // Dark gray
  items={ITEMS}
  onChange={handleChange}
/>

<WheelPickerExpo
  backgroundColor="#F00F00"  // Custom color
  items={ITEMS}
  onChange={handleChange}
/>

// Invalid format (will warn and default to white)
<WheelPickerExpo
  backgroundColor="#FFF"      // ✗ Too short
  items={ITEMS}
  onChange={handleChange}
/>

<WheelPickerExpo
  backgroundColor="white"     // ✗ Not hex
  items={ITEMS}
  onChange={handleChange}
/>
```

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

### Utility Function Import Paths

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/api-reference/utility-functions.md

Shows the correct direct import paths for utility functions, as they are not re-exported from the main package entry point.

```typescript
// ✗ This does not work
import { setAlphaColor } from 'react-native-wheel-picker-expo';

// ✓ To use utilities, import from the util module
import { setAlphaColor } from 'react-native-wheel-picker-expo/lib/commonjs/util';
// or for TypeScript
import { setAlphaColor } from 'react-native-wheel-picker-expo/lib/typescript/util';
```

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

### Import the WheelPickerExpo component

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/module-structure.md

Use this import statement to access the main component from the package root.

```typescript
// Import from package root
import WheelPickerExpo from 'react-native-wheel-picker-expo';
```

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

### Handle edge cases for adaptiveColor

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/api-reference/utility-functions.md

Demonstrates behavior with mid-gray backgrounds and invalid input strings.

```typescript
const textColor7 = adaptiveColor('#808080');
// Returns: '#FFFFFF' (white on mid-gray, brightness ~128)

const textColor8 = adaptiveColor('invalid');
// Returns: '#000000' (default black on error)
```

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

### Apply Dynamic Item Styles

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/rendering-system.md

Combines base styles with dynamic properties for background color, font size, and height.

```typescript
{
  ...styles.listItem,
  backgroundColor: this.backgroundColor,
  fontSize: itemHeight / 2,
  height: itemHeight,
}
```

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

### Apply Custom Themes to WheelPickerExpo

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/usage-patterns.md

Use backgroundColor and selectedStyle props to customize the picker's appearance. Ensure the items array is defined before usage.

```typescript
export default function DarkThemePicker() {
  return (
    <WheelPickerExpo
      height={300}
      width={150}
      items={items}
      backgroundColor="#1A1A1A"
      selectedStyle={{
        borderColor: '#2196F3',
        borderWidth: 2,
      }}
      onChange={({ item }) => console.log(item)}
    />
  );
}
```

```typescript
export default function ColorfulPicker() {
  return (
    <WheelPickerExpo
      height={300}
      width={150}
      items={items}
      backgroundColor="#FF5722"
      selectedStyle={{
        borderColor: '#FFF9C4',
        borderWidth: 3,
      }}
      onChange={({ item }) => console.log(item)}
    />
  );
}
```

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

### Implement WheelPickerExpo render method

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/rendering-system.md

The primary render method for the component, handling data validation and container initialization.

```typescript
render() {
  const { data, itemHeight, listHeight, selectedIndex } = this.state;
  const { width, initialSelectedIndex, flatListProps, selectedStyle } = this.props;

  if (!data.length) return;  // Early exit if no data

  return (
    <View style={{ height: listHeight, width, backgroundColor }}>
      {/* FlatList for scrollable items */}
      {/* Top gradient overlay */}
      {/* Bottom gradient overlay */}
    </View>
  );
}
```

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

### Configure haptic feedback

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/configuration.md

Toggle haptic feedback using the haptics prop. Requires expo-haptics as a peer dependency.

```typescript
// Haptics disabled (default)
<WheelPickerExpo
  haptics={false}
  items={ITEMS}
  onChange={handleChange}
/>
```

```typescript
// Haptics enabled
<WheelPickerExpo
  haptics={true}
  items={ITEMS}
  onChange={handleChange}
/>
```

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

### Utility Functions

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/README.md

Helper functions for color manipulation.

```APIDOC
## Utility Functions

### setAlphaColor(color: string, opacity: number = 1): string
Adds an alpha channel to a hex color string.

### adaptiveColor(backgroundColor: string): string
Returns black or white text color based on background brightness according to WCAG standards.
```

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

### Export the WheelPickerExpo component

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/module-structure.md

The main entry point exports only the component, keeping types and utilities separate.

```typescript
// src/index.tsx export statement
export default WheelPickerExpo;

// Types remain in src/types.ts
// Utilities remain in src/util.ts
```

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

### TypeScript Declaration Usage

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/module-structure.md

Import type definitions from the typescript directory for full type support.

```typescript
import WheelPickerExpo from 'react-native-wheel-picker-expo';
import type { ItemType, IViuPickerProps } from 'react-native-wheel-picker-expo/lib/typescript/types';
```

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

### Initialize flatListRef

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/lifecycle-and-state.md

Creates a reference to the internal FlatList component for imperative scrolling.

```typescript
flatListRef = React.createRef<FlatList>();
```

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

### Component State Initialization

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/types.md

Default values used for initializing the picker state.

```typescript
state = {
  selectedIndex: 0,
  itemHeight: 40,
  listHeight: 200,
  data: [],
};
```

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

### Default Component Props

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/api-reference/wheel-picker-expo.md

The initial configuration values used by the component when no props are provided.

```typescript
{
  items: [],
  backgroundColor: '#FFFFFF',
  width: 150,
  haptics: false
}
```

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

### Implement componentDidMount Lifecycle

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/lifecycle-and-state.md

Executes once after the component mounts to initialize the data array and calculate dimensions.

```typescript
componentDidMount() {
  this.setData();
}
```

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

### Configure WheelPickerExpo Dimensions

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/configuration.md

Set component dimensions using fixed pixel values, percentage strings, or flexbox containers.

```typescript
// Fixed dimensions
<WheelPickerExpo
  height={300}
  width={150}
  items={ITEMS}
  onChange={handleChange}
/>

// Responsive dimensions
<WheelPickerExpo
  height={300}
  width="80%"
  items={ITEMS}
  onChange={handleChange}
/>

// Using flexbox
<View style={{ flex: 1 }}>
  <WheelPickerExpo
    height={300}
    width="100%"
    items={ITEMS}
    onChange={handleChange}
  />
</View>
```

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

### Enable Haptic Feedback in WheelPickerExpo

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/usage-patterns.md

Set the haptics prop to true to trigger device vibration on item selection.

```typescript
<WheelPickerExpo
  height={300}
  width={150}
  items={items}
  haptics={true}
  onChange={({ item }) => console.log(item)}
/>
```

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

### Fix linting errors

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/CONTRIBUTING.md

Automatically fixes formatting and linting issues.

```sh
yarn lint --fix
```

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

### CommonJS Usage

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/module-structure.md

Use require statements when working in a CommonJS environment.

```javascript
const WheelPickerExpo = require('react-native-wheel-picker-expo');
const { setAlphaColor } = require('react-native-wheel-picker-expo/lib/commonjs/util');
```

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

### Apply Custom Styling

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/README.md

Customize the appearance of the picker using backgroundColor and selectedStyle props.

```typescript
<WheelPickerExpo
  backgroundColor="#202124"
  selectedStyle={{ borderColor: '#2196F3', borderWidth: 2 }}
  items={items}
  onChange={handleChange}
/>
```

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

### Load Items from API

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/usage-patterns.md

Fetch data asynchronously and update the items state once the request completes, showing a loading indicator in the interim.

```typescript
import React, { useState, useEffect } from 'react';
import { ActivityIndicator, View } from 'react-native';
import WheelPickerExpo from 'react-native-wheel-picker-expo';

export default function App() {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchItems = async () => {
      try {
        const response = await fetch('/api/options');
        const data = await response.json();
        const formattedItems = data.map(item => ({
          label: item.name,
          value: item.id,
        }));
        setItems(formattedItems);
      } catch (error) {
        console.error('Failed to load items:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchItems();
  }, []);

  if (loading) {
    return <ActivityIndicator size="large" />;
  }

  return (
    <WheelPickerExpo
      height={300}
      width={150}
      items={items}
      onChange={({ item }) => console.log(item)}
    />
  );
}
```

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

### Optimize Re-renders with Memoization

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/usage-patterns.md

Use useMemo for item arrays and useCallback for change handlers to prevent unnecessary component re-renders.

```typescript
import React, { useState, useCallback, useMemo } from 'react';
import WheelPickerExpo from 'react-native-wheel-picker-expo';

export default function OptimizedPicker() {
  const [selected, setSelected] = useState(null);

  const items = useMemo(
    () => [
      { label: 'Option A', value: 'a' },
      { label: 'Option B', value: 'b' },
      { label: 'Option C', value: 'c' },
    ],
    []
  );

  const handleChange = useCallback(({ item }) => {
    setSelected(item);
  }, []);

  return (
    <WheelPickerExpo
      height={300}
      width={150}
      items={items}
      onChange={handleChange}
    />
  );
}
```

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

### Library Build Output Structure

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/module-structure.md

The library provides source maps in both commonjs and module formats to enable direct debugging of TypeScript source files.

```text
lib/
├── commonjs/
│   ├── index.js
│   └── index.js.map          (Links to TypeScript source)
├── module/
│   ├── index.js
│   └── index.js.map
└── typescript/
    ├── index.d.ts
    └── index.tsx              (Original source included)
```

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

### Implement Synchronized Picker Selections

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/usage-patterns.md

Updates external application state based on the current selection within the wheel picker.

```typescript
import React, { useState } from 'react';
import { View, Text } from 'react-native';
import WheelPickerExpo from 'react-native-wheel-picker-expo';

const PAIRS = [
  { id: 1, name: 'Pair A', label: 'A' },
  { id: 2, name: 'Pair B', label: 'B' },
  { id: 3, name: 'Pair C', label: 'C' },
];

export default function App() {
  const [selectedPair, setSelectedPair] = useState(PAIRS[0]);

  const pairItems = PAIRS.map(p => ({
    label: p.label,
    value: p.id,
  }));

  return (
    <>
      <WheelPickerExpo
        height={300}
        width={150}
        items={pairItems}
        initialSelectedIndex={0}
        onChange={({ item }) => {
          const pair = PAIRS.find(p => p.id === item.value);
          setSelectedPair(pair);
        }}
      />
      <Text>Selected Pair: {selectedPair.name}</Text>
    </>
  );
}
```

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

### Apply platform-specific gradient opacity

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/api-reference/utility-functions.md

Usage of setAlphaColor to adjust gradient colors based on the target platform.

```typescript
import { Platform } from 'react-native';
import { setAlphaColor } from 'react-native-wheel-picker-expo';

const baseColor = '#FFFFFF';
const gradientColor = Platform.select({
  ios: setAlphaColor(baseColor, 0.2),    // '#FFFFFF33'
  android: setAlphaColor(baseColor, 0.4), // '#FFFFFF66'
  web: setAlphaColor(baseColor, 0.4),     // '#FFFFFF66'
});
```

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

### Public API Exports

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/module-structure.md

List of stable, documented components and types intended for public use.

```typescript
// ✓ Public - documented and stable
WheelPickerExpo                // Main component class
ItemType                       // Data type
RenderItemProps               // Render function props type
IViuPickerProps              // Component props interface
IViuPickerState              // Component state interface (internal use)
```

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

### Implement onChange Callback

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/configuration.md

The onChange callback is mandatory and returns the selected item and its index. It triggers upon completion of scroll snapping or haptic feedback.

```typescript
<WheelPickerExpo
  onChange={({ index, item }) => {
    console.log(`Selected item at index ${index}:`, item);
    // Update state, trigger navigation, etc.
  }}
  items={ITEMS}
/>
```

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

### Define Peer Dependencies

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/README.md

Required peer dependencies for the library to function correctly in an Expo project.

```json
{
  "peerDependencies": {
    "react": "*",
    "react-native": "*",
    "expo-linear-gradient": ">=11",
    "expo-haptics": ">=11"
  }
}
```

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

### Clamp opacity values

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/api-reference/utility-functions.md

Shows how opacity values outside the [0, 1] range are clamped.

```typescript
const overflowOpacity = setAlphaColor('#FF0000', 1.5);
// Clamps to 1.0
// Returns: '#FF0000' (unchanged)

const negativeOpacity = setAlphaColor('#FF0000', -0.5);
// Clamps to 0.0
// Returns: '#FF000000' (fully transparent)
```

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

### Render PickerItem Component

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/rendering-system.md

The PickerItem function handles the rendering of individual items, including touch interaction and conditional rendering logic for custom items.

```typescript
const PickerItem = (
  { item, index }: any,
  indexSelected: number,
  style: any,
  onPress: (index: number) => void,
  renderItem: (props: RenderItemProps) => JSX.Element
) => {
  const gap = Math.abs(index - (indexSelected + 2));
  const sizeText = [style.fontSize, style.fontSize / 1.5, style.fontSize / 2];
  const fontSize = gap > 1 ? sizeText[2] : sizeText[gap];
  const fontColor = adaptiveColor(style.backgroundColor);
  const textAlign = 'center';

  return (
    <TouchableOpacity activeOpacity={1} onPress={() => onPress(index - 2)}>
      <View style={style}>
        {typeof renderItem === 'function' && renderItem(...)}
        {!renderItem && <Item fontSize={fontSize} fontColor={fontColor} ... />}
      </View>
    </TouchableOpacity>
  );
};
```

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

### Implement Bottom Gradient Overlay

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/rendering-system.md

Fades items at the bottom of the picker using a LinearGradient component with reversed color order.

```typescript
<View
  style={[
    this.gradientContainerStyle,
    styles.bottomGradient,
    { borderTopWidth: selectedStyle?.borderWidth },
  ]}
  pointerEvents="none"
>
  <LinearGradient
    style={styles.linearGradient}
    colors={[this.gradientColor, this.backgroundColor]}
  />
</View>
```

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

### Implement Top Gradient Overlay

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/rendering-system.md

Fades items at the top of the picker using a LinearGradient component.

```typescript
<View
  style={[
    this.gradientContainerStyle,
    styles.topGradient,
    { borderBottomWidth: selectedStyle?.borderWidth },
  ]}
  pointerEvents="none"
>
  <LinearGradient
    style={styles.linearGradient}
    colors={[this.backgroundColor, this.gradientColor]}
  />
</View>
```

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

### onChange Handler

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/configuration.md

The onChange callback is a required function that triggers when the selected item changes, providing the new index and item data.

```APIDOC
## onChange Handler

### Description
The `onChange` callback is required and provides both the selected item and its index. It is triggered during scroll when snap-to-interval completes, after haptic feedback (if enabled), and only when the selection actually changes.

### Signature
`onChange: ({ index: number, item: any }) => void`

### Example
```typescript
<WheelPickerExpo
  onChange={({ index, item }) => {
    console.log(`Selected item at index ${index}:`, item);
  }}
  items={ITEMS}
/>
```
```

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

### WheelPickerExpo Component Props

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/configuration.md

Configuration options for the WheelPickerExpo component.

```APIDOC
## WheelPickerExpo Props

### items (ItemType[]) - Required
Array of items to display. Each item requires `label` (string) and `value` (any).

### onChange ((item: { index: number; item: ItemType }) => void) - Required
Selection callback triggered on item selection via scroll or tap.

### initialSelectedIndex (number) - Optional
Initial selected item index on component mount. Default: 0.

### height (number) - Optional
Picker container height in pixels. Default: 200.

### width (string | number) - Optional
Picker container width. Accepts pixel numbers or percentage strings. Default: 150.

### backgroundColor (string) - Optional
Background color as 7-character hex string. Default: '#FFFFFF'.

### selectedStyle ({ borderColor?: string; borderWidth?: number }) - Optional
Border styling for selected item.

### flatListProps (Partial<FlatListProps<ItemType>>) - Optional
Additional FlatList props for advanced customization.

### renderItem ((props: RenderItemProps) => JSX.Element) - Optional
Custom render function to override default text display.

### haptics (boolean) - Optional
Enable haptic feedback on selection change. Default: false.
```

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

### Internal API Components

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/module-structure.md

List of internal components and styles that are not documented and may change in future versions.

```typescript
// ✗ Internal - not documented, may change
Item                          // Internal memoized component
PickerItem                    // Internal render function
styles                        // Internal StyleSheet object
```

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

### Handle Dynamic Items

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/README.md

Update the picker items dynamically using state and effects.

```typescript
const [items, setItems] = useState([]);

useEffect(() => {
  // Load from API or update
  setItems(newItems);
}, [dependency]);

<WheelPickerExpo items={items} onChange={handleChange} />
```

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

### Integrate WheelPickerExpo in a Form Component

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/usage-patterns.md

Demonstrates managing picker state within a form using React hooks and handling submission validation.

```typescript
import React, { useState } from 'react';
import { View, Button, Text } from 'react-native';
import WheelPickerExpo from 'react-native-wheel-picker-expo';

export default function Form() {
  const [formData, setFormData] = useState({
    country: '',
    city: '',
  });

  const countries = [
    { label: 'Indonesia', value: 'ID' },
    { label: 'Malaysia', value: 'MY' },
  ];

  const cities = [
    { label: 'Jakarta', value: 'JKT' },
    { label: 'Kuala Lumpur', value: 'KL' },
  ];

  const handleSubmit = () => {
    if (!formData.country || !formData.city) {
      console.error('Please select both country and city');
      return;
    }
    console.log('Form submitted:', formData);
  };

  return (
    <View>
      <Text>Select Country:</Text>
      <WheelPickerExpo
        height={300}
        width={150}
        items={countries}
        onChange={({ item }) => {
          setFormData(prev => ({ ...prev, country: item.value }));
        }}
      />

      <Text>Select City:</Text>
      <WheelPickerExpo
        height={300}
        width={150}
        items={cities}
        onChange={({ item }) => {
          setFormData(prev => ({ ...prev, city: item.value }));
        }}
      />

      <Button title="Submit" onPress={handleSubmit} />
    </View>
  );
}
```

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

### Configure Conditional Haptics

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/usage-patterns.md

Pass a boolean state variable to the haptics prop to toggle feedback dynamically.

```typescript
const [enableHaptics, setEnableHaptics] = useState(true);

<WheelPickerExpo
  height={300}
  width={150}
  items={items}
  haptics={enableHaptics}
  onChange={({ item }) => console.log(item)}
/>
```

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

### Configure FlatList scroll event handling

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/rendering-system.md

Calculates the current index based on scroll offset and triggers the selection handler.

```typescript
onScroll={(event) => {
  let index = Math.round(
    event.nativeEvent.contentOffset.y / itemHeight
  );
  this.handleOnSelect(index);
}}
```

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

### Configure Custom Item Rendering

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/configuration.md

Use the renderItem prop to override default text rendering. Props provided include fontSize, label, fontColor, and textAlign.

```typescript
// Default behavior (Text component)
<WheelPickerExpo
  items={ITEMS}
  onChange={handleChange}
/>
```

```typescript
// Custom rendering
<WheelPickerExpo
  renderItem={(props) => (
    <View style={{ alignItems: 'center' }}>
      <Text style={{ fontSize: props.fontSize, color: props.fontColor }}>
        {props.label}
      </Text>
      <Text style={{ fontSize: props.fontSize / 2, color: props.fontColor }}>
        Subtitle
      </Text>
    </View>
  )}
  items={ITEMS}
  onChange={handleChange}
/>
```

```typescript
// Conditional rendering based on distance from center
<WheelPickerExpo
  renderItem={(props) => {
    const isCentered = props.fontSize > 12; // Approximation
    return (
      <Text
        style={{
          fontSize: props.fontSize,
          color: props.fontColor,
          fontWeight: isCentered ? 'bold' : 'normal',
        }}
      >
        {props.label}
      </Text>
    );
  }}
  items={ITEMS}
  onChange={handleChange}
/>
```

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

### Custom Item Rendering

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/usage-patterns.md

Use the renderItem prop to define custom UI components for each picker item. Access item properties like fontSize, fontColor, and label from the renderItem arguments.

```typescript
import { Text } from 'react-native';

<WheelPickerExpo
  height={300}
  width={150}
  items={items}
  renderItem={(props) => (
    <Text
      style={{
        fontSize: props.fontSize,
        color: props.fontColor,
        fontWeight: 'bold',
        letterSpacing: 1,
      }}
    >
      {props.label}
    </Text>
  )}
  onChange={({ item }) => console.log(item)}
/>
```

```typescript
import { View, Text } from 'react-native';

<WheelPickerExpo
  height={300}
  width={150}
  items={items}
  renderItem={(props) => (
    <View style={{ alignItems: 'center' }}>
      <Text
        style={{
          fontSize: props.fontSize,
          color: props.fontColor,
          fontWeight: '600',
        }}
      >
        {props.label}
      </Text>
      <Text
        style={{
          fontSize: props.fontSize * 0.6,
          color: props.fontColor,
          opacity: 0.7,
        }}
      >
        Details
      </Text>
    </View>
  )}
  onChange={({ item }) => console.log(item)}
/>
```

```typescript
import { View, Text } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';

<WheelPickerExpo
  height={300}
  width={150}
  items={items}
  renderItem={(props) => (
    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
      <MaterialIcons
        name="check-circle"
        size={props.fontSize}
        color={props.fontColor}
      />
      <Text
        style={{
          fontSize: props.fontSize,
          color: props.fontColor,
          marginLeft: 5,
        }}
      >
        {props.label}
      </Text>
    </View>
  )}
  onChange={({ item }) => console.log(item)}
/>
```

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

### Optimize FlatList Layout

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/lifecycle-and-state.md

Provides static layout dimensions to the FlatList to avoid expensive calculations during scroll events.

```javascript
getItemLayout={(_, index) => ({
  length: itemHeight,
  offset: index * itemHeight,
  index,
})}
```

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

### Define Default Item Component

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/rendering-system.md

Renders a simple Text component with adaptive styling when no custom renderItem function is provided. Uses React.memo for performance optimization.

```typescript
const Item = React.memo(
  ({ fontSize, label, fontColor, textAlign }: RenderItemProps) => (
    <Text style={{ fontSize, color: fontColor, textAlign }}>
      {label}
    </Text>
  )
);
```

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

### Define RenderItemProps structure

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/types.md

Configuration object passed to the custom renderItem function for styling and layout.

```typescript
type RenderItemProps = {
  fontSize: number;
  label: string;
  fontColor: string;
  textAlign: 'center' | 'auto' | 'left' | 'right' | 'justify';
};
```

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

### Customize item display with renderItem

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/types.md

Using RenderItemProps within the renderItem prop to customize the appearance of picker items.

```typescript
<WheelPickerExpo
  items={CITIES}
  renderItem={(props: RenderItemProps) => (
    <Text
      style={{
        fontSize: props.fontSize,
        color: props.fontColor,
        textAlign: props.textAlign,
      }}
    >
      {props.label}
    </Text>
  )}
  onChange={({ item }) => setSelectedCity(item.label)}
/>
```

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

### Define Component Styles

Source: https://github.com/adityamr15/react-native-wheel-picker-expo/blob/master/_autodocs/rendering-system.md

Defines the base layout and gradient container styles using React Native StyleSheet.

```typescript
const styles = StyleSheet.create({
  listItem: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  gradientContainer: {
    position: 'absolute',
    width: '100%',
  },
  linearGradient: { flex: 1 },
  topGradient: { top: 0 },
  bottomGradient: { bottom: 0 },
});
```