1# Native Controls
2 
3Native iOS controls provide built-in haptics, accessibility, and platform-appropriate styling.
4 
5## Switch
6 
7Use for binary on/off settings. Has built-in haptics.
8 
9```tsx
10import { Switch } from "react-native";
11import { useState } from "react";
12 
13const [enabled, setEnabled] = useState(false);
14 
15<Switch value={enabled} onValueChange={setEnabled} />;
16```
17 
18### Customization
19 
20```tsx
21<Switch
22  value={enabled}
23  onValueChange={setEnabled}
24  trackColor={{ false: "#767577", true: "#81b0ff" }}
25  thumbColor={enabled ? "#f5dd4b" : "#f4f3f4"}
26  ios_backgroundColor="#3e3e3e"
27/>
28```
29 
30## Segmented Control
31 
32Use for non-navigational tabs or mode selection. Avoid changing default colors.
33 
34```tsx
35import SegmentedControl from "@react-native-segmented-control/segmented-control";
36import { useState } from "react";
37 
38const [index, setIndex] = useState(0);
39 
40<SegmentedControl
41  values={["All", "Active", "Done"]}
42  selectedIndex={index}
43  onChange={({ nativeEvent }) => setIndex(nativeEvent.selectedSegmentIndex)}
44/>;
45```
46 
47### Rules
48 
49- Maximum 4 options — use a picker for more
50- Keep labels short (1-2 words)
51- Avoid custom colors — native styling adapts to dark mode
52 
53### With Icons (iOS 14+)
54 
55```tsx
56<SegmentedControl
57  values={[
58    { label: "List", icon: "list.bullet" },
59    { label: "Grid", icon: "square.grid.2x2" },
60  ]}
61  selectedIndex={index}
62  onChange={({ nativeEvent }) => setIndex(nativeEvent.selectedSegmentIndex)}
63/>
64```
65 
66## Slider
67 
68Continuous value selection.
69 
70```tsx
71import Slider from "@react-native-community/slider";
72import { useState } from "react";
73 
74const [value, setValue] = useState(0.5);
75 
76<Slider
77  value={value}
78  onValueChange={setValue}
79  minimumValue={0}
80  maximumValue={1}
81/>;
82```
83 
84### Customization
85 
86```tsx
87<Slider
88  value={value}
89  onValueChange={setValue}
90  minimumValue={0}
91  maximumValue={100}
92  step={1}
93  minimumTrackTintColor="#007AFF"
94  maximumTrackTintColor="#E5E5EA"
95  thumbTintColor="#007AFF"
96/>
97```
98 
99### Discrete Steps
100 
101```tsx
102<Slider
103  value={value}
104  onValueChange={setValue}
105  minimumValue={0}
106  maximumValue={10}
107  step={1}
108/>
109```
110 
111## Date/Time Picker
112 
113Compact pickers with popovers. Has built-in haptics.
114 
115```tsx
116import DateTimePicker from "@react-native-community/datetimepicker";
117import { useState } from "react";
118 
119const [date, setDate] = useState(new Date());
120 
121<DateTimePicker
122  value={date}
123  onChange={(event, selectedDate) => {
124    if (selectedDate) setDate(selectedDate);
125  }}
126  mode="datetime"
127/>;
128```
129 
130### Modes
131 
132- `date` — Date only
133- `time` — Time only
134- `datetime` — Date and time
135 
136### Display Styles
137 
138```tsx
139// Compact inline (default)
140<DateTimePicker value={date} mode="date" />
141 
142// Spinner wheel
143<DateTimePicker
144  value={date}
145  mode="date"
146  display="spinner"
147  style={{ width: 200, height: 150 }}
148/>
149 
150// Full calendar
151<DateTimePicker value={date} mode="date" display="inline" />
152```
153 
154### Time Intervals
155 
156```tsx
157<DateTimePicker
158  value={date}
159  mode="time"
160  minuteInterval={15}
161/>
162```
163 
164### Min/Max Dates
165 
166```tsx
167<DateTimePicker
168  value={date}
169  mode="date"
170  minimumDate={new Date(2020, 0, 1)}
171  maximumDate={new Date(2030, 11, 31)}
172/>
173```
174 
175## Stepper
176 
177Increment/decrement numeric values.
178 
179```tsx
180import { Stepper } from "react-native";
181import { useState } from "react";
182 
183const [count, setCount] = useState(0);
184 
185<Stepper
186  value={count}
187  onValueChange={setCount}
188  minimumValue={0}
189  maximumValue={10}
190/>;
191```
192 
193## TextInput
194 
195Native text input with various keyboard types.
196 
197```tsx
198import { TextInput } from "react-native";
199 
200<TextInput
201  placeholder="Enter text..."
202  placeholderTextColor="#999"
203  style={{
204    padding: 12,
205    fontSize: 16,
206    borderRadius: 8,
207    backgroundColor: "#f0f0f0",
208  }}
209/>
210```
211 
212### Keyboard Types
213 
214```tsx
215// Email
216<TextInput keyboardType="email-address" autoCapitalize="none" />
217 
218// Phone
219<TextInput keyboardType="phone-pad" />
220 
221// Number
222<TextInput keyboardType="numeric" />
223 
224// Password
225<TextInput secureTextEntry />
226 
227// Search
228<TextInput
229  returnKeyType="search"
230  enablesReturnKeyAutomatically
231/>
232```
233 
234### Multiline
235 
236```tsx
237<TextInput
238  multiline
239  numberOfLines={4}
240  textAlignVertical="top"
241  style={{ minHeight: 100 }}
242/>
243```
244 
245## Picker (Wheel)
246 
247For selection from many options (5+ items).
248 
249```tsx
250import { Picker } from "@react-native-picker/picker";
251import { useState } from "react";
252 
253const [selected, setSelected] = useState("js");
254 
255<Picker selectedValue={selected} onValueChange={setSelected}>
256  <Picker.Item label="JavaScript" value="js" />
257  <Picker.Item label="TypeScript" value="ts" />
258  <Picker.Item label="Python" value="py" />
259  <Picker.Item label="Go" value="go" />
260</Picker>;
261```
262 
263## Best Practices
264 
265- **Haptics**: Switch and DateTimePicker have built-in haptics — don't add extra
266- **Accessibility**: Native controls have proper accessibility labels by default
267- **Dark Mode**: Avoid custom colors — native styling adapts automatically
268- **Spacing**: Use consistent padding around controls (12-16pt)
269- **Labels**: Place labels above or to the left of controls
270- **Grouping**: Group related controls in sections with headers
271