0
# Platform-Specific Features
1

2
Platform-specific props and behaviors for iOS images, Windows vertical orientation, and Android styling optimizations.
3

4
## Capabilities
5

6
### iOS-Specific Features
7

8
Image-based customization and tap-to-seek functionality available on iOS.
9

10
```typescript { .api }
11
interface SliderPropsIOS extends ViewProps {
12
  /**
13
   * Assigns a maximum track image. Only static images are supported.
14
   * The leftmost pixel of the image will be stretched to fill the track.
15
   */
16
  maximumTrackImage?: ImageURISource;
17

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

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

30
  /**
31
   * Sets an image for the thumb. Only static images are supported.
32
   */
33
  thumbImage?: ImageURISource;
34

35
  /**
36
   * Assigns a single image for the track. Only static images
37
   * are supported. The center pixel of the image will be stretched
38
   * to fill the track.
39
   */
40
  trackImage?: ImageURISource;
41
}
42
```
43

44
**Usage Examples:**
45

46
```typescript
47
import React from 'react';
48
import Slider from '@react-native-community/slider';
49

50
// Image-based iOS slider
51
function iOSImageSlider() {
52
  return (
53
    <Slider
54
      style={{width: 200, height: 40}}
55
      minimumValue={0}
56
      maximumValue={1}
57
      value={0.6}
58
      thumbImage={require('./assets/custom-thumb.png')}
59
      minimumTrackImage={require('./assets/track-min.png')}
60
      maximumTrackImage={require('./assets/track-max.png')}
61
      tapToSeek={true}
62
    />
63
  );
64
}
65

66
// Complete track image slider
67
function TrackImageSlider() {
68
  return (
69
    <Slider
70
      style={{width: 200, height: 40}}
71
      minimumValue={0}
72
      maximumValue={100}
73
      value={75}
74
      trackImage={require('./assets/full-track.png')}
75
      thumbImage={require('./assets/thumb.png')}
76
    />
77
  );
78
}
79

80
// Tap-to-seek enabled slider
81
function TapToSeekSlider() {
82
  return (
83
    <Slider
84
      style={{width: 300, height: 40}}
85
      minimumValue={0}
86
      maximumValue={10}
87
      step={1}
88
      value={5}
89
      tapToSeek={true}
90
      onValueChange={(value) => console.log('Tapped to:', value)}
91
    />
92
  );
93
}
94
```
95

96
### Windows-Specific Features
97

98
Vertical orientation support available on Windows platform.
99

100
```typescript { .api }
101
interface SliderPropsWindows extends ViewProps {
102
  /**
103
   * Controls the orientation of the slider, default value is 'false' (horizontal).
104
   */
105
  vertical?: boolean;
106
}
107
```
108

109
**Usage Examples:**
110

111
```typescript
112
import React from 'react';
113
import { Platform } from 'react-native';
114
import Slider from '@react-native-community/slider';
115

116
// Vertical slider (Windows only)
117
function VerticalSlider() {
118
  if (Platform.OS !== 'windows') {
119
    // Fallback to horizontal slider on other platforms
120
    return (
121
      <Slider
122
        style={{width: 200, height: 40}}
123
        minimumValue={0}
124
        maximumValue={100}
125
        value={50}
126
      />
127
    );
128
  }
129

130
  return (
131
    <Slider
132
      style={{width: 40, height: 200}}
133
      minimumValue={0}
134
      maximumValue={100}
135
      value={50}
136
      vertical={true}
137
    />
138
  );
139
}
140

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

146
  return (
147
    <Slider
148
      style={shouldUseVertical ? {width: 40, height: 200} : {width: 200, height: 40}}
149
      minimumValue={0}
150
      maximumValue={1}
151
      value={0.5}
152
      vertical={shouldUseVertical}
153
    />
154
  );
155
}
156
```
157

158
### Android-Specific Features
159

