0
# Platform-Specific Features
1

2
Cross-platform customization options and behaviors specific to iOS, Android, Windows, and macOS platforms. Each platform provides unique features that enhance the native user experience while maintaining API consistency.
3

4
## Capabilities
5

6
### Android Platform Features
7

8
Android-specific props and behaviors for enhanced Android user experience.
9

10
```typescript { .api }
11
/**
12
 * Android-specific picker properties
13
 * Provides native Android picker customization
14
 */
15
interface AndroidPickerProps {
16
  /** Display mode: 'dialog' (modal) or 'dropdown' (anchored) */
17
  mode?: 'dialog' | 'dropdown';
18
  /** Enable/disable picker interaction */
19
  enabled?: boolean;
20
  /** Dialog title text when mode is 'dialog' */
21
  prompt?: string;
22
  /** Dropdown arrow color */
23
  dropdownIconColor?: ColorValue;
24
  /** Dropdown arrow ripple effect color */
25
  dropdownIconRippleColor?: ColorValue;
26
  /** Maximum lines before text truncation */
27
  numberOfLines?: number;
28
  /** Focus event when picker opens */
29
  onFocus?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
30
  /** Blur event when picker closes */
31
  onBlur?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
32
}
33

34
/** Android dialog mode constant */
35
static readonly MODE_DIALOG: 'dialog';
36
/** Android dropdown mode constant */
37
static readonly MODE_DROPDOWN: 'dropdown';
38
```
39

40
**Android Usage Examples:**
41

42
```typescript
43
import { Picker } from "@react-native-picker/picker";
44

45
// Dialog mode picker (default)
46
<Picker
47
  selectedValue={selectedValue}
48
  onValueChange={setSelectedValue}
49
  mode="dialog"
50
  prompt="Choose an option"
51
  enabled={true}
52
>
53
  <Picker.Item label="Option 1" value="opt1" />
54
  <Picker.Item label="Option 2" value="opt2" />
55
</Picker>
56

57
// Dropdown mode with custom styling
58
<Picker
59
  selectedValue={selectedValue}
60
  onValueChange={setSelectedValue}
61
  mode="dropdown"
62
  dropdownIconColor="#FF5722"
63
  dropdownIconRippleColor="#FF9800"
64
  numberOfLines={3}
65
  onFocus={() => console.log('Picker opened')}
66
  onBlur={() => console.log('Picker closed')}
67
>
68
  <Picker.Item 
69
    label="Long text that might wrap to multiple lines" 
70
    value="long" 
71
  />
72
  <Picker.Item label="Short" value="short" />
73
</Picker>
74

75
// Programmatic control
76
const pickerRef = useRef();
77
const openPicker = () => pickerRef.current?.focus();
78
const closePicker = () => pickerRef.current?.blur();
79

80
<Picker ref={pickerRef} selectedValue={value} onValueChange={setValue}>
81
  <Picker.Item label="Control Me" value="controlled" />
82
</Picker>
83
```
84

85
### iOS Platform Features
86

87
iOS-specific props and behaviors for native iOS picker experience.
88

89
```typescript { .api }
90
/**
91
 * iOS-specific picker properties
92
 * Provides native iOS picker customization
93
 */
94
interface IOSPickerProps {
95
  /** Style applied to each item label */
96
  itemStyle?: StyleProp<TextStyle>;
97
  /** Selection indicator color */
98
  selectionColor?: ColorValue;
99
  /** iOS theme variant (light/dark) */
100
  themeVariant?: string;
101
  /** Maximum lines for item text */
102
  numberOfLines?: number;
103
}
104
```
105

106
**iOS Usage Examples:**
107

108
```typescript
109
import { Picker } from "@react-native-picker/picker";
110

111
// iOS picker with custom styling
112
<Picker
113
  selectedValue={selectedValue}
114
  onValueChange={setSelectedValue}
115
  itemStyle={{
116
    fontSize: 18,
117
    color: '#007AFF',
118
    fontWeight: '500'
119
  }}
120
  selectionColor="#007AFF"
121
  numberOfLines={2}
122
>
123
  <Picker.Item label="iOS Option 1" value="ios1" />
124
  <Picker.Item label="iOS Option 2" value="ios2" />
125
</Picker>
126

127
// Dark theme iOS picker
128
<Picker
129
  selectedValue={selectedValue}
130
  onValueChange={setSelectedValue}
131
  themeVariant="dark"
132
  itemStyle={{
133
    fontSize: 16,
134
    color: '#FFFFFF'
135
  }}
136
>
137
  <Picker.Item label="Dark Option 1" value="dark1" />
138
  <Picker.Item label="Dark Option 2" value="dark2" />
139
</Picker>
140
```
141

142
### Windows Platform Features
143

144
Windows-specific props and behaviors for native Windows picker experience.
145

