diff --git a/packages/rn-tester/android/app/src/main/res/drawable/magnify.png b/packages/rn-tester/android/app/src/main/res/drawable/magnify.png new file mode 100644 index 00000000000000..a73c2b27eb8890 Binary files /dev/null and b/packages/rn-tester/android/app/src/main/res/drawable/magnify.png differ diff --git a/packages/rn-tester/e2e/__tests__/TextInput-test.js b/packages/rn-tester/e2e/__tests__/TextInput-test.js index d262221f5fe23b..2aad978c0f2ddc 100644 --- a/packages/rn-tester/e2e/__tests__/TextInput-test.js +++ b/packages/rn-tester/e2e/__tests__/TextInput-test.js @@ -19,44 +19,51 @@ describe('TextInput', () => { await device.reloadReactNative(); await openComponentWithLabel( 'TextInput', - 'Single and multi-line text inputs.', + 'TextInput A foundational component for inputting text into the app via a keyboard.', ); }); - it('Live rewrite with spaces should replace spaces and enforce max length', async () => { - await openExampleWithTitle('Live Re-Write \\('); + it('should accept input', async () => { + await openExampleWithTitle('TextInput with autoFocus={true}'); - await element(by.id('rewrite_sp_underscore_input')).typeText( - 'this is a long sentence', - ); - await expect(element(by.id('rewrite_sp_underscore_input'))).toHaveText( - 'this_is_a_long_sente', + await element(by.id('check_text_input')).typeText('Check text input'); + await expect(element(by.id('check_text_input'))).toHaveText( + 'Check text input', ); }); - it('Live rewrite with no spaces should remove spaces', async () => { - await openExampleWithTitle('Live Re-Write \\(no spaces'); + it('should not allow spaces in no-spaces-input', async () => { + await openExampleWithTitle( + "TextInput that replaces spaces with underscore '_'", + ); - await element(by.id('rewrite_no_sp_input')).typeText( + await element(by.id('rewrite_sp_underscore_input')).typeText( 'this is a long sentence', ); - await expect(element(by.id('rewrite_no_sp_input'))).toHaveText( - 'thisisalongsentence', + + await expect(element(by.id('rewrite_sp_underscore_input'))).toHaveText( + 'this_is_a_long_sentence', ); }); - it('Live rewrite with clear should remove spaces and clear', async () => { - await openExampleWithTitle('and clear'); + it('should not exceed maximum length when maxLength is used', async () => { + await openExampleWithTitle('TextInput with maxLength={limit}'); - await element(by.id('rewrite_clear_input')).typeText( - 'this is a long sentence', + await element(by.id('max_length_input')).typeText( + 'this is a very long sentence.', ); - await expect(element(by.id('rewrite_clear_input'))).toHaveText( - 'thisisalongsentence', + + await expect(element(by.id('max_length_input'))).toHaveText( + 'this is a very long ', ); + }); + it("should be cleared by tapping 'Clear' button", async () => { + await openExampleWithTitle("TextInput along with 'Clear' button"); + await element(by.id('clear_text_input')).typeText( + 'this text needs to be cleared', + ); await element(by.id('rewrite_clear_button')).tap(); - - await expect(element(by.id('rewrite_clear_input'))).toHaveText(''); + await expect(element(by.id('clear_text_input'))).toHaveText(''); }); }); diff --git a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js index 38fa2b3cdb2409..f9e8e6c12e5089 100644 --- a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js +++ b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js @@ -751,6 +751,7 @@ class AnnounceForAccessibility extends React.Component<{}> { } exports.title = 'Accessibility'; +exports.documentationURL = 'https://reactnative.dev/docs/accessibilityinfo'; exports.description = 'Examples of using Accessibility APIs.'; exports.examples = [ { diff --git a/packages/rn-tester/js/examples/Animated/AnimatedExample.js b/packages/rn-tester/js/examples/Animated/AnimatedExample.js index 76c546dc9e06b1..3c97aff2d94826 100644 --- a/packages/rn-tester/js/examples/Animated/AnimatedExample.js +++ b/packages/rn-tester/js/examples/Animated/AnimatedExample.js @@ -33,6 +33,7 @@ const styles = StyleSheet.create({ exports.framework = 'React'; exports.title = 'Animated - Examples'; +exports.documentationURL = 'https://reactnative.dev/docs/animated'; exports.description = ('Animated provides a powerful ' + 'and easy-to-use API for building modern, ' + 'interactive user experiences.': string); diff --git a/packages/rn-tester/js/examples/AppState/AppStateExample.js b/packages/rn-tester/js/examples/AppState/AppStateExample.js index 9e7f17eefc1201..c787cb0df4143e 100644 --- a/packages/rn-tester/js/examples/AppState/AppStateExample.js +++ b/packages/rn-tester/js/examples/AppState/AppStateExample.js @@ -71,6 +71,7 @@ class AppStateSubscription extends React.Component< } exports.title = 'AppState'; +exports.documentationURL = 'https://reactnative.dev/docs/appstate'; exports.description = 'app background status'; exports.examples = [ { diff --git a/packages/rn-tester/js/examples/Appearance/AppearanceExample.js b/packages/rn-tester/js/examples/Appearance/AppearanceExample.js index bc2d074b2be75e..cccf41bb7efa6d 100644 --- a/packages/rn-tester/js/examples/Appearance/AppearanceExample.js +++ b/packages/rn-tester/js/examples/Appearance/AppearanceExample.js @@ -77,6 +77,7 @@ const ThemedText = props => ( ); exports.title = 'Appearance'; +exports.documentationURL = 'https://reactnative.dev/docs/appearance'; exports.description = 'Light and dark user interface examples.'; exports.examples = [ { diff --git a/packages/rn-tester/js/examples/AsyncStorage/AsyncStorageExample.js b/packages/rn-tester/js/examples/AsyncStorage/AsyncStorageExample.js deleted file mode 100644 index cbbb13acdbd72e..00000000000000 --- a/packages/rn-tester/js/examples/AsyncStorage/AsyncStorageExample.js +++ /dev/null @@ -1,103 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @format - * @flow - */ - -'use strict'; - -const React = require('react'); -const {AsyncStorage, PickerIOS, Text, View} = require('react-native'); -const PickerItemIOS = PickerIOS.Item; - -const STORAGE_KEY = '@AsyncStorageExample:key'; -const COLORS = ['red', 'orange', 'yellow', 'green', 'blue']; - -class BasicStorageExample extends React.Component<{...}, $FlowFixMeState> { - state = { - selectedValue: COLORS[0], - messages: [], - }; - - componentDidMount() { - this._loadInitialState().done(); - } - - _loadInitialState = async () => { - try { - const value = await AsyncStorage.getItem(STORAGE_KEY); - if (value !== null) { - this.setState({selectedValue: value}); - this._appendMessage('Recovered selection from disk: ' + value); - } else { - this._appendMessage('Initialized with no selection on disk.'); - } - } catch (error) { - this._appendMessage('AsyncStorage error: ' + error.message); - } - }; - - render() { - const color = this.state.selectedValue; - return ( - - - {COLORS.map(value => ( - - ))} - - - {'Selected: '} - {this.state.selectedValue} - - - - Press here to remove from storage. - - - Messages: - {this.state.messages.map(m => ( - {m} - ))} - - ); - } - - _onValueChange = async selectedValue => { - this.setState({selectedValue}); - try { - await AsyncStorage.setItem(STORAGE_KEY, selectedValue); - this._appendMessage('Saved selection to disk: ' + selectedValue); - } catch (error) { - this._appendMessage('AsyncStorage error: ' + error.message); - } - }; - - _removeStorage = async () => { - try { - await AsyncStorage.removeItem(STORAGE_KEY); - this._appendMessage('Selection removed from disk.'); - } catch (error) { - this._appendMessage('AsyncStorage error: ' + error.message); - } - }; - - _appendMessage = message => { - this.setState({messages: this.state.messages.concat(message)}); - }; -} - -exports.title = 'AsyncStorage'; -exports.description = 'Asynchronous local disk storage.'; -exports.examples = [ - { - title: 'Basics - getItem, setItem, removeItem', - render(): React.Element { - return ; - }, - }, -]; diff --git a/packages/rn-tester/js/examples/Button/ButtonExample.js b/packages/rn-tester/js/examples/Button/ButtonExample.js index 49340a2d4c14a2..00e8110f6dc2fe 100644 --- a/packages/rn-tester/js/examples/Button/ButtonExample.js +++ b/packages/rn-tester/js/examples/Button/ButtonExample.js @@ -23,6 +23,7 @@ exports.displayName = 'ButtonExample'; exports.framework = 'React'; exports.category = 'UI'; exports.title = 'Button'; +exports.documentationURL = 'https://reactnative.dev/docs/button'; exports.description = 'Simple React Native button component.'; exports.examples = [ diff --git a/packages/rn-tester/js/examples/Clipboard/ClipboardExample.js b/packages/rn-tester/js/examples/Clipboard/ClipboardExample.js deleted file mode 100644 index 791f3d7eb5e671..00000000000000 --- a/packages/rn-tester/js/examples/Clipboard/ClipboardExample.js +++ /dev/null @@ -1,68 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @format - * @flow strict-local - */ - -'use strict'; - -const React = require('react'); - -const {Clipboard, View, Text, StyleSheet} = require('react-native'); - -type Props = $ReadOnly<{||}>; -type State = {| - content: string, -|}; - -class ClipboardExample extends React.Component { - state = { - content: 'Content will appear here', - }; - - _setClipboardContent = async () => { - Clipboard.setString('Hello World'); - try { - const content = await Clipboard.getString(); - this.setState({content}); - } catch (e) { - this.setState({content: e.message}); - } - }; - - render() { - return ( - - - Tap to put "Hello World" in the clipboard - - {this.state.content} - - ); - } -} - -const styles = StyleSheet.create({ - label: { - color: 'blue', - }, - content: { - color: 'red', - marginTop: 20, - }, -}); - -exports.title = 'Clipboard'; -exports.description = 'Show Clipboard contents.'; -exports.examples = [ - { - title: 'Clipboard.setString() and getString()', - render(): React.Node { - return ; - }, - }, -]; diff --git a/packages/rn-tester/js/examples/DatePicker/DatePickerAndroidExample.js b/packages/rn-tester/js/examples/DatePicker/DatePickerAndroidExample.js deleted file mode 100644 index e52037f5aebcfa..00000000000000 --- a/packages/rn-tester/js/examples/DatePicker/DatePickerAndroidExample.js +++ /dev/null @@ -1,170 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @format - */ - -'use strict'; - -const React = require('react'); -const { - DatePickerAndroid, - StyleSheet, - Text, - TouchableWithoutFeedback, -} = require('react-native'); - -const RNTesterBlock = require('../../components/RNTesterBlock'); -const RNTesterPage = require('../../components/RNTesterPage'); - -type Props = $ReadOnly<{||}>; -type State = {| - presetDate: Date, - simpleDate: Date, - spinnerDate: Date, - calendarDate: Date, - defaultDate: Date, - allDate: Date, - simpleText: string, - spinnerText: string, - calendarText: string, - defaultText: string, - minText: string, - maxText: string, - presetText: string, - allText: string, -|}; - -class DatePickerAndroidExample extends React.Component { - state = { - presetDate: new Date(2020, 4, 5), - simpleDate: new Date(2020, 4, 5), - spinnerDate: new Date(2020, 4, 5), - calendarDate: new Date(2020, 4, 5), - defaultDate: new Date(2020, 4, 5), - allDate: new Date(2020, 4, 5), - simpleText: 'pick a date', - spinnerText: 'pick a date', - calendarText: 'pick a date', - defaultText: 'pick a date', - minText: 'pick a date, no earlier than today', - maxText: 'pick a date, no later than today', - presetText: 'pick a date, preset to 2020/5/5', - allText: 'pick a date between 2020/5/1 and 2020/5/10', - }; - - showPicker = async (stateKey, options) => { - try { - const newState = {}; - const {action, year, month, day} = await DatePickerAndroid.open(options); - if (action === DatePickerAndroid.dismissedAction) { - newState[stateKey + 'Text'] = 'dismissed'; - } else { - const date = new Date(year, month, day); - newState[stateKey + 'Text'] = date.toLocaleDateString(); - newState[stateKey + 'Date'] = date; - } - this.setState(newState); - } catch ({code, message}) { - console.warn(`Error in example '${stateKey}': `, message); - } - }; - - render() { - return ( - - - - {this.state.simpleText} - - - - - {this.state.spinnerText} - - - - - {this.state.calendarText} - - - - - {this.state.defaultText} - - - - - {this.state.presetText} - - - - - {this.state.minText} - - - - - {this.state.maxText} - - - - - {this.state.allText} - - - - ); - } -} - -const styles = StyleSheet.create({ - text: { - color: 'black', - }, -}); - -exports.title = 'DatePickerAndroid'; -exports.description = 'Standard Android date picker dialog'; -exports.examples = [ - { - title: 'Simple date picker', - render: function(): React.Element { - return ; - }, - }, -]; diff --git a/packages/rn-tester/js/examples/DatePicker/DatePickerIOSExample.js b/packages/rn-tester/js/examples/DatePicker/DatePickerIOSExample.js deleted file mode 100644 index f13ba5e4a95592..00000000000000 --- a/packages/rn-tester/js/examples/DatePicker/DatePickerIOSExample.js +++ /dev/null @@ -1,150 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @format - * @flow - */ - -'use strict'; - -const React = require('react'); -const {DatePickerIOS, StyleSheet, Text, View} = require('react-native'); - -type State = {| - date: Date, -|}; - -type Props = {| - children: (State, (Date) => void) => React.Node, -|}; - -class WithDatePickerData extends React.Component { - state = { - date: new Date(), - }; - - onDateChange = date => { - this.setState({date: date}); - }; - - render() { - return ( - - - - {this.state.date.toLocaleDateString()} - -   - - {this.state.date.toLocaleTimeString([], { - hour: '2-digit', - minute: '2-digit', - })} - - - {this.props.children(this.state, this.onDateChange)} - - ); - } -} - -type LabelProps = {| - label: string, - children: React.Node, -|}; - -class WithLabel extends React.Component { - render() { - return ( - - - {this.props.label} - - {this.props.children} - - ); - } -} - -const styles = StyleSheet.create({ - textinput: { - height: 26, - width: 50, - borderWidth: 0.5, - borderColor: '#0f0f0f', - padding: 4, - fontSize: 13, - }, - labelContainer: { - flexDirection: 'row', - alignItems: 'center', - marginVertical: 2, - }, - labelView: { - marginRight: 10, - paddingVertical: 2, - }, - label: { - fontWeight: '500', - }, -}); - -exports.title = 'DatePickerIOS'; -exports.description = 'Select dates and times using the native UIDatePicker.'; -exports.examples = [ - { - title: 'Date and time picker', - render: function(): React.Element { - return ( - - {(state, onDateChange) => ( - - )} - - ); - }, - }, - { - title: 'Date only picker', - render: function(): React.Element { - return ( - - {(state, onDateChange) => ( - - )} - - ); - }, - }, - { - title: 'Time only picker, 20-minute interval', - render: function(): React.Element { - return ( - - {(state, onDateChange) => ( - - )} - - ); - }, - }, -]; diff --git a/packages/rn-tester/js/examples/DevSettings/DevSettingsExample.js b/packages/rn-tester/js/examples/DevSettings/DevSettingsExample.js index 4428c8fa0e52eb..99228ffe070039 100644 --- a/packages/rn-tester/js/examples/DevSettings/DevSettingsExample.js +++ b/packages/rn-tester/js/examples/DevSettings/DevSettingsExample.js @@ -14,6 +14,7 @@ import * as React from 'react'; import {Alert, Button, DevSettings} from 'react-native'; exports.title = 'DevSettings'; +exports.documentationURL = 'https://reactnative.dev/docs/devsettings'; exports.description = 'Customize the development settings'; exports.examples = [ { diff --git a/packages/rn-tester/js/examples/Dimensions/DimensionsExample.js b/packages/rn-tester/js/examples/Dimensions/DimensionsExample.js index b5d0e4fe630396..ff4526b6322cf7 100644 --- a/packages/rn-tester/js/examples/Dimensions/DimensionsExample.js +++ b/packages/rn-tester/js/examples/Dimensions/DimensionsExample.js @@ -41,6 +41,7 @@ class DimensionsSubscription extends React.Component< } exports.title = 'Dimensions'; +exports.documentationURL = 'https://reactnative.dev/docs/dimensions'; exports.description = 'Dimensions of the viewport'; exports.examples = [ { diff --git a/packages/rn-tester/js/examples/FlatList/FlatListExample.js b/packages/rn-tester/js/examples/FlatList/FlatListExample.js index e6e923c7160518..63ec3de45ba85d 100644 --- a/packages/rn-tester/js/examples/FlatList/FlatListExample.js +++ b/packages/rn-tester/js/examples/FlatList/FlatListExample.js @@ -273,6 +273,7 @@ const styles = StyleSheet.create({ }); exports.title = 'FlatList'; +exports.documentationURL = 'https://reactnative.dev/docs/flatlist'; exports.category = 'ListViews'; exports.description = 'Performant, scrollable list of data.'; exports.simpleExampleContainer = true; diff --git a/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js b/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js index 1e6fb8a8765c8d..c9f66cee53ce26 100644 --- a/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js +++ b/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js @@ -108,6 +108,7 @@ const styles = StyleSheet.create({ }); exports.title = 'KeyboardAvoidingView'; +exports.documentationURL = 'https://reactnative.dev/docs/keyboardavoidingview'; exports.description = 'Base component for views that automatically adjust their height or position to move out of the way of the keyboard.'; exports.examples = [ diff --git a/packages/rn-tester/js/examples/Layout/LayoutAnimationExample.js b/packages/rn-tester/js/examples/Layout/LayoutAnimationExample.js index 62c883246457b8..a1848987e9c100 100644 --- a/packages/rn-tester/js/examples/Layout/LayoutAnimationExample.js +++ b/packages/rn-tester/js/examples/Layout/LayoutAnimationExample.js @@ -345,6 +345,7 @@ const styles = StyleSheet.create({ }); exports.title = 'Layout Animation'; +exports.documentationURL = 'https://reactnative.dev/docs/layoutanimation'; exports.description = 'Layout animation'; exports.examples = [ { diff --git a/packages/rn-tester/js/examples/Linking/LinkingExample.js b/packages/rn-tester/js/examples/Linking/LinkingExample.js index df63aadce14ca7..4dd2ad27efdacb 100644 --- a/packages/rn-tester/js/examples/Linking/LinkingExample.js +++ b/packages/rn-tester/js/examples/Linking/LinkingExample.js @@ -117,6 +117,7 @@ const styles = StyleSheet.create({ }); exports.title = 'Linking'; +exports.documentationURL = 'https://reactnative.dev/docs/linking'; exports.description = 'Shows how to use Linking to open URLs.'; exports.examples = [ { diff --git a/packages/rn-tester/js/examples/MaskedView/MaskedViewExample.js b/packages/rn-tester/js/examples/MaskedView/MaskedViewExample.js deleted file mode 100644 index a97e570955516a..00000000000000 --- a/packages/rn-tester/js/examples/MaskedView/MaskedViewExample.js +++ /dev/null @@ -1,236 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @format - * @flow strict-local - */ - -'use strict'; - -const React = require('react'); - -const { - Animated, - Image, - MaskedViewIOS, - StyleSheet, - Text, - View, -} = require('react-native'); - -type Props = $ReadOnly<{||}>; -type ChangingChildrenState = {| - alternateChildren: boolean, -|}; - -class AnimatedMaskExample extends React.Component { - _maskRotateAnimatedValue = new Animated.Value(0); - _maskScaleAnimatedValue = new Animated.Value(1); - - componentDidMount() { - Animated.loop( - Animated.sequence([ - Animated.timing(this._maskScaleAnimatedValue, { - toValue: 1.3, - duration: 750, - useNativeDriver: true, - }), - Animated.timing(this._maskScaleAnimatedValue, { - toValue: 1, - duration: 750, - useNativeDriver: true, - }), - ]), - ).start(); - - Animated.loop( - Animated.timing(this._maskRotateAnimatedValue, { - toValue: 360, - duration: 2000, - useNativeDriver: true, - }), - ).start(); - } - - render(): React.Node { - return ( - - - Basic Mask - - }> - =0.38.0) - Flow error detected during the - * deployment of v0.38.0. To see the error, remove this - * comment and run flow */ - outputRange: ['0deg', '360deg'], - }), - }, - ], - }}> - - - - - - ); - } -} - -class ChangingChildrenMaskExample extends React.Component< - Props, - ChangingChildrenState, -> { - state: ChangingChildrenState = { - alternateChildren: true, - }; - - componentDidMount() { - setInterval(() => { - this.setState(state => ({ - alternateChildren: !state.alternateChildren, - })); - }, 1000); - } - - render(): React.Node { - return ( - - - Basic Mask - - }> - {this.state.alternateChildren - ? [ - , - , - ] - : null} - - - ); - } -} - -const styles = StyleSheet.create({ - exampleWrapperStyle: { - width: 340, - height: 300, - alignSelf: 'center', - }, - imageStyle: { - height: 200, - width: 200, - }, - maskContainerStyle: { - flex: 1, - backgroundColor: 'transparent', - justifyContent: 'center', - alignItems: 'center', - }, - maskTextStyle: { - backgroundColor: 'transparent', - fontSize: 40, - fontWeight: 'bold', - }, - blueStyle: { - flex: 1, - backgroundColor: 'blue', - }, - redStyle: { - flex: 1, - backgroundColor: 'red', - }, - grayStyle: { - backgroundColor: '#eeeeee', - }, - flexStyle: { - flex: 1, - }, -}); - -exports.title = 'MaskedViewIOS'; -exports.description = - 'Renders the child view with a mask specified in the `renderMask` prop.'; -exports.examples = [ - { - title: 'Basic Mask', - render: function(): React.Element { - return ( - - - Basic Mask - - }> - - - - - ); - }, - }, - { - title: 'Image Mask', - render: function(): React.Element { - return ( - - - - - }> - - - - - - ); - }, - }, - { - title: 'Animated Mask', - render: function(): React.Element { - return ; - }, - }, - { - title: 'Mask w/ Changing Children', - render: function(): React.Element { - return ; - }, - }, -]; diff --git a/packages/rn-tester/js/examples/Modal/ModalExample.js b/packages/rn-tester/js/examples/Modal/ModalExample.js index 1b0dcea4255a68..7db870dbe59aff 100644 --- a/packages/rn-tester/js/examples/Modal/ModalExample.js +++ b/packages/rn-tester/js/examples/Modal/ModalExample.js @@ -28,6 +28,7 @@ const Item = Picker.Item; exports.displayName = (undefined: ?string); exports.framework = 'React'; exports.title = 'Modal'; +exports.documentationURL = 'https://reactnative.dev/docs/modal'; exports.description = 'Component for presenting modal views.'; class Button extends React.Component<$FlowFixMeProps, $FlowFixMeState> { diff --git a/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js b/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js index db85851eb38306..bcbab2be19f857 100644 --- a/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js +++ b/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js @@ -141,6 +141,7 @@ const styles = StyleSheet.create({ }); exports.title = 'PanResponder Sample'; +exports.documentationURL = 'https://reactnative.dev/docs/panresponder'; exports.description = 'Shows the Use of PanResponder to provide basic gesture handling'; exports.simpleExampleContainer = true; diff --git a/packages/rn-tester/js/examples/Picker/PickerExample.js b/packages/rn-tester/js/examples/Picker/PickerExample.js deleted file mode 100644 index de02f42ffce1ab..00000000000000 --- a/packages/rn-tester/js/examples/Picker/PickerExample.js +++ /dev/null @@ -1,220 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @format - * @flow strict-local - */ - -'use strict'; - -const React = require('react'); - -const {Picker, StyleSheet, Text} = require('react-native'); - -const Item = Picker.Item; - -type State = {value: string | number, ...}; - -class BasicPickerExample extends React.Component<{...}, State> { - state: State = { - value: 'key1', - }; - - render(): React.Node { - return ( - this.setState({value: v})}> - - - - ); - } -} - -class DisabledPickerExample extends React.Component<{...}, State> { - state: State = { - value: 'key1', - }; - - render(): React.Node { - return ( - - - - - ); - } -} - -class DropdownPickerExample extends React.Component<{...}, State> { - state: State = { - value: 'key1', - }; - - render(): React.Node { - return ( - this.setState({value: v})} - mode="dropdown"> - - - - ); - } -} - -class PromptPickerExample extends React.Component<{...}, State> { - state: State = { - value: 'key1', - }; - - render(): React.Node { - return ( - this.setState({value: v})} - prompt="Pick one, just one"> - - - - ); - } -} - -type ColorState = {color: string | number, ...}; - -class ColorPickerExample extends React.Component<{...}, ColorState> { - state: ColorState = { - color: 'red', - }; - - render(): React.Node { - return ( - <> - this.setState({color: v})} - mode="dropdown"> - - - - - this.setState({color: v})} - mode="dialog"> - - - - - - ); - } -} -class AccessibilityLabelPickerExample extends React.Component<{||}, State> { - state: State = { - value: '3', - }; - - render(): React.Node { - return ( - this.setState({value: v})}> - - - - - ); - } -} - -const styles = StyleSheet.create({ - picker: { - width: 100, - }, -}); - -exports.title = 'Picker'; -exports.description = - 'Provides multiple options to choose from, using either a dropdown menu or a dialog.'; -exports.examples = [ - { - title: 'Basic Picker', - render: function(): React.Element { - return ; - }, - }, - { - title: 'Disabled Picker', - render: function(): React.Element { - return ; - }, - }, - { - title: 'Dropdown Picker', - render: function(): React.Element { - return ; - }, - }, - { - title: 'Picker with prompt message', - render: function(): React.Element { - return ; - }, - }, - { - title: 'Accessibility Label pickers', - render: function(): React.Element { - return ; - }, - }, - { - title: 'Picker with no listener', - render: function(): React.Element { - return ( - /* $FlowFixMe(>=0.99.0 site=react_native_fb) This comment suppresses an - * error found when Flow v0.99 was deployed. To see the error, delete - * this comment and run Flow. */ - <> - - - - - - Cannot change the value of this picker because it doesn't update - selectedValue. - - - ); - }, - }, - { - title: 'Colorful pickers', - render: function(): React.Element { - return ; - }, - }, - { - title: 'AccessibilityLabel pickers', - render: function(): React.Element { - return ; - }, - }, -]; diff --git a/packages/rn-tester/js/examples/Picker/PickerIOSExample.js b/packages/rn-tester/js/examples/Picker/PickerIOSExample.js deleted file mode 100644 index e6f77a2f0fac9d..00000000000000 --- a/packages/rn-tester/js/examples/Picker/PickerIOSExample.js +++ /dev/null @@ -1,190 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @format - * @flow - */ - -'use strict'; - -const React = require('react'); -const {PickerIOS, Text, View} = require('react-native'); - -const PickerItemIOS = PickerIOS.Item; - -const CAR_MAKES_AND_MODELS = { - amc: { - name: 'AMC', - models: ['AMX', 'Concord', 'Eagle', 'Gremlin', 'Matador', 'Pacer'], - }, - alfa: { - name: 'Alfa-Romeo', - models: [ - '159', - '4C', - 'Alfasud', - 'Brera', - 'GTV6', - 'Giulia', - 'MiTo', - 'Spider', - ], - }, - aston: { - name: 'Aston Martin', - models: ['DB5', 'DB9', 'DBS', 'Rapide', 'Vanquish', 'Vantage'], - }, - audi: { - name: 'Audi', - models: [ - '90', - '4000', - '5000', - 'A3', - 'A4', - 'A5', - 'A6', - 'A7', - 'A8', - 'Q5', - 'Q7', - ], - }, - austin: { - name: 'Austin', - models: ['America', 'Maestro', 'Maxi', 'Mini', 'Montego', 'Princess'], - }, - borgward: { - name: 'Borgward', - models: ['Hansa', 'Isabella', 'P100'], - }, - buick: { - name: 'Buick', - models: [ - 'Electra', - 'LaCrosse', - 'LeSabre', - 'Park Avenue', - 'Regal', - 'Roadmaster', - 'Skylark', - ], - }, - cadillac: { - name: 'Cadillac', - models: ['Catera', 'Cimarron', 'Eldorado', 'Fleetwood', 'Sedan de Ville'], - }, - chevrolet: { - name: 'Chevrolet', - models: [ - 'Astro', - 'Aveo', - 'Bel Air', - 'Captiva', - 'Cavalier', - 'Chevelle', - 'Corvair', - 'Corvette', - 'Cruze', - 'Nova', - 'SS', - 'Vega', - 'Volt', - ], - }, -}; - -class PickerExample extends React.Component<{...}, $FlowFixMeState> { - state = { - carMake: 'cadillac', - modelIndex: 3, - }; - - render() { - const make = CAR_MAKES_AND_MODELS[this.state.carMake]; - const selectionString = - make.name + ' ' + make.models[this.state.modelIndex]; - return ( - - Please choose a make for your car: - this.setState({carMake, modelIndex: 0})}> - {Object.keys(CAR_MAKES_AND_MODELS).map(carMake => ( - - ))} - - Please choose a model of {make.name}: - this.setState({modelIndex})}> - {CAR_MAKES_AND_MODELS[this.state.carMake].models.map( - (modelName, modelIndex) => ( - - ), - )} - - You selected: {selectionString} - - ); - } -} - -class PickerStyleExample extends React.Component<{...}, $FlowFixMeState> { - state = { - carMake: 'cadillac', - modelIndex: 0, - }; - - render() { - return ( - this.setState({carMake, modelIndex: 0})}> - {Object.keys(CAR_MAKES_AND_MODELS).map(carMake => ( - - ))} - - ); - } -} - -exports.displayName = (undefined: ?string); -exports.title = 'PickerIOS'; -exports.description = 'Render lists of selectable options with UIPickerView.'; -exports.examples = [ - { - title: '', - render: function(): React.Element { - return ; - }, - }, - { - title: ' with custom styling', - render: function(): React.Element { - return ; - }, - }, -]; diff --git a/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js b/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js index a7fc2accbaa2cf..d2deb17b67ac2d 100644 --- a/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js +++ b/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js @@ -301,6 +301,7 @@ const styles = StyleSheet.create({ }); exports.title = 'PlatformColor'; +exports.documentationURL = 'https://reactnative.dev/docs/platformcolor'; exports.description = 'Examples that show how PlatformColors may be used in an app.'; exports.examples = [ diff --git a/packages/rn-tester/js/examples/Pressable/PressableExample.js b/packages/rn-tester/js/examples/Pressable/PressableExample.js index 939d3e85e2592a..118ed621f36868 100644 --- a/packages/rn-tester/js/examples/Pressable/PressableExample.js +++ b/packages/rn-tester/js/examples/Pressable/PressableExample.js @@ -317,6 +317,7 @@ const styles = StyleSheet.create({ exports.displayName = (undefined: ?string); exports.description = 'Component for making views pressable.'; exports.title = 'Pressable'; +exports.documentationURL = 'https://reactnative.dev/docs/pressable'; exports.examples = [ { title: 'Change content based on Press', diff --git a/packages/rn-tester/js/examples/ProgressBarAndroid/ProgressBarAndroidExample.android.js b/packages/rn-tester/js/examples/ProgressBarAndroid/ProgressBarAndroidExample.android.js deleted file mode 100644 index 7673a725047bd9..00000000000000 --- a/packages/rn-tester/js/examples/ProgressBarAndroid/ProgressBarAndroidExample.android.js +++ /dev/null @@ -1,94 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @format - * @flow strict-local - */ - -'use strict'; - -const RNTesterBlock = require('../../components/RNTesterBlock'); -const RNTesterPage = require('../../components/RNTesterPage'); -const React = require('react'); - -const {ProgressBarAndroid: ProgressBar} = require('react-native'); - -import type {ProgressBarAndroidProps} from '../../../../Libraries/Components/ProgressBarAndroid/ProgressBarAndroid'; - -type MovingBarProps = $ReadOnly<{| - ...$Diff, - indeterminate: false, -|}>; - -type MovingBarState = {progress: number, ...}; - -class MovingBar extends React.Component { - _intervalID: ?IntervalID = null; - - state = { - progress: 0, - }; - - componentDidMount() { - this._intervalID = setInterval(() => { - const progress = (this.state.progress + 0.02) % 1; - this.setState({progress}); - }, 50); - } - - componentWillUnmount() { - if (this._intervalID != null) { - clearInterval(this._intervalID); - } - } - - render() { - return ; - } -} - -class ProgressBarAndroidExample extends React.Component<{...}> { - render(): React.Node { - return ( - - - {/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was - * found when making Flow check .android.js files. */} - - - - - - - - - {/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was - * found when making Flow check .android.js files. */} - - - - - - - - ); - } -} - -exports.title = 'ProgressBarAndroid'; -exports.description = 'Horizontal bar to show the progress of some operation.'; -exports.examples = [ - { - title: 'Simple progress bar', - render: function(): React.Element { - return ; - }, - }, -]; diff --git a/packages/rn-tester/js/examples/ProgressViewIOS/ProgressViewIOSExample.js b/packages/rn-tester/js/examples/ProgressViewIOS/ProgressViewIOSExample.js deleted file mode 100644 index 95d6885e1a753a..00000000000000 --- a/packages/rn-tester/js/examples/ProgressViewIOS/ProgressViewIOSExample.js +++ /dev/null @@ -1,103 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @format - * @flow strict-local - */ - -'use strict'; - -const React = require('react'); - -const {ProgressViewIOS, StyleSheet, View} = require('react-native'); - -type Props = {||}; -type State = {| - progress: number, -|}; - -class ProgressViewExample extends React.Component { - _rafId: ?AnimationFrameID = null; - - state = { - progress: 0, - }; - - componentDidMount() { - this.updateProgress(); - } - - componentWillUnmount() { - if (this._rafId != null) { - cancelAnimationFrame(this._rafId); - } - } - - updateProgress = () => { - const progress = this.state.progress + 0.01; - this.setState({progress}); - this._rafId = requestAnimationFrame(() => this.updateProgress()); - }; - - getProgress = offset => { - const progress = this.state.progress + offset; - return Math.sin(progress % Math.PI) % 1; - }; - - render() { - return ( - - - - - - - - ); - } -} - -const styles = StyleSheet.create({ - container: { - marginTop: -20, - backgroundColor: 'transparent', - }, - progressView: { - marginTop: 20, - }, -}); - -exports.displayName = (undefined: ?string); -exports.framework = 'React'; -exports.title = 'ProgressViewIOS'; -exports.description = 'ProgressViewIOS'; -exports.examples = [ - { - title: 'ProgressViewIOS', - render(): React.Node { - return ; - }, - }, -]; diff --git a/packages/rn-tester/js/examples/PushNotificationIOS/PushNotificationIOSExample.js b/packages/rn-tester/js/examples/PushNotificationIOS/PushNotificationIOSExample.js deleted file mode 100644 index c32bacefef2cc8..00000000000000 --- a/packages/rn-tester/js/examples/PushNotificationIOS/PushNotificationIOSExample.js +++ /dev/null @@ -1,267 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @format - * @flow - */ - -'use strict'; - -const React = require('react'); -const { - Alert, - DeviceEventEmitter, - PushNotificationIOS, - StyleSheet, - Text, - TouchableHighlight, - View, -} = require('react-native'); - -class Button extends React.Component<$FlowFixMeProps> { - render() { - return ( - - {this.props.label} - - ); - } -} - -class NotificationExample extends React.Component<{...}> { - UNSAFE_componentWillMount() { - PushNotificationIOS.addEventListener('register', this._onRegistered); - PushNotificationIOS.addEventListener( - 'registrationError', - this._onRegistrationError, - ); - PushNotificationIOS.addEventListener( - 'notification', - this._onRemoteNotification, - ); - PushNotificationIOS.addEventListener( - 'localNotification', - this._onLocalNotification, - ); - } - - componentWillUnmount() { - PushNotificationIOS.removeEventListener('register', this._onRegistered); - PushNotificationIOS.removeEventListener( - 'registrationError', - this._onRegistrationError, - ); - PushNotificationIOS.removeEventListener( - 'notification', - this._onRemoteNotification, - ); - PushNotificationIOS.removeEventListener( - 'localNotification', - this._onLocalNotification, - ); - } - - render() { - return ( - -