Skip to content

Commit a148a0a

Browse files
huntiefacebook-github-bot
authored andcommitted
Migrate/audit JSDoc on public APIs (Components)
Summary: I asked Claude to crawl reactnative.dev and insert JSDoc comments into our core components, based on some manual-pass starting points. This is also a quality pass on all modules touched, standardising JSDoc use, and in some cases merging/removing redundant information (preferring the docs we’ve maintained more carefully on the website). Commit 1 of 2 (Components). Replaces #57380. Changelog: [Internal] Differential Revision: D110195869
1 parent 6f3375a commit a148a0a

22 files changed

Lines changed: 854 additions & 1045 deletions

packages/react-native/Libraries/Components/Button.js

Lines changed: 88 additions & 180 deletions
Original file line numberDiff line numberDiff line change
@@ -30,262 +30,170 @@ import * as React from 'react';
3030
/** @build-types emit-as-interface Uniwind compatibility */
3131
export type ButtonProps = Readonly<{
3232
/**
33-
Text to display inside the button. On Android the given title will be
34-
converted to the uppercased form.
33+
* Text to display inside the button. On Android the given title will be
34+
* converted to the uppercased form.
3535
*/
3636
title: string,
3737

3838
/**
39-
Handler to be called when the user taps the button. The first function
40-
argument is an event in form of [GestureResponderEvent](pressevent).
39+
* Handler called when the user taps the button.
4140
*/
4241
onPress?: (event?: GestureResponderEvent) => unknown,
4342

4443
/**
45-
If `true`, doesn't play system sound on touch.
46-
47-
@platform android
48-
49-
@default false
44+
* If `true`, doesn't play system sound on touch.
45+
*
46+
* @platform android
47+
*
48+
* @default `false`
5049
*/
5150
touchSoundDisabled?: ?boolean,
5251

5352
/**
54-
Color of the text (iOS), or background color of the button (Android).
55-
56-
@default {@platform android} '#2196F3'
57-
@default {@platform ios} '#007AFF'
53+
* Color of the text (iOS), or background color of the button (Android).
54+
*
55+
* @default {@platform android} `'#2196F3'`
56+
* @default {@platform ios} `'#007AFF'`
5857
*/
5958
color?: ?ColorValue,
6059

6160
/**
62-
TV preferred focus.
63-
64-
@platform tv
65-
66-
@default false
67-
@deprecated Use `focusable` instead
61+
* TV preferred focus.
62+
*
63+
* @platform tv
64+
*
65+
* @default `false`
66+
* @deprecated Use `focusable` instead
6867
*/
6968
hasTVPreferredFocus?: ?boolean,
7069

7170
/**
72-
Designates the next view to receive focus when the user navigates down. See
73-
the [Android documentation][android:nextFocusDown].
74-
75-
[android:nextFocusDown]:
76-
https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusDown
77-
78-
@platform android, tv
71+
* Designates the next view to receive focus when the user navigates down. See
72+
* the [Android documentation][android:nextFocusDown].
73+
*
74+
* [android:nextFocusDown]:
75+
* https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusDown
76+
*
77+
* @platform android, tv
7978
*/
8079
nextFocusDown?: ?number,
8180

8281
/**
83-
Designates the next view to receive focus when the user navigates forward.
84-
See the [Android documentation][android:nextFocusForward].
85-
86-
[android:nextFocusForward]:
87-
https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusForward
88-
89-
@platform android, tv
82+
* Designates the next view to receive focus when the user navigates forward.
83+
* See the [Android documentation][android:nextFocusForward].
84+
*
85+
* [android:nextFocusForward]:
86+
* https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusForward
87+
*
88+
* @platform android, tv
9089
*/
9190
nextFocusForward?: ?number,
9291

9392
/**
94-
Designates the next view to receive focus when the user navigates left. See
95-
the [Android documentation][android:nextFocusLeft].
96-
97-
[android:nextFocusLeft]:
98-
https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusLeft
99-
100-
@platform android, tv
93+
* Designates the next view to receive focus when the user navigates left. See
94+
* the [Android documentation][android:nextFocusLeft].
95+
*
96+
* [android:nextFocusLeft]:
97+
* https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusLeft
98+
*
99+
* @platform android, tv
101100
*/
102101
nextFocusLeft?: ?number,
103102

104103
/**
105-
Designates the next view to receive focus when the user navigates right. See
106-
the [Android documentation][android:nextFocusRight].
107-
108-
[android:nextFocusRight]:
109-
https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusRight
110-
111-
@platform android, tv
104+
* Designates the next view to receive focus when the user navigates right. See
105+
* the [Android documentation][android:nextFocusRight].
106+
*
107+
* [android:nextFocusRight]:
108+
* https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusRight
109+
*
110+
* @platform android, tv
112111
*/
113112
nextFocusRight?: ?number,
114113

115114
/**
116-
Designates the next view to receive focus when the user navigates up. See
117-
the [Android documentation][android:nextFocusUp].
118-
119-
[android:nextFocusUp]:
120-
https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusUp
121-
122-
@platform android, tv
115+
* Designates the next view to receive focus when the user navigates up. See
116+
* the [Android documentation][android:nextFocusUp].
117+
*
118+
* [android:nextFocusUp]:
119+
* https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusUp
120+
*
121+
* @platform android, tv
123122
*/
124123
nextFocusUp?: ?number,
125124

126125
/**
127-
Text to display for blindness accessibility features.
126+
* Text to display for blindness accessibility features.
128127
*/
129128
accessibilityLabel?: ?string,
129+
130130
/**
131-
* Alias for accessibilityLabel https://reactnative.dev/docs/view#accessibilitylabel
132-
* https://github.com/facebook/react-native/issues/34424
131+
* Alias for `accessibilityLabel`.
133132
*/
134133
'aria-label'?: ?string,
135-
/**
136-
If `true`, disable all interactions for this component.
137134

138-
@default false
135+
/**
136+
* If `true`, disable all interactions for this component.
137+
*
138+
* @default `false`
139139
*/
140140
disabled?: ?boolean,
141141

142-
/**
143-
Used to locate this view in end-to-end tests.
144-
*/
145142
testID?: ?string,
146143

147-
/**
148-
* Accessibility props.
149-
*/
150144
accessible?: ?boolean,
151145
accessibilityActions?: ?ReadonlyArray<AccessibilityActionInfo>,
152146
onAccessibilityAction?: ?(event: AccessibilityActionEvent) => unknown,
153147
accessibilityState?: ?AccessibilityState,
154148

155149
/**
156-
* alias for accessibilityState
157-
*
158-
* see https://reactnative.dev/docs/accessibility#accessibilitystate
150+
* Alias for `accessibilityState`.
159151
*/
160152
'aria-busy'?: ?boolean,
161153
'aria-checked'?: ?boolean | 'mixed',
162154
'aria-disabled'?: ?boolean,
163155
'aria-expanded'?: ?boolean,
164156
'aria-selected'?: ?boolean,
165157

166-
/**
167-
* [Android] Controlling if a view fires accessibility events and if it is reported to accessibility services.
168-
*/
169158
importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
170159
accessibilityHint?: ?string,
160+
161+
/**
162+
* A BCP 47 language tag for the screen reader to use when reading text
163+
* content.
164+
*
165+
* @platform ios
166+
*/
171167
accessibilityLanguage?: ?Stringish,
172168
}>;
173169

