Form Components

/**
 * Platform-specific search input component
 */
interface SearchBarProps {
  /** Platform-specific styling */
  platform: 'default' | 'ios' | 'android';
  /** Placeholder text */
  placeholder?: string;
  /** Current search value */
  value?: string;
  /** Show loading indicator */
  showLoading?: boolean;
  /** Custom clear button icon */
  clearIcon?: IconNode;
  /** Custom search icon */
  searchIcon?: IconNode;
  /** Container styles */
  containerStyle?: StyleProp<ViewStyle>;
  /** Input container styles */
  inputContainerStyle?: StyleProp<ViewStyle>;
  /** Input text styles */
  inputStyle?: StyleProp<TextStyle>;
  /** Text change handler */
  onChangeText?(text: string): void;
  /** Clear button handler */
  onClear?(): void;
  /** Focus handler */
  onFocus?(): void;
  /** Blur handler */
  onBlur?(): void;
  /** Cancel handler (iOS) */
  onCancel?(): void;
}

/**
 * SearchBar component methods
 */
interface SearchBarMethods {
  /** Focus the search input */
  focus(): void;
  /** Blur the search input */
  blur(): void;
  /** Clear the search text */
  clear(): void;
  /** Cancel search (iOS platform) */
  cancel(): void;
}

/**
 * Android-specific search bar props
 */
interface SearchBarAndroidProps extends SearchBarProps {
  platform: 'android';
  /** Cancel button title */
  cancelButtonTitle?: string;
  /** Cancel button props */
  cancelButtonProps?: ButtonProps;
}

/**
 * iOS-specific search bar props
 */
interface SearchBarIosProps extends SearchBarProps {
  platform: 'ios';
  /** Cancel button title */
  cancelButtonTitle?: string;
  /** Cancel button props */
  cancelButtonProps?: ButtonProps;
  /** Show cancel button */
  showCancel?: boolean;
}

/**
 * Default platform search bar props
 */
interface SearchBarDefaultProps extends SearchBarProps {
  platform: 'default';
  /** Search button props */
  searchIcon?: IconNode;
  /** Clear button props */
  clearIcon?: IconNode;
}

import React, { useState, useRef } from 'react';
import { SearchBar } from 'react-native-elements';

// iOS-style search bar
const [search, setSearch] = useState('');

<SearchBar
  platform="ios"
  placeholder="Search..."
  onChangeText={setSearch}
  value={search}
  showCancel
  cancelButtonTitle="Cancel"
/>

// Android-style search bar
<SearchBar
  platform="android"
  placeholder="Search users..."
  onChangeText={updateSearch}
  value={searchValue}
  showLoading={isLoading}
/>

// Default search bar with custom icons
<SearchBar
  platform="default"
  placeholder="Search products..."
  onChangeText={handleSearch}
  value={searchTerm}
  searchIcon={{ type: 'material', name: 'search' }}
  clearIcon={{ type: 'material', name: 'close' }}
  containerStyle={{ backgroundColor: '#f8f9fa' }}
  inputContainerStyle={{ backgroundColor: '#fff' }}
/>

// Search bar with methods
const searchRef = useRef<SearchBar>(null);

const focusSearch = () => {
  searchRef.current?.focus();
};

const clearSearch = () => {
  searchRef.current?.clear();
  setSearch('');
};

<SearchBar
  ref={searchRef}
  platform="default"
  placeholder="Search..."
  value={search}
  onChangeText={setSearch}
/>

/**
 * Customizable checkbox input
 */