160
Android-specific styling for the thumb/grip appearance.
161

162
```typescript { .api }
163
interface SliderPropsAndroid extends ViewProps {
164
  /**
165
   * Color of the foreground switch grip.
166
   */
167
  thumbTintColor?: string;
168
}
169
```
170

171
**Usage Examples:**
172

173
```typescript
174
import React from 'react';
175
import { Platform } from 'react-native';
176
import Slider from '@react-native-community/slider';
177

178
// Android-optimized slider
179
function AndroidSlider() {
180
  return (
181
    <Slider
182
      style={{width: 200, height: 40}}
183
      minimumValue={0}
184
      maximumValue={1}
185
      value={0.3}
186
      thumbTintColor={Platform.OS === 'android' ? '#FF6B6B' : undefined}
187
      minimumTrackTintColor="#4ECDC4"
188
      maximumTrackTintColor="#E0E0E0"
189
    />
190
  );
191
}
192
```
193

194
### Cross-Platform Integration
195

196
How platform-specific props integrate with the main component.
197

198
```typescript { .api }
199
interface SliderProps
200
  extends SliderPropsIOS,
201
    SliderPropsAndroid,
202
    SliderPropsWindows {
203
  // Core props are merged with all platform-specific interfaces
204
  value?: number;
205
  minimumValue?: number;
206
  maximumValue?: number;
207
  // ... other core props
208
}
209
```
210

211
**Usage Examples:**
212

213
```typescript
214
import React from 'react';
215
import { Platform } from 'react-native';
216
import Slider from '@react-native-community/slider';
217

218
// Platform-adaptive feature usage
219
function CrossPlatformSlider() {
220
  const sliderProps = {
221
    style: {width: 200, height: 40},
222
    minimumValue: 0,
223
    maximumValue: 1,
224
    value: 0.5,
225
    minimumTrackTintColor: '#1fb28a',
226
    maximumTrackTintColor: '#d3d3d3',
227
    
228
    // iOS-specific features
229
    ...(Platform.OS === 'ios' && {
230
      tapToSeek: true,
231
      thumbImage: require('./assets/ios-thumb.png'),
232
    }),
233
    
234
    // Windows-specific features
235
    ...(Platform.OS === 'windows' && {
236
      vertical: false, // Could be made configurable
237
    }),
238
    
239
    // Android-specific features
240
    ...(Platform.OS === 'android' && {
241
      thumbTintColor: '#b9e4c7',
242
    }),
243
  };
244

245
  return <Slider {...sliderProps} />;
246
}
247

248
// Feature detection helper
249
function getAvailableFeatures() {
250
  return {
251
    imageSupport: Platform.OS === 'ios',
252
    tapToSeek: Platform.OS === 'ios',
253
    verticalOrientation: Platform.OS === 'windows',
254
    androidThumbTint: Platform.OS === 'android',
255
  };
256
}
257
```
258

259
## Types
260

261
### Platform Type Definitions
262

263
```typescript { .api }
264
// React Native ImageURISource type
265
interface ImageURISource {
266
  uri?: string;
267
  bundle?: string;
268
  method?: string;
269
  headers?: { [key: string]: string };
270
  body?: string;
271
  cache?: 'default' | 'reload' | 'force-cache' | 'only-if-cached';
272
  width?: number;
273
  height?: number;
274
  scale?: number;
275
}
276

277
// Platform-specific interfaces
278
interface SliderPropsIOS extends ViewProps {
279
  maximumTrackImage?: ImageURISource;
280
  minimumTrackImage?: ImageURISource;
281
  tapToSeek?: boolean;
282
  thumbImage?: ImageURISource;
283
  trackImage?: ImageURISource;
284
}
285

286
interface SliderPropsWindows extends ViewProps {
287
  vertical?: boolean;
288
}
289

290
interface SliderPropsAndroid extends ViewProps {
291
  thumbTintColor?: string;
292
}
293
```