Platform-Specific Features

interface SliderPropsIOS extends ViewProps {
  /**
   * Assigns a maximum track image. Only static images are supported.
   * The leftmost pixel of the image will be stretched to fill the track.
   */
  maximumTrackImage?: ImageURISource;

  /**
   * Assigns a minimum track image. Only static images are supported.
   * The rightmost pixel of the image will be stretched to fill the track.
   */
  minimumTrackImage?: ImageURISource;

  /**
   * Permits tapping on the slider track to set the thumb position.
   * Defaults to false on iOS. No effect on Android or Windows.
   */
  tapToSeek?: boolean;

  /**
   * Sets an image for the thumb. Only static images are supported.
   */
  thumbImage?: ImageURISource;

  /**
   * Assigns a single image for the track. Only static images
   * are supported. The center pixel of the image will be stretched
   * to fill the track.
   */
  trackImage?: ImageURISource;
}

import React from 'react';
import Slider from '@react-native-community/slider';

// Image-based iOS slider
function iOSImageSlider() {
  return (
    <Slider
      style={{width: 200, height: 40}}
      minimumValue={0}
      maximumValue={1}
      value={0.6}
      thumbImage={require('./assets/custom-thumb.png')}
      minimumTrackImage={require('./assets/track-min.png')}
      maximumTrackImage={require('./assets/track-max.png')}
      tapToSeek={true}
    />
  );
}

// Complete track image slider
function TrackImageSlider() {
  return (
    <Slider
      style={{width: 200, height: 40}}
      minimumValue={0}
      maximumValue={100}
      value={75}
      trackImage={require('./assets/full-track.png')}
      thumbImage={require('./assets/thumb.png')}
    />
  );
}

// Tap-to-seek enabled slider
function TapToSeekSlider() {
  return (
    <Slider
      style={{width: 300, height: 40}}
      minimumValue={0}
      maximumValue={10}
      step={1}
      value={5}
      tapToSeek={true}
      onValueChange={(value) => console.log('Tapped to:', value)}
    />
  );
}

interface SliderPropsWindows extends ViewProps {
  /**
   * Controls the orientation of the slider, default value is 'false' (horizontal).
   */
  vertical?: boolean;
}

import React from 'react';
import { Platform } from 'react-native';
import Slider from '@react-native-community/slider';

// Vertical slider (Windows only)
function VerticalSlider() {
  if (Platform.OS !== 'windows') {
    // Fallback to horizontal slider on other platforms
    return (
      <Slider
        style={{width: 200, height: 40}}
        minimumValue={0}
        maximumValue={100}
        value={50}
      />
    );
  }

  return (
    <Slider
      style={{width: 40, height: 200}}
      minimumValue={0}
      maximumValue={100}
      value={50}
      vertical={true}
    />
  );
}

// Platform-adaptive slider
function AdaptiveOrientationSlider({ useVertical }: { useVertical: boolean }) {
  const isVerticalSupported = Platform.OS === 'windows';
  const shouldUseVertical = useVertical && isVerticalSupported;

  return (
    <Slider
      style={shouldUseVertical ? {width: 40, height: 200} : {width: 200, height: 40}}
      minimumValue={0}
      maximumValue={1}
      value={0.5}
      vertical={shouldUseVertical}
    />
  );
}

interface SliderPropsAndroid extends ViewProps {
  /**
   * Color of the foreground switch grip.
   */
  thumbTintColor?: string;
}

import React from 'react';
import { Platform } from 'react-native';
import Slider from '@react-native-community/slider';

// Android-optimized slider
function AndroidSlider() {
  return (
    <Slider
      style={{width: 200, height: 40}}
      minimumValue={0}
      maximumValue={1}
      value={0.3}
      thumbTintColor={Platform.OS === 'android' ? '#FF6B6B' : undefined}
      minimumTrackTintColor="#4ECDC4"
      maximumTrackTintColor="#E0E0E0"
    />
  );
}

interface SliderProps
  extends SliderPropsIOS,
    SliderPropsAndroid,
    SliderPropsWindows {
  // Core props are merged with all platform-specific interfaces
  value?: number;
  minimumValue?: number;
  maximumValue?: number;
  // ... other core props
}

import React from 'react';
import { Platform } from 'react-native';
import Slider from '@react-native-community/slider';

// Platform-adaptive feature usage
function CrossPlatformSlider() {
  const sliderProps = {
    style: {width: 200, height: 40},
    minimumValue: 0,
    maximumValue: 1,
    value: 0.5,
    minimumTrackTintColor: '#1fb28a',
    maximumTrackTintColor: '#d3d3d3',
    
    // iOS-specific features
    ...(Platform.OS === 'ios' && {
      tapToSeek: true,
      thumbImage: require('./assets/ios-thumb.png'),
    }),
    
    // Windows-specific features
    ...(Platform.OS === 'windows' && {
      vertical: false, // Could be made configurable
    }),
    
    // Android-specific features
    ...(Platform.OS === 'android' && {
      thumbTintColor: '#b9e4c7',
    }),
  };

  return <Slider {...sliderProps} />;
}

// Feature detection helper
function getAvailableFeatures() {
  return {
    imageSupport: Platform.OS === 'ios',
    tapToSeek: Platform.OS === 'ios',
    verticalOrientation: Platform.OS === 'windows',
    androidThumbTint: Platform.OS === 'android',
  };
}

// React Native ImageURISource type
interface ImageURISource {
  uri?: string;
  bundle?: string;
  method?: string;
  headers?: { [key: string]: string };
  body?: string;
  cache?: 'default' | 'reload' | 'force-cache' | 'only-if-cached';
  width?: number;
  height?: number;
  scale?: number;
}

// Platform-specific interfaces
interface SliderPropsIOS extends ViewProps {
  maximumTrackImage?: ImageURISource;
  minimumTrackImage?: ImageURISource;
  tapToSeek?: boolean;
  thumbImage?: ImageURISource;
  trackImage?: ImageURISource;
}

interface SliderPropsWindows extends ViewProps {
  vertical?: boolean;
}

interface SliderPropsAndroid extends ViewProps {
  thumbTintColor?: string;
}