interface CheckBoxProps extends TouchableOpacityProps {
  /** Checked state */
  checked?: boolean;
  /** Title text or component */
  title?: string | React.ReactElement;
  /** Icon style (square or circular) */
  iconType?: 'material-icons' | 'material-community' | 'font-awesome' | 'octicon' | 'ionicon' | 'foundation' | 'evilicon' | 'simple-line-icon' | 'zocial' | 'entypo' | 'feather' | 'antdesign';
  /** Checked state icon */
  checkedIcon?: IconNode;
  /** Unchecked state icon */
  uncheckedIcon?: IconNode;
  /** Checked state color */
  checkedColor?: string;
  /** Unchecked state color */
  uncheckedColor?: string;
  /** Title text styles */
  textStyle?: StyleProp<TextStyle>;
  /** Container styles */
  containerStyle?: StyleProp<ViewStyle>;
  /** Wrapper styles */
  wrapperStyle?: StyleProp<ViewStyle>;
  /** Icon styles */
  iconStyle?: StyleProp<ViewStyle>;
  /** Right-aligned checkbox */
  right?: boolean;
  /** Center-aligned title */
  center?: boolean;
  /** Custom touchable component */
  Component?: typeof React.Component;
  /** Font family for icons */
  fontFamily?: string;
  /** Icon size */
  size?: number;
}

import React, { useState } from 'react';
import { CheckBox } from 'react-native-elements';

// Basic checkbox
const [isChecked, setIsChecked] = useState(false);

<CheckBox
  title="Accept Terms and Conditions"
  checked={isChecked}
  onPress={() => setIsChecked(!isChecked)}
/>

// Checkbox with custom icons
<CheckBox
  title="Custom Icons"
  checked={isSelected}
  onPress={() => setIsSelected(!isSelected)}
  checkedIcon="check-square"
  uncheckedIcon="square"
  iconType="font-awesome"
  checkedColor="#27ae60"
/>

// Right-aligned checkbox
<CheckBox
  title="Right Aligned"
  checked={rightChecked}
  onPress={() => setRightChecked(!rightChecked)}
  right
  containerStyle={{ backgroundColor: 'transparent', borderWidth: 0 }}
/>

// Checkbox with custom styling
<CheckBox
  title="Styled Checkbox"
  checked={styledChecked}
  onPress={() => setStyledChecked(!styledChecked)}
  textStyle={{ fontSize: 18, fontWeight: 'normal' }}
  containerStyle={{
    backgroundColor: '#f8f9fa',
    borderRadius: 5,
    padding: 15,
  }}
  checkedColor="#007AFF"
  size={25}
/>

// Circular checkbox variant
<CheckBox
  title="Circular Style"
  checked={circularChecked}
  onPress={() => setCircularChecked(!circularChecked)}
  checkedIcon="dot-circle-o"
  uncheckedIcon="circle-o"
  iconType="font-awesome"
/>

/**
 * Range input slider control
 */
interface SliderProps {
  /** Current slider value */
  value?: number;
  /** Minimum value */
  minimumValue?: number;
  /** Maximum value */
  maximumValue?: number;
  /** Value change step */
  step?: number;
  /** Minimum track tint color */
  minimumTrackTintColor?: string;
  /** Maximum track tint color */
  maximumTrackTintColor?: string;
  /** Thumb tint color */
  thumbTintColor?: string;
  /** Thumb styles */
  thumbStyle?: StyleProp<ViewStyle>;
  /** Track styles */
  trackStyle?: StyleProp<ViewStyle>;
  /** Container styles */
  style?: StyleProp<ViewStyle>;
  /** Value change handler */
  onValueChange?(value: number): void;
  /** Sliding start handler */
  onSlidingStart?(value: number): void;
  /** Sliding complete handler */
  onSlidingComplete?(value: number): void;
  /** Disabled state */
  disabled?: boolean;
  /** Custom thumb component */
  thumbComponent?: React.ReactElement;
  /** Allow touch to track */
  allowTouchTrack?: boolean;
  /** Orientation */
  orientation?: 'horizontal' | 'vertical';
  /** Debug mode */
  debugTouchArea?: boolean;
  /** Animate transitions */
  animateTransitions?: boolean;
  /** Animation type */
  animationType?: 'spring' | 'timing';
  /** Animation config */
  animationConfig?: any;
}