146
```typescript { .api }
147
/**
148
 * Windows-specific picker properties
149
 * Provides native Windows picker customization
150
 */
151
interface WindowsPickerProps {
152
  /** Placeholder text when no item is selected */
153
  placeholder?: string;
154
  /** Style applied to item labels */
155
  itemStyle?: StyleProp<TextStyle>;
156
  /** Enable/disable picker interaction */
157
  enabled?: boolean;
158
}
159
```
160

161
**Windows Usage Examples:**
162

163
```typescript
164
import { Picker } from "@react-native-picker/picker";
165

166
// Windows picker with placeholder
167
<Picker
168
  selectedValue={selectedValue}
169
  onValueChange={setSelectedValue}
170
  placeholder="Select an option..."
171
  enabled={true}
172
  itemStyle={{
173
    fontSize: 14,
174
    fontFamily: 'Segoe UI'
175
  }}
176
>
177
  <Picker.Item label="Windows Option 1" value="win1" />
178
  <Picker.Item label="Windows Option 2" value="win2" />
179
</Picker>
180
```
181

182
### macOS Platform Features
183

184
macOS-specific behaviors that follow macOS design patterns.
185

186
```typescript { .api }
187
/**
188
 * macOS-specific picker properties
189
 * Follows macOS Human Interface Guidelines
190
 */
191
interface MacOSPickerProps {
192
  /** Style applied to item labels */
193
  itemStyle?: StyleProp<TextStyle>;
194
  /** Maximum lines for item text */
195
  numberOfLines?: number;
196
}
197
```
198

199
**macOS Usage Examples:**
200

201
```typescript
202
import { Picker } from "@react-native-picker/picker";
203

204
// macOS picker with native styling
205
<Picker
206
  selectedValue={selectedValue}
207
  onValueChange={setSelectedValue}
208
  itemStyle={{
209
    fontSize: 13,
210
    fontFamily: 'SF Pro Text'
211
  }}
212
  numberOfLines={1}
213
>
214
  <Picker.Item label="macOS Option 1" value="mac1" />
215
  <Picker.Item label="macOS Option 2" value="mac2" />
216
</Picker>
217
```
218

219
### Platform Detection and Conditional Rendering
220

221
Implementing platform-specific behavior in your components.
222

223
```typescript { .api }
224
/**
225
 * Platform-specific picker implementation
226
 * Conditionally applies platform-appropriate props
227
 */
228
import { Platform } from 'react-native';
229
import { Picker } from '@react-native-picker/picker';
230

231
const PlatformPicker = ({ selectedValue, onValueChange, children }) => {
232
  const platformProps = {
233
    // Common props
234
    selectedValue,
235
    onValueChange,
236
    
237
    // Platform-specific props
238
    ...(Platform.OS === 'android' && {
239
      mode: 'dropdown',
240
      dropdownIconColor: '#007AFF'
241
    }),
242
    ...(Platform.OS === 'ios' && {
243
      itemStyle: { fontSize: 16 },
244
      selectionColor: '#007AFF'
245
    }),
246
    ...(Platform.OS === 'windows' && {
247
      placeholder: 'Select...'
248
    })
249
  };
250
  
251
  return <Picker {...platformProps}>{children}</Picker>;
252
};
253
```
254

255
### RTL (Right-to-Left) Support
256

257
Configuration for RTL language support across platforms.
258

259
```typescript { .api }
260
/**
261
 * RTL support configuration
262
 * Requires Android manifest configuration
263
 */
264
// Android: Add to AndroidManifest.xml
265
// <application android:supportsRtl="true">
266

267
// Usage remains the same across platforms
268
<Picker
269
  selectedValue={selectedValue}
270
  onValueChange={setSelectedValue}
271
>
272
  <Picker.Item label="العربية" value="ar" />
273
  <Picker.Item label="עברית" value="he" />
274
</Picker>
275
```
276

277
### Accessibility Features
278

279
Platform-specific accessibility support and configuration.
280

281
```typescript { .api }
282
/**
283
 * Accessibility properties across platforms
284
 * Provides screen reader and accessibility support
285
 */
286
<Picker
287
  selectedValue={selectedValue}
288
  onValueChange={setSelectedValue}
289
  accessibilityLabel="Language Selection Picker"
290
  testID="language-picker"
291
>
292
  <Picker.Item 
293
    label="English" 
294
    value="en" 
295
    testID="english-option"
296
  />
297
  <Picker.Item 
298
    label="Spanish" 
299
    value="es" 
300
    testID="spanish-option"
301
  />
302
</Picker>
303
```
304

305
### Installation and Setup
306

307
Platform-specific installation and configuration requirements.
308

309
**iOS Setup:**
310
```bash
311
# CocoaPods integration required
312
cd ios && pod install
313
```
314

315
**Android Setup:**
316
```bash
317
# Autolinking handles integration automatically
318
# Manual configuration only for RN < 0.60
319
```
320

321
**Windows Setup:**
322
```bash
323
# Manual project references required for some versions
324
# See Windows-specific installation documentation
325
```
326

327
**macOS Setup:**
328
```bash
329
# CocoaPods integration required
330
cd macos && pod install
331
```