174-
/**
175-
A basic button component that should render nicely on any platform. Supports a
176-
minimal level of customization.
177-
178-
If this button doesn't look right for your app, you can build your own button
179-
using [TouchableOpacity](touchableopacity) or
180-
[TouchableWithoutFeedback](touchablewithoutfeedback). For inspiration, look at
181-
the [source code for this button component][button:source]. Or, take a look at
182-
the [wide variety of button components built by the community]
183-
[button:examples].
184-
185-
[button:source]:
186-
https://github.com/facebook/react-native/blob/HEAD/Libraries/Components/Button.js
187-
188-
```jsx
189-
<Button
190-
onPress={onPressLearnMore}
191-
title="Learn More"
192-
color="#841584"
193-
accessibilityLabel="Learn more about this purple button"
194-
/>
195-
```
196-
197-
```SnackPlayer name=Button%20Example
198-
import React from 'react';
199-
import { StyleSheet, Button, View, SafeAreaView, Text, Alert } from 'react-native';
200-
201-
const Separator = () => (
202-
<View style={styles.separator} />
203-
);
204-
205-
const App = () => (
206-
<SafeAreaView style={styles.container}>
207-
<View>
208-
<Text style={styles.title}>
209-
The title and onPress handler are required. It is recommended to set accessibilityLabel to help make your app usable by everyone.
210-
</Text>
211-
<Button
212-
title="Press me"
213-
onPress={() => Alert.alert('Simple Button pressed')}
214-
/>
215-
</View>
216-
<Separator />
217-
<View>
218-
<Text style={styles.title}>
219-
Adjust the color in a way that looks standard on each platform. On iOS, the color prop controls the color of the text. On Android, the color adjusts the background color of the button.
220-
</Text>
221-
<Button
222-
title="Press me"
223-
color="#f194ff"
224-
onPress={() => Alert.alert('Button with adjusted color pressed')}
225-
/>
226-
</View>
227-
<Separator />
228-
<View>
229-
<Text style={styles.title}>
230-
All interaction for the component are disabled.
231-
</Text>
232-
<Button
233-
title="Press me"
234-
disabled
235-
onPress={() => Alert.alert('Cannot press this one')}
236-
/>
237-
</View>
238-
<Separator />
239-
<View>
240-
<Text style={styles.title}>
241-
This layout strategy lets the title define the width of the button.
242-
</Text>
243-
<View style={styles.fixToText}>
244-
<Button
245-
title="Left button"
246-
onPress={() => Alert.alert('Left button pressed')}
247-
/>
248-
<Button
249-
title="Right button"
250-
onPress={() => Alert.alert('Right button pressed')}
251-
/>
252-
</View>
253-
</View>
254-
</SafeAreaView>
255-
);
256-
257-
const styles = StyleSheet.create({
258-
container: {
259-
flex: 1,
260-
justifyContent: 'center',
261-
marginHorizontal: 16,
262-
},
263-
title: {
264-
textAlign: 'center',
265-
marginVertical: 8,
266-
},
267-
fixToText: {
268-
flexDirection: 'row',
269-
justifyContent: 'space-between',
270-
},
271-
separator: {
272-
marginVertical: 8,
273-
borderBottomColor: '#737373',
274-
borderBottomWidth: StyleSheet.hairlineWidth,
275-
},
276-
});
277-
278-
export default App;
279-
```
280-
*/
281-
282170
const NativeTouchable:
283171
| typeof TouchableNativeFeedback
284172
| typeof TouchableOpacity =
285173
Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
286174

287175
export type ButtonInstance = React.ElementRef<typeof NativeTouchable>;
288176

177+
/**
178+
* A basic button component that should render nicely on any platform. Supports a
179+
* minimal level of customization.
180+
*
181+
* If this button doesn't look right for your app, you can build your own button
182+
* using `Pressable`.
183+
*
184+
* Example:
185+
*
186+
* ```tsx
187+
* <Button
188+
* onPress={onPressLearnMore}
189+
* title="Learn More"
190+
* color="#841584"
191+
* accessibilityLabel="Learn more about this purple button"
192+
* />
193+
* ```
194+
*
195+
* @see https://reactnative.dev/docs/button
196+
*/
289197
const Button: component(
290198
ref?: React.RefSetter<ButtonInstance>,
291199
...props: ButtonProps

0 commit comments

Comments
 (0)