import React, { useState } from 'react';
import { Slider, Text } from 'react-native-elements';

// Basic slider
const [sliderValue, setSliderValue] = useState(50);

<View>
  <Text>Value: {sliderValue}</Text>
  <Slider
    value={sliderValue}
    onValueChange={setSliderValue}
    minimumValue={0}
    maximumValue={100}
    step={1}
    thumbStyle={{ backgroundColor: '#007AFF' }}
    trackStyle={{ backgroundColor: '#d3d3d3' }}
    minimumTrackTintColor="#007AFF"
  />
</View>

// Range slider with custom styling
const [rangeValue, setRangeValue] = useState(25);

<Slider
  value={rangeValue}
  onValueChange={setRangeValue}
  minimumValue={0}
  maximumValue={100}
  step={5}
  thumbStyle={{
    backgroundColor: '#FF6B6B',
    borderWidth: 2,
    borderColor: '#fff',
    width: 30,
    height: 30,
  }}
  trackStyle={{
    height: 8,
    borderRadius: 4,
  }}
  minimumTrackTintColor="#FF6B6B"
  maximumTrackTintColor="#E0E0E0"
  style={{ margin: 20 }}
/>

// Slider with step values and callbacks
const [temperature, setTemperature] = useState(22);

<View>
  <Text h4>Temperature: {temperature}°C</Text>
  <Slider
    value={temperature}
    onValueChange={setTemperature}
    onSlidingStart={(value) => console.log('Started:', value)}
    onSlidingComplete={(value) => console.log('Completed:', value)}
    minimumValue={16}
    maximumValue={30}
    step={0.5}
    thumbStyle={{ backgroundColor: '#e67e22' }}
    minimumTrackTintColor="#e67e22"
  />
</View>

// Vertical slider
<View style={{ height: 200 }}>
  <Slider
    value={verticalValue}
    onValueChange={setVerticalValue}
    orientation="vertical"
    minimumValue={0}
    maximumValue={100}
    thumbStyle={{ backgroundColor: '#9b59b6' }}
    minimumTrackTintColor="#9b59b6"
  />
</View>

/**
 * Toggle switch component
 */
interface SwitchProps {
  /** Switch value/state */
  value?: boolean;
  /** Value change handler */
  onValueChange?(value: boolean): void;
  /** Disabled state */
  disabled?: boolean;
  /** Track color when switch is false */
  trackColor?: {
    false?: string;
    true?: string;
  };
  /** Thumb color */
  thumbColor?: string;
  /** iOS background color */
  ios_backgroundColor?: string;
  /** Container styles */
  style?: StyleProp<ViewStyle>;
}

import React, { useState } from 'react';
import { Switch, ListItem } from 'react-native-elements';

// Basic switch
const [isEnabled, setIsEnabled] = useState(false);

<Switch
  value={isEnabled}
  onValueChange={setIsEnabled}
/>

// Switch with custom colors
const [darkMode, setDarkMode] = useState(false);

<Switch
  value={darkMode}
  onValueChange={setDarkMode}
  trackColor={{ false: '#767577', true: '#81b0ff' }}
  thumbColor={darkMode ? '#f5dd4b' : '#f4f3f4'}
  ios_backgroundColor="#3e3e3e"
/>

// Switch in list item
<ListItem bottomDivider>
  <ListItem.Content>
    <ListItem.Title>Enable Notifications</ListItem.Title>
    <ListItem.Subtitle>Receive push notifications</ListItem.Subtitle>
  </ListItem.Content>
  <Switch
    value={notifications}
    onValueChange={setNotifications}
    trackColor={{ false: '#ccc', true: '#007AFF' }}
    thumbColor="#fff"
  />
</ListItem>

// Disabled switch
<Switch
  value={false}
  disabled
  trackColor={{ false: '#e0e0e0', true: '#e0e0e0' }}
  thumbColor="#bbb"
/>

// Switch with label
<View style={{ flexDirection: 'row', alignItems: 'center', padding: 10 }}>
  <Text style={{ flex: 1 }}>Auto-sync Data</Text>
  <Switch
    value={autoSync}
    onValueChange={setAutoSync}
    trackColor={{ false: '#ccc', true: '#4caf50' }}
  />
</View>

/**
 * Group of related buttons with single selection
 */
interface ButtonGroupProps {
  /** Button labels */
  buttons: (string | React.ReactElement)[];
  /** Selected button index */
  selectedIndex?: number;
  /** Selection handler */
  onPress?(selectedIndex: number): void;
  /** Multiple selection indices */
  selectedIndexes?: number[];
  /** Multiple selection handler */
  onHideUnderlay?(): void;
  /** Button styles */
  buttonStyle?: StyleProp<ViewStyle>;
  /** Container styles */
  containerStyle?: StyleProp<ViewStyle>;
  /** Text styles */
  textStyle?: StyleProp<TextStyle>;
  /** Selected button styles */
  selectedButtonStyle?: StyleProp<ViewStyle>;
  /** Selected text styles */
  selectedTextStyle?: StyleProp<TextStyle>;
  /** Underlay color */
  underlayColor?: string;
  /** Active opacity */
  activeOpacity?: number;
  /** Border radius */
  borderRadius?: number;
  /** Container border radius */
  containerBorderRadius?: number;
  /** Disabled state */
  disabled?: boolean | number[];
  /** Disabled button styles */
  disabledStyle?: StyleProp<ViewStyle>;
  /** Disabled text styles */
  disabledTextStyle?: StyleProp<TextStyle>;
  /** Inner border styles */
  innerBorderStyle?: {
    color?: string;
    width?: number;
  };
  /** Last button styles */
  lastBorderStyle?: StyleProp<ViewStyle>;
  /** Vertical layout */
  vertical?: boolean;
  /** Custom touchable component */
  Component?: typeof React.Component;
}

import React, { useState } from 'react';
import { ButtonGroup } from 'react-native-elements';

// Basic button group
const buttons = ['Tab 1', 'Tab 2', 'Tab 3'];
const [selectedIndex, setSelectedIndex] = useState(0);

<ButtonGroup
  buttons={buttons}
  selectedIndex={selectedIndex}
  onPress={setSelectedIndex}
  containerStyle={{ marginBottom: 20 }}
/>

// Custom styled button group
<ButtonGroup
  buttons={['Option A', 'Option B', 'Option C']}
  selectedIndex={selectedOption}
  onPress={setSelectedOption}
  buttonStyle={{
    backgroundColor: '#f8f9fa',
  }}
  selectedButtonStyle={{
    backgroundColor: '#007AFF',
  }}
  textStyle={{
    color: '#666',
  }}
  selectedTextStyle={{
    color: '#fff',
    fontWeight: 'bold',
  }}
  containerStyle={{
    borderRadius: 10,
    marginHorizontal: 20,
  }}
/>

// Vertical button group
<ButtonGroup
  buttons={['Small', 'Medium', 'Large']}
  selectedIndex={size}
  onPress={setSize}
  vertical
  containerStyle={{
    width: 150,
  }}
/>

// Button group with icons
const iconButtons = [
  <Icon name="list" type="material" color="#666" />,
  <Icon name="grid-on" type="material" color="#666" />,
  <Icon name="view-carousel" type="material" color="#666" />
];

<ButtonGroup
  buttons={iconButtons}
  selectedIndex={viewMode}
  onPress={setViewMode}
  selectedButtonStyle={{ backgroundColor: '#007AFF' }}
/>

// Disabled buttons
<ButtonGroup
  buttons={['Available', 'Disabled', 'Available']}
  selectedIndex={0}
  onPress={setSelectedIndex}
  disabled={[1]} // Disable second button
  disabledStyle={{
    backgroundColor: '#e0e0e0',
  }}
  disabledTextStyle={{
    color: '#999',
  }}
/>