diff --git a/RNTester/RNTesterUnitTests/RNTesterUnitTestsBundle.js b/RNTester/RNTesterUnitTests/RNTesterUnitTestsBundle.js index e6ff98a10..9e387e5ee 100644 --- a/RNTester/RNTesterUnitTests/RNTesterUnitTestsBundle.js +++ b/RNTester/RNTesterUnitTests/RNTesterUnitTestsBundle.js @@ -4,11 +4,14 @@ * 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 __fbBatchedBridge = { // eslint-disable-line no-unused-vars +const __fbBatchedBridge = { + // eslint-disable-line no-unused-vars flushedQueue: function() { return null; - } + }, }; diff --git a/RNTester/js/ARTExample.js b/RNTester/js/ARTExample.js index fb8d0378c..15ae6de03 100644 --- a/RNTester/js/ARTExample.js +++ b/RNTester/js/ARTExample.js @@ -4,76 +4,92 @@ * 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'; var React = require('react'); var ReactNative = require('react-native'); -var { - ART, - Platform, - View, -} = ReactNative; - -const { - Surface, - Path, - Group, - Transform, - Shape, -} = ART; +var {ART, Platform, View} = ReactNative; +const {Surface, Path, Group, Transform, Shape} = ART; var scale = Platform.isTVOS ? 4 : 1; class ARTExample extends React.Component<{}> { - render(){ - const pathRect = new Path() - .moveTo(scale * 0,scale * 0) - .lineTo(scale * 0,scale * 110) - .lineTo(scale * 110,scale * 110) - .lineTo(scale * 110,scale * 0) - .close(); + render() { + const pathRect = new Path() + .moveTo(scale * 0, scale * 0) + .lineTo(scale * 0, scale * 110) + .lineTo(scale * 110, scale * 110) + .lineTo(scale * 110, scale * 0) + .close(); - const pathCircle0 = new Path() - .moveTo(scale * 30,scale * 5) - .arc(scale * 0,scale * 50,scale * 25) - .arc(scale * 0,-scale * 50,scale * 25) - .close(); + const pathCircle0 = new Path() + .moveTo(scale * 30, scale * 5) + .arc(scale * 0, scale * 50, scale * 25) + .arc(scale * 0, -scale * 50, scale * 25) + .close(); - const pathCircle1 = new Path() - .moveTo(scale * 30,scale * 55) - .arc(scale * 0,scale * 50,scale * 25) - .arc(scale * 0,-scale * 50,scale * 25) - .close(); + const pathCircle1 = new Path() + .moveTo(scale * 30, scale * 55) + .arc(scale * 0, scale * 50, scale * 25) + .arc(scale * 0, -scale * 50, scale * 25) + .close(); - const pathCircle2 = new Path() - .moveTo(scale * 55,scale * 30) - .arc(scale * 50,scale * 0,scale * 25) - .arc(-scale * 50,scale * 0,scale * 25) - .close(); + const pathCircle2 = new Path() + .moveTo(scale * 55, scale * 30) + .arc(scale * 50, scale * 0, scale * 25) + .arc(-scale * 50, scale * 0, scale * 25) + .close(); - const pathCircle3 = new Path() - .moveTo(scale * 55,scale * 80) - .arc(scale * 50,scale * 0,scale * 25) - .arc(-scale * 50,scale * 0,scale * 25) - .close(); + const pathCircle3 = new Path() + .moveTo(scale * 55, scale * 80) + .arc(scale * 50, scale * 0, scale * 25) + .arc(-scale * 50, scale * 0, scale * 25) + .close(); - return ( - - - - - - - - - - - - ); - } + return ( + + + + + + + + + + + + ); + } } exports.title = ''; @@ -84,6 +100,6 @@ exports.examples = [ title: 'ART Example', render(): React.Element { return ; - } + }, }, ]; diff --git a/RNTester/js/AccessibilityAndroidExample.android.js b/RNTester/js/AccessibilityAndroidExample.android.js index 6c6a80d41..e193d3393 100644 --- a/RNTester/js/AccessibilityAndroidExample.android.js +++ b/RNTester/js/AccessibilityAndroidExample.android.js @@ -4,7 +4,9 @@ * 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'; var React = require('react'); @@ -21,7 +23,12 @@ var { var RNTesterBlock = require('./RNTesterBlock'); var RNTesterPage = require('./RNTesterPage'); -var importantForAccessibilityValues = ['auto', 'yes', 'no', 'no-hide-descendants']; +var importantForAccessibilityValues = [ + 'auto', + 'yes', + 'no', + 'no-hide-descendants', +]; class AccessibilityAndroidExample extends React.Component { static title = 'Accessibility'; @@ -37,11 +44,11 @@ class AccessibilityAndroidExample extends React.Component { componentDidMount() { AccessibilityInfo.addEventListener( 'change', - this._handleScreenReaderToggled + this._handleScreenReaderToggled, ); - AccessibilityInfo.fetch().done((isEnabled) => { + AccessibilityInfo.fetch().done(isEnabled => { this.setState({ - screenReaderEnabled: isEnabled + screenReaderEnabled: isEnabled, }); }); } @@ -49,15 +56,15 @@ class AccessibilityAndroidExample extends React.Component { componentWillUnmount() { AccessibilityInfo.removeEventListener( 'change', - this._handleScreenReaderToggled + this._handleScreenReaderToggled, ); } - _handleScreenReaderToggled = (isEnabled) => { + _handleScreenReaderToggled = isEnabled => { this.setState({ screenReaderEnabled: isEnabled, }); - } + }; _addOne = () => { this.setState({ @@ -80,23 +87,16 @@ class AccessibilityAndroidExample extends React.Component { render() { return ( - - - This is - - - nontouchable normal view. - + This is + nontouchable normal view. - - This is - + This is nontouchable accessible view without label. @@ -104,11 +104,10 @@ class AccessibilityAndroidExample extends React.Component { - - - This is - + This is nontouchable accessible view with label. @@ -117,7 +116,9 @@ class AccessibilityAndroidExample extends React.Component { ToastAndroid.show('Toasts work by default', ToastAndroid.SHORT)} + onPress={() => + ToastAndroid.show('Toasts work by default', ToastAndroid.SHORT) + } accessibilityComponentType="button"> Click me @@ -139,7 +140,8 @@ class AccessibilityAndroidExample extends React.Component { - The screen reader is {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. + The screen reader is{' '} + {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. @@ -152,15 +154,17 @@ class AccessibilityAndroidExample extends React.Component { top: 10, right: 10, height: 100, - backgroundColor: 'green'}} + backgroundColor: 'green', + }} accessible={true} accessibilityLabel="First layout" importantForAccessibility={ - importantForAccessibilityValues[this.state.backgroundImportantForAcc]}> + importantForAccessibilityValues[ + this.state.backgroundImportantForAcc + ] + }> - - Hello - + Hello + importantForAccessibilityValues[ + this.state.forgroundImportantForAcc + ] + }> - - world - + world - + Change importantForAccessibility for background layout. @@ -190,14 +198,17 @@ class AccessibilityAndroidExample extends React.Component { + Background layout importantForAccessibility - Background layout importantForAccessibility - - - {importantForAccessibilityValues[this.state.backgroundImportantForAcc]} + { + importantForAccessibilityValues[ + this.state.backgroundImportantForAcc + ] + } - + Change importantForAccessibility for forground layout. @@ -205,30 +216,31 @@ class AccessibilityAndroidExample extends React.Component { + Forground layout importantForAccessibility - Forground layout importantForAccessibility - - - {importantForAccessibilityValues[this.state.forgroundImportantForAcc]} + { + importantForAccessibilityValues[ + this.state.forgroundImportantForAcc + ] + } - ); } } var styles = StyleSheet.create({ - embedded: { + embedded: { backgroundColor: 'yellow', - padding:10, + padding: 10, }, container: { flex: 1, backgroundColor: 'white', padding: 10, - height:150, + height: 150, }, }); diff --git a/RNTester/js/AccessibilityIOSExample.js b/RNTester/js/AccessibilityIOSExample.js index dabce101c..60d9ceeed 100644 --- a/RNTester/js/AccessibilityIOSExample.js +++ b/RNTester/js/AccessibilityIOSExample.js @@ -4,17 +4,15 @@ * 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'; var React = require('react'); var ReactNative = require('react-native'); -var { - AccessibilityInfo, - Text, - View, -} = ReactNative; +var {AccessibilityInfo, Text, View} = ReactNative; class AccessibilityIOSExample extends React.Component<{}> { render() { @@ -23,37 +21,28 @@ class AccessibilityIOSExample extends React.Component<{}> { alert('onAccessibilityTap success')} accessible={true}> - - Accessibility normal tap example - + Accessibility normal tap example - alert('onMagicTap success')} - accessible={true}> - - Accessibility magic tap example - + alert('onMagicTap success')} accessible={true}> + Accessibility magic tap example - - - Accessibility label example - + + Accessibility label example - - - Accessibility traits example - + + Accessibility traits example - Text's accessibilityLabel is the raw text itself unless it is set explicitly. + Text's accessibilityLabel is the raw text itself unless it is set + explicitly. - + This text component's accessibilityLabel is set explicitly. - This view's children are hidden from the accessibility tree + + This view's children are hidden from the accessibility tree + ); @@ -63,16 +52,16 @@ class AccessibilityIOSExample extends React.Component<{}> { class ScreenReaderStatusExample extends React.Component<{}, $FlowFixMeState> { state = { screenReaderEnabled: false, - } + }; componentDidMount() { AccessibilityInfo.addEventListener( 'change', - this._handleScreenReaderToggled + this._handleScreenReaderToggled, ); - AccessibilityInfo.fetch().done((isEnabled) => { + AccessibilityInfo.fetch().done(isEnabled => { this.setState({ - screenReaderEnabled: isEnabled + screenReaderEnabled: isEnabled, }); }); } @@ -80,21 +69,22 @@ class ScreenReaderStatusExample extends React.Component<{}, $FlowFixMeState> { componentWillUnmount() { AccessibilityInfo.removeEventListener( 'change', - this._handleScreenReaderToggled + this._handleScreenReaderToggled, ); } - _handleScreenReaderToggled = (isEnabled) => { + _handleScreenReaderToggled = isEnabled => { this.setState({ screenReaderEnabled: isEnabled, }); - } + }; render() { return ( - The screen reader is {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. + The screen reader is{' '} + {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. ); @@ -102,14 +92,18 @@ class ScreenReaderStatusExample extends React.Component<{}, $FlowFixMeState> { } exports.title = 'AccessibilityIOS'; -exports.description = 'Interface to show iOS\' accessibility samples'; +exports.description = "Interface to show iOS' accessibility samples"; exports.examples = [ { title: 'Accessibility elements', - render(): React.Element { return ; } + render(): React.Element { + return ; + }, }, { title: 'Check if the screen reader is enabled', - render(): React.Element { return ; } + render(): React.Element { + return ; + }, }, ]; diff --git a/RNTester/js/ActionSheetIOSExample.js b/RNTester/js/ActionSheetIOSExample.js index 1b04190b2..2c1788864 100644 --- a/RNTester/js/ActionSheetIOSExample.js +++ b/RNTester/js/ActionSheetIOSExample.js @@ -4,27 +4,17 @@ * 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'; var React = require('react'); var ReactNative = require('react-native'); -var { - ActionSheetIOS, - StyleSheet, - takeSnapshot, - Text, - View, -} = ReactNative; +var {ActionSheetIOS, StyleSheet, takeSnapshot, Text, View} = ReactNative; -var BUTTONS = [ - 'Option 0', - 'Option 1', - 'Option 2', - 'Delete', - 'Cancel', -]; +var BUTTONS = ['Option 0', 'Option 1', 'Option 2', 'Delete', 'Cancel']; var DESTRUCTIVE_INDEX = 3; var CANCEL_INDEX = 4; @@ -39,22 +29,22 @@ class ActionSheetExample extends React.Component<{}, $FlowFixMeState> { Click to show the ActionSheet - - Clicked button: {this.state.clicked} - + Clicked button: {this.state.clicked} ); } showActionSheet = () => { - ActionSheetIOS.showActionSheetWithOptions({ - options: BUTTONS, - cancelButtonIndex: CANCEL_INDEX, - destructiveButtonIndex: DESTRUCTIVE_INDEX, - }, - (buttonIndex) => { - this.setState({ clicked: BUTTONS[buttonIndex] }); - }); + ActionSheetIOS.showActionSheetWithOptions( + { + options: BUTTONS, + cancelButtonIndex: CANCEL_INDEX, + destructiveButtonIndex: DESTRUCTIVE_INDEX, + }, + buttonIndex => { + this.setState({clicked: BUTTONS[buttonIndex]}); + }, + ); }; } @@ -69,29 +59,32 @@ class ActionSheetTintExample extends React.Component<{}, $FlowFixMeState> { Click to show the ActionSheet - - Clicked button: {this.state.clicked} - + Clicked button: {this.state.clicked} ); } showActionSheet = () => { - ActionSheetIOS.showActionSheetWithOptions({ - options: BUTTONS, - cancelButtonIndex: CANCEL_INDEX, - destructiveButtonIndex: DESTRUCTIVE_INDEX, - tintColor: 'green', - }, - (buttonIndex) => { - this.setState({ clicked: BUTTONS[buttonIndex] }); - }); + ActionSheetIOS.showActionSheetWithOptions( + { + options: BUTTONS, + cancelButtonIndex: CANCEL_INDEX, + destructiveButtonIndex: DESTRUCTIVE_INDEX, + tintColor: 'green', + }, + buttonIndex => { + this.setState({clicked: BUTTONS[buttonIndex]}); + }, + ); }; } -class ShareActionSheetExample extends React.Component<$FlowFixMeProps, $FlowFixMeState> { +class ShareActionSheetExample extends React.Component< + $FlowFixMeProps, + $FlowFixMeState, +> { state = { - text: '' + text: '', }; render() { @@ -100,38 +93,36 @@ class ShareActionSheetExample extends React.Component<$FlowFixMeProps, $FlowFixM Click to show the Share ActionSheet - - {this.state.text} - + {this.state.text} ); } showShareActionSheet = () => { - ActionSheetIOS.showShareActionSheetWithOptions({ - url: this.props.url, - message: 'message to go with the shared url', - subject: 'a subject to go in the email heading', - excludedActivityTypes: [ - 'com.apple.UIKit.activity.PostToTwitter' - ] - }, - (error) => alert(error), - (completed, method) => { - var text; - if (completed) { - text = `Shared via ${method}`; - } else { - text = 'You didn\'t share'; - } - this.setState({text}); - }); + ActionSheetIOS.showShareActionSheetWithOptions( + { + url: this.props.url, + message: 'message to go with the shared url', + subject: 'a subject to go in the email heading', + excludedActivityTypes: ['com.apple.UIKit.activity.PostToTwitter'], + }, + error => alert(error), + (completed, method) => { + var text; + if (completed) { + text = `Shared via ${method}`; + } else { + text = "You didn't share"; + } + this.setState({text}); + }, + ); }; } class ShareScreenshotExample extends React.Component<{}, $FlowFixMeState> { state = { - text: '' + text: '', }; render() { @@ -140,34 +131,34 @@ class ShareScreenshotExample extends React.Component<{}, $FlowFixMeState> { Click to show the Share ActionSheet - - {this.state.text} - + {this.state.text} ); } showShareActionSheet = () => { // Take the snapshot (returns a temp file uri) - takeSnapshot('window').then((uri) => { - // Share image data - ActionSheetIOS.showShareActionSheetWithOptions({ - url: uri, - excludedActivityTypes: [ - 'com.apple.UIKit.activity.PostToTwitter' - ] - }, - (error) => alert(error), - (completed, method) => { - var text; - if (completed) { - text = `Shared via ${method}`; - } else { - text = 'You didn\'t share'; - } - this.setState({text}); - }); - }).catch((error) => alert(error)); + takeSnapshot('window') + .then(uri => { + // Share image data + ActionSheetIOS.showShareActionSheetWithOptions( + { + url: uri, + excludedActivityTypes: ['com.apple.UIKit.activity.PostToTwitter'], + }, + error => alert(error), + (completed, method) => { + var text; + if (completed) { + text = `Shared via ${method}`; + } else { + text = "You didn't share"; + } + this.setState({text}); + }, + ); + }) + .catch(error => alert(error)); }; } @@ -175,36 +166,40 @@ var style = StyleSheet.create({ button: { marginBottom: 10, fontWeight: '500', - } + }, }); exports.title = 'ActionSheetIOS'; -exports.description = 'Interface to show iOS\' action sheets'; +exports.description = "Interface to show iOS' action sheets"; exports.examples = [ { title: 'Show Action Sheet', - render(): React.Element { return ; } + render(): React.Element { + return ; + }, }, { title: 'Show Action Sheet with tinted buttons', - render(): React.Element { return ; } + render(): React.Element { + return ; + }, }, { title: 'Show Share Action Sheet', render(): React.Element { return ; - } + }, }, { title: 'Share Local Image', render(): React.Element { return ; - } + }, }, { title: 'Share Screenshot', render(): React.Element { return ; - } - } + }, + }, ]; diff --git a/RNTester/js/ActivityIndicatorExample.js b/RNTester/js/ActivityIndicatorExample.js index 05c9e06d4..2f81857cf 100644 --- a/RNTester/js/ActivityIndicatorExample.js +++ b/RNTester/js/ActivityIndicatorExample.js @@ -4,20 +4,25 @@ * 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'; -import React, { Component } from 'react'; -import { ActivityIndicator, StyleSheet, View } from 'react-native'; +import React, {Component} from 'react'; +import {ActivityIndicator, StyleSheet, View} from 'react-native'; /** * Optional Flowtype state and timer types definition */ -type State = { animating: boolean; }; +type State = {animating: boolean}; type Timer = number; -class ToggleAnimatingActivityIndicator extends Component<$FlowFixMeProps, State> { +class ToggleAnimatingActivityIndicator extends Component< + $FlowFixMeProps, + State, +> { _timer: Timer; constructor(props) { @@ -59,8 +64,6 @@ class ToggleAnimatingActivityIndicator extends Component<$FlowFixMeProps, State> } } - - exports.displayName = (undefined: ?string); exports.framework = 'React'; exports.title = ''; @@ -76,22 +79,20 @@ exports.examples = [ color="white" /> ); - } + }, }, { title: 'Gray', render() { return ( - + ); - } + }, }, { title: 'Custom colors', @@ -104,7 +105,7 @@ exports.examples = [ ); - } + }, }, { title: 'Large', @@ -116,38 +117,26 @@ exports.examples = [ color="white" /> ); - } + }, }, { title: 'Large, custom colors', render() { return ( - - - - + + + + ); - } + }, }, { title: 'Start/stop', render() { return ; - } + }, }, { title: 'Custom size', @@ -158,23 +147,17 @@ exports.examples = [ size="large" /> ); - } + }, }, { platform: 'android', title: 'Custom size (size: 75)', render() { - return ( - - ); - } + return ; + }, }, ]; - const styles = StyleSheet.create({ centering: { alignItems: 'center', diff --git a/RNTester/js/AlertExample.js b/RNTester/js/AlertExample.js index dee922a66..02382e769 100644 --- a/RNTester/js/AlertExample.js +++ b/RNTester/js/AlertExample.js @@ -4,25 +4,21 @@ * 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'; var React = require('react'); var ReactNative = require('react-native'); -var { - Alert, - StyleSheet, - Text, - TouchableHighlight, - View, -} = ReactNative; +var {Alert, StyleSheet, Text, TouchableHighlight, View} = ReactNative; var RNTesterBlock = require('./RNTesterBlock'); // corporate ipsum > lorem ipsum -var alertMessage = 'Credibly reintermediate next-generation potentialities after goal-oriented ' + - 'catalysts for change. Dynamically revolutionize.'; +var alertMessage = + 'Credibly reintermediate next-generation potentialities after goal-oriented ' + + 'catalysts for change. Dynamically revolutionize.'; /** * Simple alert examples. @@ -31,90 +27,88 @@ class SimpleAlertExampleBlock extends React.Component { render() { return ( - Alert.alert( - 'Alert Title', - alertMessage, - )}> + Alert.alert('Alert Title', alertMessage)}> Alert with message and default button - Alert.alert( - 'Alert Title', - alertMessage, - [ + + Alert.alert('Alert Title', alertMessage, [ {text: 'OK', onPress: () => console.log('OK Pressed!')}, - ] - )}> + ]) + }> Alert with one button - Alert.alert( - 'Alert Title', - alertMessage, - [ + + Alert.alert('Alert Title', alertMessage, [ {text: 'Cancel', onPress: () => console.log('Cancel Pressed!')}, {text: 'OK', onPress: () => console.log('OK Pressed!')}, - ] - )}> + ]) + }> Alert with two buttons - Alert.alert( - 'Alert Title', - null, - [ + + Alert.alert('Alert Title', null, [ {text: 'Foo', onPress: () => console.log('Foo Pressed!')}, {text: 'Bar', onPress: () => console.log('Bar Pressed!')}, {text: 'Baz', onPress: () => console.log('Baz Pressed!')}, - ] - )}> + ]) + }> Alert with three buttons - Alert.alert( - 'Foo Title', - alertMessage, - '..............'.split('').map((dot, index) => ({ - text: 'Button ' + index, - onPress: () => console.log('Pressed ' + index) - })) - )}> + + Alert.alert( + 'Foo Title', + alertMessage, + '..............'.split('').map((dot, index) => ({ + text: 'Button ' + index, + onPress: () => console.log('Pressed ' + index), + })), + ) + }> Alert with too many buttons - Alert.alert( - 'Alert Title', - null, - [ - {text: 'OK', onPress: () => console.log('OK Pressed!')}, - ], - { - cancelable: false - } - )}> + + Alert.alert( + 'Alert Title', + null, + [{text: 'OK', onPress: () => console.log('OK Pressed!')}], + { + cancelable: false, + }, + ) + }> Alert that cannot be dismissed - Alert.alert( - '', - alertMessage, - [ + + Alert.alert('', alertMessage, [ {text: 'OK', onPress: () => console.log('OK Pressed!')}, - ] - )}> + ]) + }> Alert without title diff --git a/RNTester/js/AlertIOSExample.js b/RNTester/js/AlertIOSExample.js index 8f4a898a5..4f58c00ad 100644 --- a/RNTester/js/AlertIOSExample.js +++ b/RNTester/js/AlertIOSExample.js @@ -4,79 +4,69 @@ * 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'; var React = require('react'); var ReactNative = require('react-native'); -var { - StyleSheet, - View, - Text, - TouchableHighlight, - AlertIOS, -} = ReactNative; +var {StyleSheet, View, Text, TouchableHighlight, AlertIOS} = ReactNative; -var { SimpleAlertExampleBlock } = require('./AlertExample'); +var {SimpleAlertExampleBlock} = require('./AlertExample'); exports.framework = 'React'; exports.title = 'AlertIOS'; exports.description = 'iOS alerts and action sheets'; -exports.examples = [{ - title: 'Alerts', - render() { - return ; - } -}, -{ - title: 'Prompt Options', - render(): React.Element { - return ; - } -}, -{ - title: 'Prompt Types', - render() { - return ( - - AlertIOS.prompt('Plain Text Entry')}> - - - - plain-text - - - - - AlertIOS.prompt('Secure Text', null, null, 'secure-text')}> - - - - secure-text - - - - - AlertIOS.prompt('Login & Password', null, null, 'login-password')}> - - - - login-password - - - - - - ); - } -}]; +exports.examples = [ + { + title: 'Alerts', + render() { + return ; + }, + }, + { + title: 'Prompt Options', + render(): React.Element { + return ; + }, + }, + { + title: 'Prompt Types', + render() { + return ( + + AlertIOS.prompt('Plain Text Entry')}> + + plain-text + + + + AlertIOS.prompt('Secure Text', null, null, 'secure-text') + }> + + secure-text + + + + AlertIOS.prompt('Login & Password', null, null, 'login-password') + }> + + login-password + + + + ); + }, + }, +]; class PromptOptions extends React.Component<$FlowFixMeProps, any> { customButtons: Array; @@ -87,13 +77,16 @@ class PromptOptions extends React.Component<$FlowFixMeProps, any> { // $FlowFixMe this seems to be a Flow bug, `saveResponse` is defined below this.saveResponse = this.saveResponse.bind(this); - this.customButtons = [{ - text: 'Custom OK', - onPress: this.saveResponse - }, { - text: 'Custom Cancel', - style: 'cancel', - }]; + this.customButtons = [ + { + text: 'Custom OK', + onPress: this.saveResponse, + }, + { + text: 'Custom Cancel', + style: 'cancel', + }, + ]; this.state = { promptValue: undefined, @@ -104,57 +97,74 @@ class PromptOptions extends React.Component<$FlowFixMeProps, any> { return ( - Prompt value: {this.state.promptValue} + Prompt value:{' '} + {this.state.promptValue} AlertIOS.prompt('Type a value', null, this.saveResponse)}> - + onPress={() => + AlertIOS.prompt('Type a value', null, this.saveResponse) + }> - - prompt with title & callback - + prompt with title & callback AlertIOS.prompt('Type a value', null, this.customButtons)}> - + onPress={() => + AlertIOS.prompt('Type a value', null, this.customButtons) + }> - - prompt with title & custom buttons - + prompt with title & custom buttons AlertIOS.prompt('Type a phone number', null, null, 'plain-text', undefined, 'phone-pad')}> - + onPress={() => + AlertIOS.prompt( + 'Type a phone number', + null, + null, + 'plain-text', + undefined, + 'phone-pad', + ) + }> - - prompt with title & custom keyboard - + prompt with title & custom keyboard AlertIOS.prompt('Type a value', null, this.saveResponse, undefined, 'Default value')}> - + onPress={() => + AlertIOS.prompt( + 'Type a value', + null, + this.saveResponse, + undefined, + 'Default value', + ) + }> - - prompt with title, callback & default value - + prompt with title, callback & default value AlertIOS.prompt('Type a value', null, this.customButtons, 'login-password', 'admin@site.com')}> - + onPress={() => + AlertIOS.prompt( + 'Type a value', + null, + this.customButtons, + 'login-password', + 'admin@site.com', + ) + }> prompt with title, custom buttons, login/password & default value @@ -166,7 +176,7 @@ class PromptOptions extends React.Component<$FlowFixMeProps, any> { } saveResponse(promptValue) { - this.setState({ promptValue: JSON.stringify(promptValue) }); + this.setState({promptValue: JSON.stringify(promptValue)}); } } diff --git a/RNTester/js/AnimatedExample.js b/RNTester/js/AnimatedExample.js index 9e60a81cb..d11cbef52 100644 --- a/RNTester/js/AnimatedExample.js +++ b/RNTester/js/AnimatedExample.js @@ -4,31 +4,29 @@ * 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'; var React = require('react'); var ReactNative = require('react-native'); -var { - Animated, - Easing, - StyleSheet, - Text, - View, -} = ReactNative; +var {Animated, Easing, StyleSheet, Text, View} = ReactNative; var RNTesterButton = require('./RNTesterButton'); exports.framework = 'React'; exports.title = 'Animated - Examples'; -exports.description = 'Animated provides a powerful ' + +exports.description = + 'Animated provides a powerful ' + 'and easy-to-use API for building modern, ' + 'interactive user experiences.'; exports.examples = [ { title: 'FadeInView', - description: 'Uses a simple timing animation to ' + + description: + 'Uses a simple timing animation to ' + 'bring opacity from 0 to 1 when the component ' + 'mounts.', render: function() { @@ -40,19 +38,20 @@ exports.examples = [ }; } componentDidMount() { - Animated.timing( // Uses easing functions + Animated.timing( + // Uses easing functions this.state.fadeAnim, // The value to drive { - toValue: 1, // Target - duration: 2000, // Configuration + toValue: 1, // Target + duration: 2000, // Configuration }, - ).start(); // Don't forget start! + ).start(); // Don't forget start! } render() { return ( - {this.props.children} @@ -69,19 +68,19 @@ exports.examples = [ render() { return ( - { - this.setState((state) => ( - {show: !state.show} - )); + { + this.setState(state => ({show: !state.show})); }}> - Press to {this.state.show ? - 'Hide' : 'Show'} + Press to {this.state.show ? 'Hide' : 'Show'} - {this.state.show && - - FadeInView - - } + {this.state.show && ( + + + FadeInView + + + )} ); } @@ -91,7 +90,8 @@ exports.examples = [ }, { title: 'Transform Bounce', - description: 'One `Animated.Value` is driven by a ' + + description: + 'One `Animated.Value` is driven by a ' + 'spring with custom constants and mapped to an ' + 'ordered set of transforms. Each transform has ' + 'an interpolation to convert the value into the ' + @@ -100,33 +100,46 @@ exports.examples = [ this.anim = this.anim || new Animated.Value(0); return ( - { - Animated.spring(this.anim, { - toValue: 0, // Returns to the start - velocity: 3, // Velocity makes it move - tension: -10, // Slow - friction: 1, // Oscillate a lot - }).start(); }}> + { + Animated.spring(this.anim, { + toValue: 0, // Returns to the start + velocity: 3, // Velocity makes it move + tension: -10, // Slow + friction: 1, // Oscillate a lot + }).start(); + }}> Press to Fling it! Transforms! @@ -136,80 +149,87 @@ exports.examples = [ }, { title: 'Composite Animations with Easing', - description: 'Sequence, parallel, delay, and ' + + description: + 'Sequence, parallel, delay, and ' + 'stagger with different easing functions.', render: function() { - this.anims = this.anims || [1,2,3].map( - () => new Animated.Value(0) - ); + this.anims = this.anims || [1, 2, 3].map(() => new Animated.Value(0)); return ( - { - var timing = Animated.timing; - Animated.sequence([ // One after the other - timing(this.anims[0], { - toValue: 200, - easing: Easing.linear, - }), - Animated.delay(400), // Use with sequence - timing(this.anims[0], { - toValue: 0, - easing: Easing.elastic(2), // Springy - }), - Animated.delay(400), - Animated.stagger(200, - this.anims.map((anim) => timing( - anim, {toValue: 200} - )).concat( - this.anims.map((anim) => timing( - anim, {toValue: 0} - ))), - ), - Animated.delay(400), - Animated.parallel([ - Easing.inOut(Easing.quad), // Symmetric - Easing.back(1.5), // Goes backwards first - Easing.ease // Default bezier - ].map((easing, ii) => ( - timing(this.anims[ii], { - toValue: 320, easing, duration: 3000, - }) - ))), - Animated.delay(400), - Animated.stagger(200, - this.anims.map((anim) => timing(anim, { + { + var timing = Animated.timing; + Animated.sequence([ + // One after the other + timing(this.anims[0], { + toValue: 200, + easing: Easing.linear, + }), + Animated.delay(400), // Use with sequence + timing(this.anims[0], { toValue: 0, - easing: Easing.bounce, // Like a ball - duration: 2000, - })), - ), - ]).start(); }}> + easing: Easing.elastic(2), // Springy + }), + Animated.delay(400), + Animated.stagger( + 200, + this.anims + .map(anim => timing(anim, {toValue: 200})) + .concat(this.anims.map(anim => timing(anim, {toValue: 0}))), + ), + Animated.delay(400), + Animated.parallel( + [ + Easing.inOut(Easing.quad), // Symmetric + Easing.back(1.5), // Goes backwards first + Easing.ease, // Default bezier + ].map((easing, ii) => + timing(this.anims[ii], { + toValue: 320, + easing, + duration: 3000, + }), + ), + ), + Animated.delay(400), + Animated.stagger( + 200, + this.anims.map(anim => + timing(anim, { + toValue: 0, + easing: Easing.bounce, // Like a ball + duration: 2000, + }), + ), + ), + ]).start(); + }}> Press to Animate - {['Composite', 'Easing', 'Animations!'].map( - (text, ii) => ( - - {text} - - ) - )} + {['Composite', 'Easing', 'Animations!'].map((text, ii) => ( + + {text} + + ))} ); }, }, { title: 'Continuous Interactions', - description: 'Gesture events, chaining, 2D ' + + description: + 'Gesture events, chaining, 2D ' + 'values, interrupting and transitioning ' + 'animations, etc.', - render: () => ( - Checkout the Gratuitous Animation App! - ), - } + render: () => Checkout the Gratuitous Animation App!, + }, ]; var styles = StyleSheet.create({ diff --git a/RNTester/js/AnimatedGratuitousApp/AnExApp.js b/RNTester/js/AnimatedGratuitousApp/AnExApp.js index c723f40f7..1ade55e2f 100644 --- a/RNTester/js/AnimatedGratuitousApp/AnExApp.js +++ b/RNTester/js/AnimatedGratuitousApp/AnExApp.js @@ -4,19 +4,15 @@ * 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'; var React = require('react'); var ReactNative = require('react-native'); -var { - Animated, - LayoutAnimation, - PanResponder, - StyleSheet, - View, -} = ReactNative; +var {Animated, LayoutAnimation, PanResponder, StyleSheet, View} = ReactNative; var AnExSet = require('AnExSet'); @@ -36,55 +32,63 @@ class Circle extends React.Component { this.state = { isActive: false, pan: new Animated.ValueXY(), // Vectors reduce boilerplate. (step1: uncomment) - pop: new Animated.Value(0), // Initial value. (step2a: uncomment) + pop: new Animated.Value(0), // Initial value. (step2a: uncomment) }; } _onLongPress(): void { var config = {tension: 40, friction: 3}; - this.state.pan.addListener((value) => { // Async listener for state changes (step1: uncomment) + this.state.pan.addListener(value => { + // Async listener for state changes (step1: uncomment) this.props.onMove && this.props.onMove(value); }); Animated.spring(this.state.pop, { - toValue: 1, // Pop to larger size. (step2b: uncomment) - ...config, // Reuse config for convenient consistency (step2b: uncomment) + toValue: 1, // Pop to larger size. (step2b: uncomment) + ...config, // Reuse config for convenient consistency (step2b: uncomment) }).start(); - this.setState({panResponder: PanResponder.create({ - onPanResponderMove: Animated.event([ - null, // native event - ignore (step1: uncomment) - {dx: this.state.pan.x, dy: this.state.pan.y}, // links pan to gestureState (step1: uncomment) - ]), - onPanResponderRelease: (e, gestureState) => { - LayoutAnimation.easeInEaseOut(); // @flowfixme animates layout update as one batch (step3: uncomment) - Animated.spring(this.state.pop, { - toValue: 0, // Pop back to 0 (step2c: uncomment) - ...config, - }).start(); - this.setState({panResponder: undefined}); - this.props.onMove && this.props.onMove({ - x: gestureState.dx + this.props.restLayout.x, - y: gestureState.dy + this.props.restLayout.y, - }); - this.props.onDeactivate(); - this.state.pan.removeAllListeners(); + this.setState( + { + panResponder: PanResponder.create({ + onPanResponderMove: Animated.event([ + null, // native event - ignore (step1: uncomment) + {dx: this.state.pan.x, dy: this.state.pan.y}, // links pan to gestureState (step1: uncomment) + ]), + onPanResponderRelease: (e, gestureState) => { + LayoutAnimation.easeInEaseOut(); // @flowfixme animates layout update as one batch (step3: uncomment) + Animated.spring(this.state.pop, { + toValue: 0, // Pop back to 0 (step2c: uncomment) + ...config, + }).start(); + this.setState({panResponder: undefined}); + this.props.onMove && + this.props.onMove({ + x: gestureState.dx + this.props.restLayout.x, + y: gestureState.dy + this.props.restLayout.y, + }); + this.props.onDeactivate(); + this.state.pan.removeAllListeners(); + }, + }), }, - })}, () => { - this.props.onActivate(); - }); + () => { + this.props.onActivate(); + }, + ); } render(): React.Node { if (this.state.panResponder) { var handlers = this.state.panResponder.panHandlers; - var dragStyle = { // Used to position while dragging - position: 'absolute', // Hoist out of layout (step1: uncomment) - ...this.state.pan.getLayout(), // Convenience converter (step1: uncomment) + var dragStyle = { + // Used to position while dragging + position: 'absolute', // Hoist out of layout (step1: uncomment) + ...this.state.pan.getLayout(), // Convenience converter (step1: uncomment) }; } else { handlers = { onStartShouldSetResponder: () => !this.state.isActive, onResponderGrant: () => { - this.state.pan.setValue({x: 0, y: 0}); // reset (step1: uncomment) + this.state.pan.setValue({x: 0, y: 0}); // reset (step1: uncomment) this.state.pan.setOffset(this.props.restLayout); // offset from onLayout (step1: uncomment) /* $FlowFixMe(>=0.63.0 site=react_native_fb) This comment suppresses * an error found when Flow v0.63 was deployed. To see the error @@ -99,35 +103,64 @@ class Circle extends React.Component { clearTimeout(this.longTimer); this._toggleIsActive(); } - } + }, }; } var animatedStyle: Object = { - shadowOpacity: this.state.pop, // no need for interpolation (step2d: uncomment) + shadowOpacity: this.state.pop, // no need for interpolation (step2d: uncomment) transform: [ - {scale: this.state.pop.interpolate({ - inputRange: [0, 1], - outputRange: [1, 1.3] // scale up from 1 to 1.3 (step2d: uncomment) - })}, + { + scale: this.state.pop.interpolate({ + inputRange: [0, 1], + outputRange: [1, 1.3], // scale up from 1 to 1.3 (step2d: uncomment) + }), + }, ], }; var openVal = this.props.openVal; if (this.props.dummy) { animatedStyle.opacity = 0; } else if (this.state.isActive) { - var innerOpenStyle = [styles.open, { // (step4: uncomment) - left: openVal.interpolate({inputRange: [0, 1], outputRange: [this.props.restLayout.x, 0]}), - top: openVal.interpolate({inputRange: [0, 1], outputRange: [this.props.restLayout.y, 0]}), - width: openVal.interpolate({inputRange: [0, 1], outputRange: [CIRCLE_SIZE, this.props.containerLayout.width]}), - height: openVal.interpolate({inputRange: [0, 1], outputRange: [CIRCLE_SIZE, this.props.containerLayout.height]}), - margin: openVal.interpolate({inputRange: [0, 1], outputRange: [CIRCLE_MARGIN, 0]}), - borderRadius: openVal.interpolate({inputRange: [-0.15, 0, 0.5, 1], outputRange: [0, CIRCLE_SIZE / 2, CIRCLE_SIZE * 1.3, 0]}), - }]; + var innerOpenStyle = [ + styles.open, + { + // (step4: uncomment) + left: openVal.interpolate({ + inputRange: [0, 1], + outputRange: [this.props.restLayout.x, 0], + }), + top: openVal.interpolate({ + inputRange: [0, 1], + outputRange: [this.props.restLayout.y, 0], + }), + width: openVal.interpolate({ + inputRange: [0, 1], + outputRange: [CIRCLE_SIZE, this.props.containerLayout.width], + }), + height: openVal.interpolate({ + inputRange: [0, 1], + outputRange: [CIRCLE_SIZE, this.props.containerLayout.height], + }), + margin: openVal.interpolate({ + inputRange: [0, 1], + outputRange: [CIRCLE_MARGIN, 0], + }), + borderRadius: openVal.interpolate({ + inputRange: [-0.15, 0, 0.5, 1], + outputRange: [0, CIRCLE_SIZE / 2, CIRCLE_SIZE * 1.3, 0], + }), + }, + ]; } return ( { _toggleIsActive(velocity) { var config = {tension: 30, friction: 7}; if (this.state.isActive) { - Animated.spring(this.props.openVal, {toValue: 0, ...config}).start(() => { // (step4: uncomment) + Animated.spring(this.props.openVal, {toValue: 0, ...config}).start(() => { + // (step4: uncomment) this.setState({isActive: false}, this.props.onDeactivate); - }); // (step4: uncomment) + }); // (step4: uncomment) } else { this.props.onActivate(); this.setState({isActive: true, panResponder: undefined}, () => { // this.props.openVal.setValue(1); // (step4: comment) - Animated.spring(this.props.openVal, {toValue: 1, ...config}).start(); // (step4: uncomment) + Animated.spring(this.props.openVal, {toValue: 1, ...config}).start(); // (step4: uncomment) }); } } @@ -160,7 +194,7 @@ class Circle extends React.Component { class AnExApp extends React.Component { static title = 'Animated - Gratuitous App'; static description = 'Bunch of Animations - tap a circle to ' + - 'open a view with more animations, or longPress and drag to reorder circles.'; + 'open a view with more animations, or longPress and drag to reorder circles.'; _onMove: (position: Point) => void; constructor(props: any): void { @@ -185,7 +219,7 @@ class AnExApp extends React.Component { if (!this.state.restLayouts[idx]) { var onLayout = function(index, e) { var layout = e.nativeEvent.layout; - this.setState((state) => { + this.setState(state => { state.restLayouts[index] = layout; return state; }); @@ -208,7 +242,10 @@ class AnExApp extends React.Component { }); if (this.state.activeKey) { circles.push( - + , ); circles.push( { restLayout={this.state.activeInitialLayout} containerLayout={this.state.layout} onMove={this._onMove} - onDeactivate={() => { this.setState({activeKey: undefined}); }} - /> + onDeactivate={() => { + this.setState({activeKey: undefined}); + }} + />, ); } return ( - this.setState({layout: e.nativeEvent.layout})}> + this.setState({layout: e.nativeEvent.layout})}> {circles} @@ -234,7 +275,7 @@ class AnExApp extends React.Component { _onMove(position: Point): void { var newKeys = moveToClosest(this.state, position); if (newKeys !== this.state.keys) { - LayoutAnimation.easeInEaseOut(); // animates layout update as one batch (step3: uncomment) + LayoutAnimation.easeInEaseOut(); // animates layout update as one batch (step3: uncomment) this.setState({keys: newKeys}); } } diff --git a/RNTester/js/AnimatedGratuitousApp/AnExBobble.js b/RNTester/js/AnimatedGratuitousApp/AnExBobble.js index 7f56bbe68..14d4c839a 100644 --- a/RNTester/js/AnimatedGratuitousApp/AnExBobble.js +++ b/RNTester/js/AnimatedGratuitousApp/AnExBobble.js @@ -4,27 +4,28 @@ * 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'; var React = require('react'); var ReactNative = require('react-native'); -var { - Animated, - PanResponder, - StyleSheet, - View, -} = ReactNative; +var {Animated, PanResponder, StyleSheet, View} = ReactNative; var NUM_BOBBLES = 5; var RAD_EACH = Math.PI / 2 / (NUM_BOBBLES - 2); var RADIUS = 160; -var BOBBLE_SPOTS = [...Array(NUM_BOBBLES)].map((_, i) => { // static positions - return i === 0 ? {x: 0, y: 0} : { // first bobble is the selector - x: -Math.cos(RAD_EACH * (i - 1)) * RADIUS, - y: -Math.sin(RAD_EACH * (i - 1)) * RADIUS, - }; +var BOBBLE_SPOTS = [...Array(NUM_BOBBLES)].map((_, i) => { + // static positions + return i === 0 + ? {x: 0, y: 0} + : { + // first bobble is the selector + x: -Math.cos(RAD_EACH * (i - 1)) * RADIUS, + y: -Math.sin(RAD_EACH * (i - 1)) * RADIUS, + }; }); class AnExBobble extends React.Component { @@ -35,18 +36,19 @@ class AnExBobble extends React.Component { return new Animated.ValueXY(); }); this.state.selectedBobble = null; - var bobblePanListener = (e, gestureState) => { // async events => change selection + var bobblePanListener = (e, gestureState) => { + // async events => change selection var newSelected = computeNewSelected(gestureState); if (this.state.selectedBobble !== newSelected) { if (this.state.selectedBobble !== null) { var restSpot = BOBBLE_SPOTS[this.state.selectedBobble]; Animated.spring(this.state.bobbles[this.state.selectedBobble], { - toValue: restSpot, // return previously selected bobble to rest position + toValue: restSpot, // return previously selected bobble to rest position }).start(); } if (newSelected !== null && newSelected !== 0) { Animated.spring(this.state.bobbles[newSelected], { - toValue: this.state.bobbles[0], // newly selected should track the selector + toValue: this.state.bobbles[0], // newly selected should track the selector }).start(); } this.state.selectedBobble = newSelected; @@ -55,7 +57,7 @@ class AnExBobble extends React.Component { var releaseBobble = () => { this.state.bobbles.forEach((bobble, i) => { Animated.spring(bobble, { - toValue: {x: 0, y: 0} // all bobbles return to zero + toValue: {x: 0, y: 0}, // all bobbles return to zero }).start(); }); }; @@ -64,14 +66,14 @@ class AnExBobble extends React.Component { onPanResponderGrant: () => { BOBBLE_SPOTS.forEach((spot, idx) => { Animated.spring(this.state.bobbles[idx], { - toValue: spot, // spring each bobble to its spot - friction: 3, // less friction => bouncier + toValue: spot, // spring each bobble to its spot + friction: 3, // less friction => bouncier }).start(); }); }, onPanResponderMove: Animated.event( - [ null, {dx: this.state.bobbles[0].x, dy: this.state.bobbles[0].y} ], - {listener: bobblePanListener} // async state changes with arbitrary logic + [null, {dx: this.state.bobbles[0].x, dy: this.state.bobbles[0].y}], + {listener: bobblePanListener}, // async state changes with arbitrary logic ), onPanResponderRelease: releaseBobble, onPanResponderTerminate: releaseBobble, @@ -89,10 +91,13 @@ class AnExBobble extends React.Component { {...handlers} key={i} source={{uri: BOBBLE_IMGS[j]}} - style={[styles.circle, { - backgroundColor: randColor(), // re-renders are obvious - transform: this.state.bobbles[j].getTranslateTransform(), // simple conversion - }]} + style={[ + styles.circle, + { + backgroundColor: randColor(), // re-renders are obvious + transform: this.state.bobbles[j].getTranslateTransform(), // simple conversion + }, + ]} /> ); })} @@ -119,9 +124,7 @@ var styles = StyleSheet.create({ }, }); -function computeNewSelected( - gestureState: Object, -): ?number { +function computeNewSelected(gestureState: Object): ?number { var {dx, dy} = gestureState; var minDist = Infinity; var newSelected = null; @@ -140,7 +143,7 @@ function computeNewSelected( } function randColor(): string { - var colors = [0,1,2].map(() => Math.floor(Math.random() * 150 + 100)); + var colors = [0, 1, 2].map(() => Math.floor(Math.random() * 150 + 100)); return 'rgb(' + colors.join(',') + ')'; } diff --git a/RNTester/js/AnimatedGratuitousApp/AnExChained.js b/RNTester/js/AnimatedGratuitousApp/AnExChained.js index 00d72dafb..b3c095703 100644 --- a/RNTester/js/AnimatedGratuitousApp/AnExChained.js +++ b/RNTester/js/AnimatedGratuitousApp/AnExChained.js @@ -4,56 +4,56 @@ * 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'; var React = require('react'); var ReactNative = require('react-native'); -var { - Animated, - PanResponder, - StyleSheet, - View, -} = ReactNative; +var {Animated, PanResponder, StyleSheet, View} = ReactNative; class AnExChained extends React.Component { constructor(props: Object) { super(props); this.state = { - stickers: [new Animated.ValueXY()], // 1 leader + stickers: [new Animated.ValueXY()], // 1 leader }; - var stickerConfig = {tension: 2, friction: 3}; // soft spring - for (var i = 0; i < 4; i++) { // 4 followers + var stickerConfig = {tension: 2, friction: 3}; // soft spring + for (var i = 0; i < 4; i++) { + // 4 followers var sticker = new Animated.ValueXY(); Animated.spring(sticker, { ...stickerConfig, - toValue: this.state.stickers[i], // Animated toValue's are tracked + toValue: this.state.stickers[i], // Animated toValue's are tracked }).start(); - this.state.stickers.push(sticker); // push on the followers + this.state.stickers.push(sticker); // push on the followers } var releaseChain = (e, gestureState) => { - this.state.stickers[0].flattenOffset(); // merges offset into value and resets - Animated.sequence([ // spring to start after decay finishes - Animated.decay(this.state.stickers[0], { // coast to a stop + this.state.stickers[0].flattenOffset(); // merges offset into value and resets + Animated.sequence([ + // spring to start after decay finishes + Animated.decay(this.state.stickers[0], { + // coast to a stop velocity: {x: gestureState.vx, y: gestureState.vy}, deceleration: 0.997, }), Animated.spring(this.state.stickers[0], { - toValue: {x: 0, y: 0} // return to start + toValue: {x: 0, y: 0}, // return to start }), ]).start(); }; this.state.chainResponder = PanResponder.create({ onStartShouldSetPanResponder: () => true, onPanResponderGrant: () => { - this.state.stickers[0].stopAnimation((value) => { - this.state.stickers[0].setOffset(value); // start where sticker animated to - this.state.stickers[0].setValue({x: 0, y: 0}); // avoid flicker before next event + this.state.stickers[0].stopAnimation(value => { + this.state.stickers[0].setOffset(value); // start where sticker animated to + this.state.stickers[0].setValue({x: 0, y: 0}); // avoid flicker before next event }); }, onPanResponderMove: Animated.event( - [null, {dx: this.state.stickers[0].x, dy: this.state.stickers[0].y}] // map gesture to leader + [null, {dx: this.state.stickers[0].x, dy: this.state.stickers[0].y}], // map gesture to leader ), onPanResponderRelease: releaseChain, onPanResponderTerminate: releaseChain, @@ -65,15 +65,18 @@ class AnExChained extends React.Component { {this.state.stickers.map((_, i) => { var j = this.state.stickers.length - i - 1; // reverse so leader is on top - var handlers = (j === 0) ? this.state.chainResponder.panHandlers : {}; + var handlers = j === 0 ? this.state.chainResponder.panHandlers : {}; return ( ); })} @@ -86,7 +89,7 @@ var styles = StyleSheet.create({ chained: { alignSelf: 'flex-end', top: -160, - right: 126 + right: 126, }, sticker: { position: 'absolute', @@ -101,7 +104,7 @@ var CHAIN_IMGS = [ require('../bunny.png'), require('../relay.png'), require('../hawk.png'), - require('../bunny.png') + require('../bunny.png'), ]; module.exports = AnExChained; diff --git a/RNTester/js/AnimatedGratuitousApp/AnExScroll.js b/RNTester/js/AnimatedGratuitousApp/AnExScroll.js index c0f7495e4..0dde54319 100644 --- a/RNTester/js/AnimatedGratuitousApp/AnExScroll.js +++ b/RNTester/js/AnimatedGratuitousApp/AnExScroll.js @@ -4,23 +4,18 @@ * 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'; var React = require('react'); var ReactNative = require('react-native'); -var { - Animated, - Image, - ScrollView, - StyleSheet, - Text, - View, -} = ReactNative; +var {Animated, Image, ScrollView, StyleSheet, Text, View} = ReactNative; class AnExScroll extends React.Component<$FlowFixMeProps, any> { - state: any = { scrollX: new Animated.Value(0) }; + state: any = {scrollX: new Animated.Value(0)}; render() { var width = this.props.panelWidth; @@ -28,20 +23,17 @@ class AnExScroll extends React.Component<$FlowFixMeProps, any> { - + - {'I\'ll find something to put here.'} + {"I'll find something to put here."} @@ -53,29 +45,34 @@ class AnExScroll extends React.Component<$FlowFixMeProps, any> { @@ -107,7 +104,13 @@ var styles = StyleSheet.create({ }, }); -var HAWK_PIC = {uri: 'https://scontent-sea1-1.xx.fbcdn.net/hphotos-xfa1/t39.1997-6/10734304_1562225620659674_837511701_n.png'}; -var BUNNY_PIC = {uri: 'https://scontent-sea1-1.xx.fbcdn.net/hphotos-xaf1/t39.1997-6/851564_531111380292237_1898871086_n.png'}; +var HAWK_PIC = { + uri: + 'https://scontent-sea1-1.xx.fbcdn.net/hphotos-xfa1/t39.1997-6/10734304_1562225620659674_837511701_n.png', +}; +var BUNNY_PIC = { + uri: + 'https://scontent-sea1-1.xx.fbcdn.net/hphotos-xaf1/t39.1997-6/851564_531111380292237_1898871086_n.png', +}; module.exports = AnExScroll; diff --git a/RNTester/js/AnimatedGratuitousApp/AnExSet.js b/RNTester/js/AnimatedGratuitousApp/AnExSet.js index 873d5251c..83bc5bfdb 100644 --- a/RNTester/js/AnimatedGratuitousApp/AnExSet.js +++ b/RNTester/js/AnimatedGratuitousApp/AnExSet.js @@ -4,19 +4,15 @@ * 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'; var React = require('react'); var ReactNative = require('react-native'); -var { - Animated, - PanResponder, - StyleSheet, - Text, - View, -} = ReactNative; +var {Animated, PanResponder, StyleSheet, Text, View} = ReactNative; var AnExBobble = require('./AnExBobble'); var AnExChained = require('./AnExChained'); @@ -27,7 +23,7 @@ class AnExSet extends React.Component { constructor(props: Object) { super(props); function randColor() { - var colors = [0,1,2].map(() => Math.floor(Math.random() * 150 + 100)); + var colors = [0, 1, 2].map(() => Math.floor(Math.random() * 150 + 100)); return 'rgb(' + colors.join(',') + ')'; } this.state = { @@ -36,38 +32,35 @@ class AnExSet extends React.Component { }; } render(): React.Node { - var backgroundColor = this.props.openVal ? - this.props.openVal.interpolate({ - inputRange: [0, 1], - outputRange: [ - this.state.closeColor, // interpolates color strings - this.state.openColor - ], - }) : - this.state.closeColor; - var panelWidth = this.props.containerLayout && this.props.containerLayout.width || 320; + var backgroundColor = this.props.openVal + ? this.props.openVal.interpolate({ + inputRange: [0, 1], + outputRange: [ + this.state.closeColor, // interpolates color strings + this.state.openColor, + ], + }) + : this.state.closeColor; + var panelWidth = + (this.props.containerLayout && this.props.containerLayout.width) || 320; return ( - - {this.props.id} - + {this.props.id} - {this.props.isActive && + {this.props.isActive && ( - - July 2nd - + July 2nd - + - } + )} ); } @@ -77,24 +70,26 @@ class AnExSet extends React.Component { this.state.dismissResponder = PanResponder.create({ onStartShouldSetPanResponder: () => this.props.isActive, onPanResponderGrant: () => { - Animated.spring(this.props.openVal, { // Animated value passed in. - toValue: this.state.dismissY.interpolate({ // Track dismiss gesture - inputRange: [0, 300], // and interpolate pixel distance - outputRange: [1, 0], // to a fraction. + Animated.spring(this.props.openVal, { + // Animated value passed in. + toValue: this.state.dismissY.interpolate({ + // Track dismiss gesture + inputRange: [0, 300], // and interpolate pixel distance + outputRange: [1, 0], // to a fraction. }), useNativeDriver: true, }).start(); }, onPanResponderMove: Animated.event( - [null, {dy: this.state.dismissY}], // track pan gesture - {useNativeDriver: true} + [null, {dy: this.state.dismissY}], // track pan gesture + {useNativeDriver: true}, ), onPanResponderRelease: (e, gestureState) => { if (gestureState.dy > 100) { - this.props.onDismiss(gestureState.vy); // delegates dismiss action to parent + this.props.onDismiss(gestureState.vy); // delegates dismiss action to parent } else { Animated.spring(this.props.openVal, { - toValue: 1, // animate back open if released early + toValue: 1, // animate back open if released early useNativeDriver: true, }).start(); } diff --git a/RNTester/js/AnimatedGratuitousApp/AnExTilt.js b/RNTester/js/AnimatedGratuitousApp/AnExTilt.js index c7540de73..dbd823843 100644 --- a/RNTester/js/AnimatedGratuitousApp/AnExTilt.js +++ b/RNTester/js/AnimatedGratuitousApp/AnExTilt.js @@ -4,17 +4,15 @@ * 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'; var React = require('react'); var ReactNative = require('react-native'); -var { - Animated, - PanResponder, - StyleSheet, -} = ReactNative; +var {Animated, PanResponder, StyleSheet} = ReactNative; class AnExTilt extends React.Component { constructor(props: Object) { @@ -29,14 +27,14 @@ class AnExTilt extends React.Component { onPanResponderGrant: () => { Animated.timing(this.state.opacity, { toValue: this.state.panX.interpolate({ - inputRange: [-300, 0, 300], // pan is in pixels - outputRange: [0, 1, 0], // goes to zero at both edges + inputRange: [-300, 0, 300], // pan is in pixels + outputRange: [0, 1, 0], // goes to zero at both edges }), - duration: 0, // direct tracking + duration: 0, // direct tracking }).start(); }, onPanResponderMove: Animated.event( - [null, {dx: this.state.panX}] // panX is linked to the gesture + [null, {dx: this.state.panX}], // panX is linked to the gesture ), onPanResponderRelease: (e, gestureState) => { var toValue = 0; @@ -46,19 +44,20 @@ class AnExTilt extends React.Component { toValue = -500; } Animated.spring(this.state.panX, { - toValue, // animate back to center or off screen - velocity: gestureState.vx, // maintain gesture velocity + toValue, // animate back to center or off screen + velocity: gestureState.vx, // maintain gesture velocity tension: 10, friction: 3, }).start(); this.state.panX.removeAllListeners(); - var id = this.state.panX.addListener(({value}) => { // listen until offscreen + var id = this.state.panX.addListener(({value}) => { + // listen until offscreen if (Math.abs(value) > 400) { - this.state.panX.removeListener(id); // offscreen, so stop listening + this.state.panX.removeListener(id); // offscreen, so stop listening Animated.timing(this.state.opacity, { - toValue: 1, // Fade back in. This unlinks it from tracking this.state.panX + toValue: 1, // Fade back in. This unlinks it from tracking this.state.panX }).start(); - this.state.panX.setValue(0); // Note: stops the spring animation + this.state.panX.setValue(0); // Note: stops the spring animation toValue !== 0 && this._startBurnsZoom(); } }); @@ -67,10 +66,10 @@ class AnExTilt extends React.Component { } _startBurnsZoom() { - this.state.burns.setValue(1); // reset to beginning + this.state.burns.setValue(1); // reset to beginning Animated.decay(this.state.burns, { - velocity: 1, // sublte zoom - deceleration: 0.9999, // slow decay + velocity: 1, // sublte zoom + deceleration: 0.9999, // slow decay }).start(); } @@ -82,27 +81,37 @@ class AnExTilt extends React.Component { return ( + style={[ + styles.tilt, + { + opacity: this.state.opacity, + transform: [ + { + rotate: this.state.panX.interpolate({ + inputRange: [-320, 320], + outputRange: ['-15deg', '15deg'], + }), + }, // interpolate string "shapes" + {translateX: this.state.panX}, + ], + }, + ]}> { +class AppStateSubscription extends React.Component< + $FlowFixMeProps, + $FlowFixMeState, +> { state = { appState: AppState.currentState, previousAppStates: [], @@ -37,7 +38,7 @@ class AppStateSubscription extends React.Component<$FlowFixMeProps, $FlowFixMeSt this.setState({memoryWarnings: this.state.memoryWarnings + 1}); }; - _handleAppStateChange = (appState) => { + _handleAppStateChange = appState => { var previousAppStates = this.state.previousAppStates.slice(); previousAppStates.push(this.state.appState); this.setState({ @@ -75,21 +76,31 @@ exports.examples = [ { title: 'AppState.currentState', description: 'Can be null on app initialization', - render() { return {AppState.currentState}; } + render() { + return {AppState.currentState}; + }, }, { title: 'Subscribed AppState:', - description: 'This changes according to the current state, so you can only ever see it rendered as "active"', - render(): React.Element { return ; } + description: + 'This changes according to the current state, so you can only ever see it rendered as "active"', + render(): React.Element { + return ; + }, }, { title: 'Previous states:', - render(): React.Element { return ; } + render(): React.Element { + return ; + }, }, { platform: 'ios', title: 'Memory Warnings', - description: 'In the IOS simulator, hit Shift+Command+M to simulate a memory warning.', - render(): React.Element { return ; } + description: + 'In the IOS simulator, hit Shift+Command+M to simulate a memory warning.', + render(): React.Element { + return ; + }, }, ]; diff --git a/RNTester/js/AssetScaledImageExample.js b/RNTester/js/AssetScaledImageExample.js index 51e97a8ae..d3a295a27 100644 --- a/RNTester/js/AssetScaledImageExample.js +++ b/RNTester/js/AssetScaledImageExample.js @@ -4,22 +4,22 @@ * 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'; var React = require('react'); var ReactNative = require('react-native'); -var { - Image, - StyleSheet, - View, - ScrollView -} = ReactNative; +var {Image, StyleSheet, View, ScrollView} = ReactNative; -class AssetScaledImageExample extends React.Component<$FlowFixMeProps, $FlowFixMeState> { +class AssetScaledImageExample extends React.Component< + $FlowFixMeProps, + $FlowFixMeState, +> { state = { - asset: this.props.asset + asset: this.props.asset, }; render() { @@ -27,16 +27,16 @@ class AssetScaledImageExample extends React.Component<$FlowFixMeProps, $FlowFixM return ( - + - - - + + + - - + + ); @@ -85,5 +85,6 @@ var styles = StyleSheet.create({ }); exports.title = ''; -exports.description = 'Example component that displays the automatic scaling capabilities of the tag'; +exports.description = + 'Example component that displays the automatic scaling capabilities of the tag'; module.exports = AssetScaledImageExample; diff --git a/RNTester/js/AsyncStorageExample.js b/RNTester/js/AsyncStorageExample.js index eb354b2db..14b778022 100644 --- a/RNTester/js/AsyncStorageExample.js +++ b/RNTester/js/AsyncStorageExample.js @@ -4,18 +4,15 @@ * 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'; var React = require('react'); var ReactNative = require('react-native'); -var { - AsyncStorage, - PickerIOS, - Text, - View -} = ReactNative; +var {AsyncStorage, PickerIOS, Text, View} = ReactNative; var PickerItemIOS = PickerIOS.Item; var STORAGE_KEY = '@AsyncStorageExample:key'; @@ -34,7 +31,7 @@ class BasicStorageExample extends React.Component<{}, $FlowFixMeState> { _loadInitialState = async () => { try { var value = await AsyncStorage.getItem(STORAGE_KEY); - if (value !== null){ + if (value !== null) { this.setState({selectedValue: value}); this._appendMessage('Recovered selection from disk: ' + value); } else { @@ -49,35 +46,27 @@ class BasicStorageExample extends React.Component<{}, $FlowFixMeState> { var color = this.state.selectedValue; return ( - - {COLORS.map((value) => ( - + + {COLORS.map(value => ( + ))} {'Selected: '} - - {this.state.selectedValue} - + {this.state.selectedValue} - {' '} + Press here to remove from storage. - {' '} + Messages: - {this.state.messages.map((m) => {m})} + {this.state.messages.map(m => {m})} ); } - _onValueChange = async (selectedValue) => { + _onValueChange = async selectedValue => { this.setState({selectedValue}); try { await AsyncStorage.setItem(STORAGE_KEY, selectedValue); @@ -96,7 +85,7 @@ class BasicStorageExample extends React.Component<{}, $FlowFixMeState> { } }; - _appendMessage = (message) => { + _appendMessage = message => { this.setState({messages: this.state.messages.concat(message)}); }; } @@ -106,6 +95,8 @@ exports.description = 'Asynchronous local disk storage.'; exports.examples = [ { title: 'Basics - getItem, setItem, removeItem', - render(): React.Element { return ; } + render(): React.Element { + return ; + }, }, ]; diff --git a/RNTester/js/BorderExample.js b/RNTester/js/BorderExample.js index 6f64581df..388fc68fe 100644 --- a/RNTester/js/BorderExample.js +++ b/RNTester/js/BorderExample.js @@ -4,15 +4,14 @@ * 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'; var React = require('react'); var ReactNative = require('react-native'); -var { - StyleSheet, - View -} = ReactNative; +var {StyleSheet, View} = ReactNative; var styles = StyleSheet.create({ box: { @@ -84,7 +83,7 @@ var styles = StyleSheet.create({ border7_inner: { backgroundColor: 'blue', width: 100, - height: 100 + height: 100, }, border8: { width: 60, @@ -158,46 +157,47 @@ var styles = StyleSheet.create({ borderTopRightRadius: 40, borderBottomRightRadius: 30, borderBottomLeftRadius: 40, - } + }, }); exports.title = 'Border'; -exports.description = 'Demonstrates some of the border styles available to Views.'; +exports.description = + 'Demonstrates some of the border styles available to Views.'; exports.examples = [ { title: 'Equal-Width / Same-Color', description: 'borderWidth & borderColor', render() { return ; - } + }, }, { title: 'Equal-Width / Same-Color', description: 'borderWidth & borderColor & borderRadius', render() { return ; - } + }, }, { title: 'Equal-Width Borders', description: 'borderWidth & border*Color', render() { return ; - } + }, }, { title: 'Same-Color Borders', description: 'border*Width & borderColor', render() { return ; - } + }, }, { title: 'Custom Borders', description: 'border*Width & border*Color', render() { return ; - } + }, }, { title: 'Custom Borders', @@ -205,7 +205,7 @@ exports.examples = [ platform: 'ios', render() { return ; - } + }, }, { title: 'Custom Borders', @@ -213,7 +213,7 @@ exports.examples = [ platform: 'ios', render() { return ; - } + }, }, { title: 'Custom Borders', @@ -225,7 +225,7 @@ exports.examples = [ ); - } + }, }, { title: 'Single Borders', @@ -239,14 +239,14 @@ exports.examples = [ ); - } + }, }, { title: 'Corner Radii', description: 'borderTopLeftRadius & borderBottomRightRadius', render() { return ; - } + }, }, { title: 'Corner Radii / Elevation', @@ -254,34 +254,34 @@ exports.examples = [ platform: 'android', render() { return ; - } + }, }, { title: 'CSS Trick - Triangle', description: 'create a triangle by manipulating border colors and widths', render() { return ; - } + }, }, { title: 'Curved border(Left|Right|Bottom|Top)Width', description: 'Make a non-uniform width curved border', render() { return ; - } + }, }, { title: 'Curved border(Left|Right|Bottom|Top)Color', description: 'Make a non-uniform color curved border', render() { return ; - } + }, }, { title: 'Curved border(Top|Bottom)(Left|Right)Radius', description: 'Make a non-uniform radius curved border', render() { return ; - } - } + }, + }, ]; diff --git a/RNTester/js/BoxShadowExample.js b/RNTester/js/BoxShadowExample.js index 056b61aee..42fe0aaad 100644 --- a/RNTester/js/BoxShadowExample.js +++ b/RNTester/js/BoxShadowExample.js @@ -4,16 +4,14 @@ * 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'; var React = require('react'); var ReactNative = require('react-native'); -var { - Image, - StyleSheet, - View -} = ReactNative; +var {Image, StyleSheet, View} = ReactNative; var styles = StyleSheet.create({ box: { @@ -35,46 +33,72 @@ var styles = StyleSheet.create({ }); exports.title = 'Box Shadow'; -exports.description = 'Demonstrates some of the shadow styles available to Views.'; +exports.description = + 'Demonstrates some of the shadow styles available to Views.'; exports.examples = [ { title: 'Basic shadow', description: 'shadowOpacity: 0.5, shadowOffset: {2, 2}', render() { return ; - } + }, }, { title: 'Colored shadow', - description: 'shadowColor: \'red\', shadowRadius: 0', + description: "shadowColor: 'red', shadowRadius: 0", render() { return ; - } + }, }, { title: 'Shaped shadow', description: 'borderRadius: 50', render() { return ; - } + }, }, { title: 'Image shadow', description: 'Image shadows are derived exactly from the pixels.', render() { - return ; - } + return ( + + ); + }, }, { title: 'Child shadow', - description: 'For views without an opaque background color, shadow will be derived from the subviews.', + description: + 'For views without an opaque background color, shadow will be derived from the subviews.', render() { - return - - ; - } + return ( + + + + ); + }, }, ]; diff --git a/RNTester/js/ButtonExample.js b/RNTester/js/ButtonExample.js index 8ba4876ed..1d7251986 100644 --- a/RNTester/js/ButtonExample.js +++ b/RNTester/js/ButtonExample.js @@ -4,17 +4,15 @@ * 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 ReactNative = require('react-native'); -const { - Alert, - Button, - View, -} = ReactNative; +const {Alert, Button, View} = ReactNative; const onButtonPress = () => { Alert.alert('Button has been pressed!'); @@ -28,7 +26,8 @@ exports.description = 'Simple React Native button component.'; exports.examples = [ { title: 'Simple Button', - description: 'The title and onPress handler are required. It is ' + + description: + 'The title and onPress handler are required. It is ' + 'recommended to set accessibilityLabel to help make your app usable by ' + 'everyone.', render: function() { @@ -43,7 +42,8 @@ exports.examples = [ }, { title: 'Adjusted color', - description: 'Adjusts the color in a way that looks standard on each ' + + description: + 'Adjusts 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.', render: function() { @@ -59,8 +59,8 @@ exports.examples = [ }, { title: 'Fit to text layout', - description: 'This layout strategy lets the title define the width of ' + - 'the button', + description: + 'This layout strategy lets the title define the width of ' + 'the button', render: function() { return ( diff --git a/RNTester/js/CameraRollView.js b/RNTester/js/CameraRollView.js index 29eb07022..1568585ea 100644 --- a/RNTester/js/CameraRollView.js +++ b/RNTester/js/CameraRollView.js @@ -4,8 +4,10 @@ * 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'; var React = require('react'); @@ -58,15 +60,10 @@ var propTypes = { */ imagesPerRow: PropTypes.number, - /** + /** * The asset type, one of 'Photos', 'Videos' or 'All' */ - assetType: PropTypes.oneOf([ - 'Photos', - 'Videos', - 'All', - ]), - + assetType: PropTypes.oneOf(['Photos', 'Videos', 'All']), }; var CameraRollView = createReactClass({ @@ -82,12 +79,7 @@ var CameraRollView = createReactClass({ renderImage: function(asset) { var imageSize = 150; var imageStyle = [styles.image, {width: imageSize, height: imageSize}]; - return ( - - ); + return ; }, }; }, @@ -98,7 +90,7 @@ var CameraRollView = createReactClass({ return { assets: ([]: Array), groupTypes: this.props.groupTypes, - lastCursor: (null : ?string), + lastCursor: (null: ?string), assetType: this.props.assetType, noMore: false, loadingMore: false, @@ -114,7 +106,7 @@ var CameraRollView = createReactClass({ var ds = new ListView.DataSource({rowHasChanged: this._rowHasChanged}); this.state.dataSource = ds.cloneWithRows( // $FlowFixMe(>=0.41.0) - groupByEveryN(this.state.assets, this.props.imagesPerRow) + groupByEveryN(this.state.assets, this.props.imagesPerRow), ); }, @@ -178,7 +170,9 @@ var CameraRollView = createReactClass({ */ fetch: function(clear?: boolean) { if (!this.state.loadingMore) { - this.setState({loadingMore: true}, () => { this._fetch(clear); }); + this.setState({loadingMore: true}, () => { + this._fetch(clear); + }); } }, @@ -217,8 +211,12 @@ var CameraRollView = createReactClass({ }, // rowData is an array of images - _renderRow: function(rowData: Array, sectionID: string, rowID: string) { - var images = rowData.map((image) => { + _renderRow: function( + rowData: Array, + sectionID: string, + rowID: string, + ) { + var images = rowData.map(image => { if (image === null) { return null; } @@ -226,16 +224,12 @@ var CameraRollView = createReactClass({ return this.props.renderImage(image); }); - return ( - - {images} - - ); + return {images}; }, _appendAssets: function(data: Object) { var assets = data.edges; - var newState: Object = { loadingMore: false }; + var newState: Object = {loadingMore: false}; if (!data.page_info.has_next_page) { newState.noMore = true; @@ -246,7 +240,7 @@ var CameraRollView = createReactClass({ newState.assets = this.state.assets.concat(assets); newState.dataSource = this.state.dataSource.cloneWithRows( // $FlowFixMe(>=0.41.0) - groupByEveryN(newState.assets, this.props.imagesPerRow) + groupByEveryN(newState.assets, this.props.imagesPerRow), ); } diff --git a/RNTester/js/ClipboardExample.js b/RNTester/js/ClipboardExample.js index 57ee1e172..13309df37 100644 --- a/RNTester/js/ClipboardExample.js +++ b/RNTester/js/ClipboardExample.js @@ -4,21 +4,19 @@ * 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'; var React = require('react'); var ReactNative = require('react-native'); -var { - Clipboard, - View, - Text, -} = ReactNative; +var {Clipboard, View, Text} = ReactNative; class ClipboardExample extends React.Component<{}, $FlowFixMeState> { state = { - content: 'Content will appear here' + content: 'Content will appear here', }; _setClipboardContent = async () => { @@ -27,7 +25,7 @@ class ClipboardExample extends React.Component<{}, $FlowFixMeState> { var content = await Clipboard.getString(); this.setState({content}); } catch (e) { - this.setState({content:e.message}); + this.setState({content: e.message}); } }; @@ -37,9 +35,7 @@ class ClipboardExample extends React.Component<{}, $FlowFixMeState> { Tap to put "Hello World" in the clipboard - - {this.state.content} - + {this.state.content} ); } @@ -51,7 +47,7 @@ exports.examples = [ { title: 'Clipboard.setString() and getString()', render() { - return ; - } - } + return ; + }, + }, ]; diff --git a/RNTester/js/DatePickerAndroidExample.js b/RNTester/js/DatePickerAndroidExample.js index 2b6706e06..fc63ca20e 100644 --- a/RNTester/js/DatePickerAndroidExample.js +++ b/RNTester/js/DatePickerAndroidExample.js @@ -4,7 +4,9 @@ * 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'; var React = require('react'); @@ -62,31 +64,44 @@ class DatePickerAndroidExample extends React.Component { + onPress={this.showPicker.bind(this, 'simple', { + date: this.state.simpleDate, + })}> {this.state.simpleText} + onPress={this.showPicker.bind(this, 'spinner', { + date: this.state.spinnerDate, + mode: 'spinner', + })}> {this.state.spinnerText} + onPress={this.showPicker.bind(this, 'calendar', { + date: this.state.calendarDate, + mode: 'calendar', + })}> {this.state.calendarText} + onPress={this.showPicker.bind(this, 'default', { + date: this.state.defaultDate, + mode: 'default', + })}> {this.state.defaultText} + onPress={this.showPicker.bind(this, 'preset', { + date: this.state.presetDate, + })}> {this.state.presetText} @@ -117,7 +132,7 @@ class DatePickerAndroidExample extends React.Component { })}> {this.state.allText} - + ); } diff --git a/RNTester/js/DatePickerIOSExample.js b/RNTester/js/DatePickerIOSExample.js index a0b6234e8..5bd762597 100644 --- a/RNTester/js/DatePickerIOSExample.js +++ b/RNTester/js/DatePickerIOSExample.js @@ -4,24 +4,23 @@ * 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'; var React = require('react'); var ReactNative = require('react-native'); -var { - DatePickerIOS, - StyleSheet, - Text, - TextInput, - View, -} = ReactNative; +var {DatePickerIOS, StyleSheet, Text, TextInput, View} = ReactNative; -class DatePickerExample extends React.Component<$FlowFixMeProps, $FlowFixMeState> { +class DatePickerExample extends React.Component< + $FlowFixMeProps, + $FlowFixMeState, +> { static defaultProps = { date: new Date(), - timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset() / 60, + timeZoneOffsetInHours: -1 * new Date().getTimezoneOffset() / 60, }; state = { @@ -29,11 +28,11 @@ class DatePickerExample extends React.Component<$FlowFixMeProps, $FlowFixMeState timeZoneOffsetInHours: this.props.timeZoneOffsetInHours, }; - onDateChange = (date) => { + onDateChange = date => { this.setState({date: date}); }; - onTimezoneChange = (event) => { + onTimezoneChange = event => { var offset = parseInt(event.nativeEvent.text, 10); if (isNaN(offset)) { return; @@ -47,11 +46,11 @@ class DatePickerExample extends React.Component<$FlowFixMeProps, $FlowFixMeState return ( - { - this.state.date.toLocaleDateString() + - ' ' + - this.state.date.toLocaleTimeString() - } + + {this.state.date.toLocaleDateString() + + ' ' + + this.state.date.toLocaleTimeString()} + { return ( - - {this.props.label} - + {this.props.label} {this.props.children} @@ -107,9 +104,7 @@ class Heading extends React.Component<$FlowFixMeProps> { render() { return ( - - {this.props.label} - + {this.props.label} ); } @@ -119,12 +114,13 @@ exports.displayName = (undefined: ?string); exports.title = ''; exports.description = 'Select dates and times using the native UIDatePicker.'; exports.examples = [ -{ - title: '', - render: function(): React.Element { - return ; + { + title: '', + render: function(): React.Element { + return ; + }, }, -}]; +]; var styles = StyleSheet.create({ textinput: { diff --git a/RNTester/js/DimensionsExample.js b/RNTester/js/DimensionsExample.js index d0274f15a..436968c3b 100644 --- a/RNTester/js/DimensionsExample.js +++ b/RNTester/js/DimensionsExample.js @@ -4,19 +4,20 @@ * 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 ReactNative = require('react-native'); -const { - Dimensions, - Text, - View -} = ReactNative; +const {Dimensions, Text, View} = ReactNative; -class DimensionsSubscription extends React.Component<{dim: string}, {dims: Object}> { +class DimensionsSubscription extends React.Component< + {dim: string}, + {dims: Object}, +> { state = { dims: Dimensions.get(this.props.dim), }; @@ -29,7 +30,7 @@ class DimensionsSubscription extends React.Component<{dim: string}, {dims: Objec Dimensions.removeEventListener('change', this._handleDimensionsChange); } - _handleDimensionsChange = (dimensions) => { + _handleDimensionsChange = dimensions => { this.setState({ dims: dimensions[this.props.dim], }); @@ -49,10 +50,14 @@ exports.description = 'Dimensions of the viewport'; exports.examples = [ { title: 'window', - render(): React.Element { return ; } + render(): React.Element { + return ; + }, }, { title: 'screen', - render(): React.Element { return ; } + render(): React.Element { + return ; + }, }, ]; diff --git a/RNTester/js/ExampleTypes.js b/RNTester/js/ExampleTypes.js index 4e42bf4cf..5d7e2a557 100644 --- a/RNTester/js/ExampleTypes.js +++ b/RNTester/js/ExampleTypes.js @@ -4,8 +4,10 @@ * 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'; /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment diff --git a/RNTester/js/FlatListExample.js b/RNTester/js/FlatListExample.js index 0c47ebc69..4098934dc 100644 --- a/RNTester/js/FlatListExample.js +++ b/RNTester/js/FlatListExample.js @@ -4,19 +4,16 @@ * 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 Alert = require('Alert'); const React = require('react'); const ReactNative = require('react-native'); -const { - Animated, - FlatList, - StyleSheet, - View, -} = ReactNative; +const {Animated, FlatList, StyleSheet, View} = ReactNative; const RNTesterPage = require('./RNTesterPage'); @@ -61,21 +58,23 @@ class FlatListExample extends React.PureComponent<{}, $FlowFixMeState> { empty: false, }; - _onChangeFilterText = (filterText) => { + _onChangeFilterText = filterText => { this.setState({filterText}); }; - _onChangeScrollToIndex = (text) => { - this._listRef.getNode().scrollToIndex({viewPosition: 0.5, index: Number(text)}); + _onChangeScrollToIndex = text => { + this._listRef + .getNode() + .scrollToIndex({viewPosition: 0.5, index: Number(text)}); }; _scrollPos = new Animated.Value(0); _scrollSinkX = Animated.event( - [{nativeEvent: { contentOffset: { x: this._scrollPos } }}], + [{nativeEvent: {contentOffset: {x: this._scrollPos}}}], {useNativeDriver: true}, ); _scrollSinkY = Animated.event( - [{nativeEvent: { contentOffset: { y: this._scrollPos } }}], + [{nativeEvent: {contentOffset: {y: this._scrollPos}}}], {useNativeDriver: true}, ); @@ -85,14 +84,11 @@ class FlatListExample extends React.PureComponent<{}, $FlowFixMeState> { render() { const filterRegex = new RegExp(String(this.state.filterText), 'i'); - const filter = (item) => ( - filterRegex.test(item.text) || filterRegex.test(item.title) - ); + const filter = item => + filterRegex.test(item.text) || filterRegex.test(item.title); const filteredData = this.state.data.filter(filter); return ( - + @@ -126,13 +122,13 @@ class FlatListExample extends React.PureComponent<{}, $FlowFixMeState> { data={this.state.empty ? [] : filteredData} debug={this.state.debug} disableVirtualization={!this.state.virtualized} - getItemLayout={this.state.fixedHeight ? - this._getItemLayout : - undefined + getItemLayout={ + this.state.fixedHeight ? this._getItemLayout : undefined } horizontal={this.state.horizontal} inverted={this.state.inverted} - key={(this.state.horizontal ? 'h' : 'v') + + key={ + (this.state.horizontal ? 'h' : 'v') + (this.state.fixedHeight ? 'f' : 'd') } keyboardShouldPersistTaps="always" @@ -141,7 +137,9 @@ class FlatListExample extends React.PureComponent<{}, $FlowFixMeState> { numColumns={1} onEndReached={this._onEndReached} onRefresh={this._onRefresh} - onScroll={this.state.horizontal ? this._scrollSinkX : this._scrollSinkY} + onScroll={ + this.state.horizontal ? this._scrollSinkX : this._scrollSinkY + } onViewableItemsChanged={this._onViewableItemsChanged} ref={this._captureRef} refreshing={false} @@ -153,7 +151,9 @@ class FlatListExample extends React.PureComponent<{}, $FlowFixMeState> { ); } - _captureRef = (ref) => { this._listRef = ref; }; + _captureRef = ref => { + this._listRef = ref; + }; _getItemLayout = (data: any, index: number) => { return getItemLayout(data, index, this.state.horizontal); }; @@ -161,7 +161,7 @@ class FlatListExample extends React.PureComponent<{}, $FlowFixMeState> { if (this.state.data.length >= 1000) { return; } - this.setState((state) => ({ + this.setState(state => ({ data: state.data.concat(genItemData(100, state.data.length)), })); }; @@ -181,20 +181,19 @@ class FlatListExample extends React.PureComponent<{}, $FlowFixMeState> { // This is called when items change viewability by scrolling into or out of // the viewable area. _onViewableItemsChanged = (info: { - changed: Array<{ - key: string, - isViewable: boolean, - item: any, - index: ?number, - section?: any, - }> - } - ) => { + changed: Array<{ + key: string, + isViewable: boolean, + item: any, + index: ?number, + section?: any, + }>, + }) => { // Impressions can be logged here if (this.state.logViewable) { infoLog( 'onViewableItemsChanged: ', - info.changed.map((v) => ({...v, item: '...'})), + info.changed.map(v => ({...v, item: '...'})), ); } }; @@ -205,7 +204,6 @@ class FlatListExample extends React.PureComponent<{}, $FlowFixMeState> { _listRef: AnimatedFlatList; } - const styles = StyleSheet.create({ container: { backgroundColor: 'rgb(239, 239, 244)', diff --git a/RNTester/js/GeolocationExample.js b/RNTester/js/GeolocationExample.js index 2cbd091f5..73b5deeed 100644 --- a/RNTester/js/GeolocationExample.js +++ b/RNTester/js/GeolocationExample.js @@ -4,18 +4,15 @@ * 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'; +'use strict'; var React = require('react'); var ReactNative = require('react-native'); -var { - StyleSheet, - Text, - View, -} = ReactNative; +var {StyleSheet, Text, View} = ReactNative; exports.framework = 'React'; exports.title = 'Geolocation'; @@ -27,7 +24,7 @@ exports.examples = [ render: function(): React.Element { return ; }, - } + }, ]; class GeolocationExample extends React.Component<{}, $FlowFixMeState> { @@ -40,14 +37,14 @@ class GeolocationExample extends React.Component<{}, $FlowFixMeState> { componentDidMount() { navigator.geolocation.getCurrentPosition( - (position) => { + position => { var initialPosition = JSON.stringify(position); this.setState({initialPosition}); }, - (error) => alert(JSON.stringify(error)), - {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000} + error => alert(JSON.stringify(error)), + {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000}, ); - this.watchID = navigator.geolocation.watchPosition((position) => { + this.watchID = navigator.geolocation.watchPosition(position => { var lastPosition = JSON.stringify(position); this.setState({lastPosition}); }); diff --git a/RNTester/js/ImageCapInsetsExample.js b/RNTester/js/ImageCapInsetsExample.js index 97b407f08..8f84d7735 100644 --- a/RNTester/js/ImageCapInsetsExample.js +++ b/RNTester/js/ImageCapInsetsExample.js @@ -4,34 +4,29 @@ * 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'; var React = require('react'); var ReactNative = require('react-native'); var nativeImageSource = require('nativeImageSource'); -var { - Image, - StyleSheet, - Text, - View, -} = ReactNative; +var {Image, StyleSheet, Text, View} = ReactNative; class ImageCapInsetsExample extends React.Component<{}> { render() { return ( - - capInsets: none - + capInsets: none { /> - - capInsets: 15 - + capInsets: 15 =0.63.0 site=react_native_fb) This comment suppresses an error @@ -45,19 +49,23 @@ var NetworkImageCallbackExample = createReactClass({ }, render: function() { - var { mountTime } = this.state; + var {mountTime} = this.state; return ( this._loadEventFired(`✔ onLoadStart (+${new Date() - mountTime}ms)`)} - onLoad={(event) => { + onLoadStart={() => + this._loadEventFired(`✔ onLoadStart (+${new Date() - mountTime}ms)`) + } + onLoad={event => { // Currently this image source feature is only available on iOS. if (event.nativeEvent.source) { const url = event.nativeEvent.source.url; - this._loadEventFired(`✔ onLoad (+${new Date() - mountTime}ms) for URL ${url}`); + this._loadEventFired( + `✔ onLoad (+${new Date() - mountTime}ms) for URL ${url}`, + ); } else { this._loadEventFired(`✔ onLoad (+${new Date() - mountTime}ms)`); } @@ -65,43 +73,61 @@ var NetworkImageCallbackExample = createReactClass({ onLoadEnd={() => { this._loadEventFired(`✔ onLoadEnd (+${new Date() - mountTime}ms)`); this.setState({startLoadPrefetched: true}, () => { - prefetchTask.then(() => { - this._loadEventFired(`✔ Prefetch OK (+${new Date() - mountTime}ms)`); - }, error => { - this._loadEventFired(`✘ Prefetch failed (+${new Date() - mountTime}ms)`); - }); + prefetchTask.then( + () => { + this._loadEventFired( + `✔ Prefetch OK (+${new Date() - mountTime}ms)`, + ); + }, + error => { + this._loadEventFired( + `✘ Prefetch failed (+${new Date() - mountTime}ms)`, + ); + }, + ); }); }} /> - {this.state.startLoadPrefetched ? + {this.state.startLoadPrefetched ? ( this._loadEventFired(`✔ (prefetched) onLoadStart (+${new Date() - mountTime}ms)`)} - onLoad={(event) => { + onLoadStart={() => + this._loadEventFired( + `✔ (prefetched) onLoadStart (+${new Date() - mountTime}ms)`, + ) + } + onLoad={event => { // Currently this image source feature is only available on iOS. if (event.nativeEvent.source) { const url = event.nativeEvent.source.url; - this._loadEventFired(`✔ (prefetched) onLoad (+${new Date() - mountTime}ms) for URL ${url}`); + this._loadEventFired( + `✔ (prefetched) onLoad (+${new Date() - + mountTime}ms) for URL ${url}`, + ); } else { - this._loadEventFired(`✔ (prefetched) onLoad (+${new Date() - mountTime}ms)`); + this._loadEventFired( + `✔ (prefetched) onLoad (+${new Date() - mountTime}ms)`, + ); } }} - onLoadEnd={() => this._loadEventFired(`✔ (prefetched) onLoadEnd (+${new Date() - mountTime}ms)`)} + onLoadEnd={() => + this._loadEventFired( + `✔ (prefetched) onLoadEnd (+${new Date() - mountTime}ms)`, + ) + } /> - : null} - - {this.state.events.join('\n')} - + ) : null} + {this.state.events.join('\n')} ); }, _loadEventFired(event) { - this.setState((state) => { - return state.events = [...state.events, event]; + this.setState(state => { + return (state.events = [...state.events, event]); }); - } + }, }); var NetworkImageExample = createReactClass({ @@ -109,27 +135,38 @@ var NetworkImageExample = createReactClass({ return { error: false, loading: false, - progress: 0 + progress: 0, }; }, render: function() { - var loader = this.state.loading ? + var loader = this.state.loading ? ( {this.state.progress}% - - : null; - return this.state.error ? - {this.state.error} : + + + ) : null; + return this.state.error ? ( + {this.state.error} + ) : ( this.setState({loading: true})} - onError={(e) => this.setState({error: e.nativeEvent.error, loading: false})} - onProgress={(e) => this.setState({progress: Math.round(100 * e.nativeEvent.loaded / e.nativeEvent.total)})} + onLoadStart={e => this.setState({loading: true})} + onError={e => + this.setState({error: e.nativeEvent.error, loading: false}) + } + onProgress={e => + this.setState({ + progress: Math.round( + 100 * e.nativeEvent.loaded / e.nativeEvent.total, + ), + }) + } onLoad={() => this.setState({loading: false, error: false})}> {loader} - ; - } + + ); + }, }); var ImageSizeExample = createReactClass({ @@ -154,7 +191,8 @@ var ImageSizeExample = createReactClass({ backgroundColor: 'transparent', marginRight: 10, }} - source={this.props.source} /> + source={this.props.source} + /> Actual dimensions:{'\n'} Width: {this.state.width}, Height: {this.state.height} @@ -175,26 +213,36 @@ var MultipleSourcesExample = createReactClass({ return ( - + Decrease image size - + Increase image size - Container image size: {this.state.width}x{this.state.height} - + + Container image size: {this.state.width}x{this.state.height}{' '} + + @@ -224,33 +272,43 @@ var MultipleSourcesExample = createReactClass({ exports.displayName = (undefined: ?string); exports.framework = 'React'; exports.title = ''; -exports.description = 'Base component for displaying different types of images.'; +exports.description = + 'Base component for displaying different types of images.'; exports.examples = [ { title: 'Plain Network Image', - description: 'If the `source` prop `uri` property is prefixed with ' + - '"http", then it will be downloaded from the network.', + description: + 'If the `source` prop `uri` property is prefixed with ' + + '"http", then it will be downloaded from the network.', render: function() { - return ( - - ); + return ; }, }, { title: 'Plain Static Image', - description: 'Static assets should be placed in the source code tree, and ' + - 'required in the same way as JavaScript modules.', + description: + 'Static assets should be placed in the source code tree, and ' + + 'required in the same way as JavaScript modules.', render: function() { return ( - - - - + + + + ); }, @@ -259,8 +317,14 @@ exports.examples = [ title: 'Image Loading Events', render: function() { return ( - + ); }, }, @@ -268,7 +332,11 @@ exports.examples = [ title: 'Error Handler', render: function() { return ( - + ); }, platform: 'ios', @@ -277,7 +345,11 @@ exports.examples = [ title: 'Image Download Progress', render: function() { return ( - + ); }, platform: 'ios', @@ -289,7 +361,9 @@ exports.examples = [ return ( ); @@ -298,17 +372,18 @@ exports.examples = [ }, { title: 'Cache Policy', - description: 'First image has never been loaded before and is instructed not to load unless in cache.' + - 'Placeholder image from above will stay. Second image is the same but forced to load regardless of' + - ' local cache state.', - render: function () { + description: + 'First image has never been loaded before and is instructed not to load unless in cache.' + + 'Placeholder image from above will stay. Second image is the same but forced to load regardless of' + + ' local cache state.', + render: function() { return ( @@ -316,7 +391,7 @@ exports.examples = [ defaultSource={require('./bunny.png')} source={{ uri: smallImage.uri + '?cacheBust=notinCache' + Date.now(), - cache: 'reload' + cache: 'reload', }} style={styles.base} /> @@ -335,7 +410,7 @@ exports.examples = [ style={[ styles.base, styles.background, - {borderWidth: 3, borderColor: '#f099f0'} + {borderWidth: 3, borderColor: '#f099f0'}, ]} /> @@ -352,7 +427,7 @@ exports.examples = [ style={[ styles.base, styles.background, - {borderWidth: 5, borderColor: '#f099f0'} + {borderWidth: 5, borderColor: '#f099f0'}, ]} /> @@ -364,10 +439,7 @@ exports.examples = [ render: function() { return ( - + @@ -407,10 +479,7 @@ exports.examples = [ render: function() { return ( - + - - React - + source={fullImage} + /> + React ); }, @@ -457,16 +525,15 @@ exports.examples = [ - - React - + React ); }, }, { title: 'Tint Color', - description: 'The `tintColor` style prop changes all the non-alpha ' + + description: + 'The `tintColor` style prop changes all the non-alpha ' + 'pixels to the tint color.', render: function() { return ( @@ -474,19 +541,31 @@ exports.examples = [ @@ -495,19 +574,31 @@ exports.examples = [ @@ -516,71 +607,62 @@ exports.examples = [ }, { title: 'Resize Mode', - description: 'The `resizeMode` style prop controls how the image is ' + + description: + 'The `resizeMode` style prop controls how the image is ' + 'rendered within the frame.', render: function() { return ( {[smallImage, fullImage].map((image, index) => { return ( - - - - - Contain - - + + + + Contain + + + + Cover + + - - - Cover - - + + + Stretch + + + + Repeat + + + + Center + + - - - - Stretch - - - - - - Repeat - - - - - - Center - - - - - - ); - })} + ); + })} ); }, @@ -591,7 +673,10 @@ exports.examples = [ return ( ); }, @@ -601,10 +686,7 @@ exports.examples = [ title: 'Base64 image', render: function() { return ( - + ); }, platform: 'ios', @@ -642,17 +724,12 @@ exports.examples = [ 'Images shipped with the native bundle, but not managed ' + 'by the JS packager', render: function() { - return ( - - ); + return ; }, }, { title: 'Bundled images', - description: - 'Images shipped in a separate native bundle', + description: 'Images shipped in a separate native bundle', render: function() { return ( @@ -684,11 +761,7 @@ exports.examples = [ render: function() { return ( - + - + - + values={['Padding', 'Position']} + /> + this.setState({modalOpen: false})} @@ -98,7 +101,7 @@ const styles = StyleSheet.create({ position: 'absolute', top: 30, left: 10, - } + }, }); module.exports = KeyboardAvoidingViewExample; diff --git a/RNTester/js/LayoutAnimationExample.js b/RNTester/js/LayoutAnimationExample.js index a62143d2b..47f588983 100644 --- a/RNTester/js/LayoutAnimationExample.js +++ b/RNTester/js/LayoutAnimationExample.js @@ -4,19 +4,15 @@ * 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 ReactNative = require('react-native'); -const { - LayoutAnimation, - StyleSheet, - Text, - View, - TouchableOpacity, -} = ReactNative; +const {LayoutAnimation, StyleSheet, Text, View, TouchableOpacity} = ReactNative; class AddRemoveExample extends React.Component<{}, $FlowFixMeState> { state = { @@ -28,19 +24,19 @@ class AddRemoveExample extends React.Component<{}, $FlowFixMeState> { } _onPressAddView = () => { - this.setState((state) => ({views: [...state.views, {}]})); + this.setState(state => ({views: [...state.views, {}]})); }; _onPressRemoveView = () => { - this.setState((state) => ({views: state.views.slice(0, -1)})); + this.setState(state => ({views: state.views.slice(0, -1)})); }; render() { - const views = this.state.views.map((view, i) => + const views = this.state.views.map((view, i) => ( {i} - ); + )); return ( @@ -53,23 +49,23 @@ class AddRemoveExample extends React.Component<{}, $FlowFixMeState> { Remove view - - {views} - + {views} ); } } -const GreenSquare = () => +const GreenSquare = () => ( Green square - ; + +); -const BlueSquare = () => +const BlueSquare = () => ( Blue square - ; + +); class CrossFadeExample extends React.Component<{}, $FlowFixMeState> { state = { @@ -78,7 +74,7 @@ class CrossFadeExample extends React.Component<{}, $FlowFixMeState> { _onPressToggle = () => { LayoutAnimation.easeInEaseOut(); - this.setState((state) => ({toggled: !state.toggled})); + this.setState(state => ({toggled: !state.toggled})); }; render() { @@ -90,11 +86,7 @@ class CrossFadeExample extends React.Component<{}, $FlowFixMeState> { - { - this.state.toggled ? - : - - } + {this.state.toggled ? : } ); @@ -118,7 +110,7 @@ class LayoutUpdateExample extends React.Component<{}, $FlowFixMeState> { clearTimeout(this.timeout); this.timeout = null; } - } + }; _onPressToggle = () => { this._clearTimeout(); @@ -145,7 +137,9 @@ class LayoutUpdateExample extends React.Component<{}, $FlowFixMeState> { - {width}x{height} + + {width}x{height} + ); @@ -196,19 +190,23 @@ const styles = StyleSheet.create({ exports.title = 'Layout Animation'; exports.description = 'Layout animation'; -exports.examples = [{ - title: 'Add and remove views', - render(): React.Element { - return ; +exports.examples = [ + { + title: 'Add and remove views', + render(): React.Element { + return ; + }, }, -}, { - title: 'Cross fade views', - render(): React.Element { - return ; + { + title: 'Cross fade views', + render(): React.Element { + return ; + }, }, -}, { - title: 'Layout update during animation', - render(): React.Element { - return ; + { + title: 'Layout update during animation', + render(): React.Element { + return ; + }, }, -}]; +]; diff --git a/RNTester/js/LayoutEventsExample.js b/RNTester/js/LayoutEventsExample.js index b90bc27fd..f5556a868 100644 --- a/RNTester/js/LayoutEventsExample.js +++ b/RNTester/js/LayoutEventsExample.js @@ -4,29 +4,25 @@ * 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'; var React = require('react'); var ReactNative = require('react-native'); -var { - Image, - LayoutAnimation, - StyleSheet, - Text, - View, -} = ReactNative; +var {Image, LayoutAnimation, StyleSheet, Text, View} = ReactNative; import type {ViewLayout, ViewLayoutEvent} from 'ViewPropTypes'; type State = { - containerStyle?: { width: number }, + containerStyle?: {width: number}, extraText?: string, imageLayout?: ViewLayout, textLayout?: ViewLayout, viewLayout?: ViewLayout, - viewStyle: { margin: number }, + viewStyle: {margin: number}, }; class LayoutEventExample extends React.Component<{}, State> { @@ -37,24 +33,21 @@ class LayoutEventExample extends React.Component<{}, State> { }; animateViewLayout = () => { - LayoutAnimation.configureNext( - LayoutAnimation.Presets.spring, - () => { - console.log('layout animation done.'); - this.addWrapText(); - } - ); + LayoutAnimation.configureNext(LayoutAnimation.Presets.spring, () => { + console.log('layout animation done.'); + this.addWrapText(); + }); this.setState({ viewStyle: { margin: this.state.viewStyle.margin > 20 ? 20 : 60, - } + }, }); }; addWrapText = () => { this.setState( {extraText: ' And a bunch more text to wrap around a few lines.'}, - this.changeContainer + this.changeContainer, ); }; @@ -84,7 +77,10 @@ class LayoutEventExample extends React.Component<{}, State> { return ( - layout events are called on mount and whenever layout is recalculated. Note that the layout event will typically be received before the layout has updated on screen, especially when using layout animations.{' '} + layout events are called on mount and whenever layout is recalculated. + Note that the layout event will typically be received{' '} + before the layout has updated + on screen, especially when using layout animations.{' '} Press here to change layout. @@ -94,10 +90,14 @@ class LayoutEventExample extends React.Component<{}, State> { ref="img" onLayout={this.onImageLayout} style={styles.image} - source={{uri: 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851561_767334496626293_1958532586_n.png'}} + source={{ + uri: + 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851561_767334496626293_1958532586_n.png', + }} /> - ViewLayout: {JSON.stringify(this.state.viewLayout, null, ' ') + '\n\n'} + ViewLayout:{' '} + {JSON.stringify(this.state.viewLayout, null, ' ') + '\n\n'} A simple piece of text.{this.state.extraText} @@ -140,12 +140,14 @@ var styles = StyleSheet.create({ }); exports.title = 'Layout Events'; -exports.description = 'Examples that show how Layout events can be used to ' + +exports.description = + 'Examples that show how Layout events can be used to ' + 'measure view size and position.'; exports.examples = [ -{ - title: 'LayoutEventExample', - render: function(): React.Element { - return ; + { + title: 'LayoutEventExample', + render: function(): React.Element { + return ; + }, }, -}]; +]; diff --git a/RNTester/js/LayoutExample.js b/RNTester/js/LayoutExample.js index b6edcaef7..3803fcf90 100644 --- a/RNTester/js/LayoutExample.js +++ b/RNTester/js/LayoutExample.js @@ -4,17 +4,15 @@ * 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'; var React = require('react'); var ReactNative = require('react-native'); -var { - StyleSheet, - Text, - View, -} = ReactNative; +var {StyleSheet, Text, View} = ReactNative; var RNTesterBlock = require('./RNTesterBlock'); var RNTesterPage = require('./RNTesterPage'); @@ -47,9 +45,7 @@ class CircleBlock extends React.Component<$FlowFixMeProps> { marginBottom: 2, }; return ( - - {this.props.children} - + {this.props.children} ); } } @@ -65,7 +61,7 @@ class LayoutExample extends React.Component<$FlowFixMeProps> { , , , - + , ]; return ( @@ -87,7 +83,11 @@ class LayoutExample extends React.Component<$FlowFixMeProps> { {fiveColoredCircles} - + {'top: 15, left: 160'} @@ -117,30 +117,63 @@ class LayoutExample extends React.Component<$FlowFixMeProps> { flex-start - - - - - - + + + + + + + + + + + + + + + + + center - - - - - - + + + + + + + + + + + + + + + + + flex-end - - - - - - + + + + + + + + + + + + + + + + + diff --git a/RNTester/js/LinkingExample.js b/RNTester/js/LinkingExample.js index 4ee6a2742..5f6724f95 100644 --- a/RNTester/js/LinkingExample.js +++ b/RNTester/js/LinkingExample.js @@ -4,19 +4,15 @@ * 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'; var React = require('react'); var PropTypes = require('prop-types'); var ReactNative = require('react-native'); -var { - Linking, - StyleSheet, - Text, - TouchableOpacity, - View, -} = ReactNative; +var {Linking, StyleSheet, Text, TouchableOpacity, View} = ReactNative; var RNTesterBlock = require('./RNTesterBlock'); class OpenURLButton extends React.Component { @@ -29,15 +25,14 @@ class OpenURLButton extends React.Component { if (supported) { Linking.openURL(this.props.url); } else { - console.log('Don\'t know how to open URI: ' + this.props.url); + console.log("Don't know how to open URI: " + this.props.url); } }); }; render() { return ( - + Open {this.props.url} diff --git a/RNTester/js/ListExampleShared.js b/RNTester/js/ListExampleShared.js index 2aab97161..0edb7fe18 100644 --- a/RNTester/js/ListExampleShared.js +++ b/RNTester/js/ListExampleShared.js @@ -4,8 +4,10 @@ * 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'); @@ -22,7 +24,13 @@ const { View, } = ReactNative; -type Item = {title: string, text: string, key: string, pressed: boolean, noImage?: ?boolean}; +type Item = { + title: string, + text: string, + key: string, + pressed: boolean, + noImage?: ?boolean, +}; function genItemData(count: number, start: number = 0): Array { const dataBlob = []; @@ -65,12 +73,16 @@ class ItemComponent extends React.PureComponent<{ pressMagnification: 1.1, }} style={horizontal ? styles.horizItem : styles.item}> - + {!item.noImage && } + numberOfLines={horizontal || fixedHeight ? 3 : undefined}> {item.title} - {item.text} @@ -84,7 +96,9 @@ const renderStackedItem = ({item}: {item: Item}) => { const imgSource = THUMB_URLS[itemHash % THUMB_URLS.length]; return ( - {item.title} - {item.text} + + {item.title} - {item.text} + ); @@ -135,7 +149,10 @@ class SeparatorComponent extends React.PureComponent<{}> { class ItemSeparatorComponent extends React.PureComponent<$FlowFixMeProps> { render() { const style = this.props.highlighted - ? [styles.itemSeparator, {marginLeft: 0, backgroundColor: 'rgb(217, 217, 217)'}] + ? [ + styles.itemSeparator, + {marginLeft: 0, backgroundColor: 'rgb(217, 217, 217)'}, + ] : styles.itemSeparator; return ; } @@ -144,15 +161,22 @@ class ItemSeparatorComponent extends React.PureComponent<$FlowFixMeProps> { class Spindicator extends React.PureComponent<$FlowFixMeProps> { render() { return ( - + ); } } @@ -172,7 +196,8 @@ const THUMB_URLS = [ require('./Thumbnails/victory.png'), ]; -const LOREM_IPSUM = 'Lorem ipsum dolor sit amet, ius ad pertinax oportere accommodare, an vix \ +const LOREM_IPSUM = + 'Lorem ipsum dolor sit amet, ius ad pertinax oportere accommodare, an vix \ civibus corrumpit referrentur. Te nam case ludus inciderint, te mea facilisi adipiscing. Sea id \ integre luptatum. In tota sale consequuntur nec. Erat ocurreret mei ei. Eu paulo sapientem \ vulputate est, vel an accusam intellegam interesset. Nam eu stet pericula reprimique, ea vim illud \ @@ -182,7 +207,7 @@ modus, putant invidunt reprehendunt ne qui.'; function hashCode(str: string): number { let hash = 15; for (let ii = str.length - 1; ii >= 0; ii--) { - hash = ((hash << 5) - hash) + str.charCodeAt(ii); + hash = (hash << 5) - hash + str.charCodeAt(ii); } return hash; } @@ -191,15 +216,16 @@ const HEADER = {height: 30, width: 100}; const SEPARATOR_HEIGHT = StyleSheet.hairlineWidth; function getItemLayout(data: any, index: number, horizontal?: boolean) { - const [length, separator, header] = horizontal ? - [HORIZ_WIDTH, 0, HEADER.width] : [ITEM_HEIGHT, SEPARATOR_HEIGHT, HEADER.height]; + const [length, separator, header] = horizontal + ? [HORIZ_WIDTH, 0, HEADER.width] + : [ITEM_HEIGHT, SEPARATOR_HEIGHT, HEADER.height]; return {length, offset: (length + separator) * index + header, index}; } function pressItem(context: Object, key: string) { const index = Number(key); const pressed = !context.state.data[index].pressed; - context.setState((state) => { + context.setState(state => { const newData = [...state.data]; newData[index] = { ...state.data[index], @@ -220,7 +246,7 @@ function renderSmallSwitchOption(context: Object, key: string) { context.setState({[key]: value})} + onValueChange={value => context.setState({[key]: value})} /> ); diff --git a/RNTester/js/ListViewExample.js b/RNTester/js/ListViewExample.js index ea1e07baf..9e008dd40 100644 --- a/RNTester/js/ListViewExample.js +++ b/RNTester/js/ListViewExample.js @@ -4,21 +4,16 @@ * 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'; var React = require('react'); var createReactClass = require('create-react-class'); var ReactNative = require('react-native'); -var { - Image, - ListView, - TouchableHighlight, - StyleSheet, - Text, - View, -} = ReactNative; +var {Image, ListView, TouchableHighlight, StyleSheet, Text, View} = ReactNative; var RNTesterPage = require('./RNTesterPage'); @@ -26,7 +21,7 @@ var ListViewSimpleExample = createReactClass({ displayName: 'ListViewSimpleExample', statics: { title: '', - description: 'Performant, scrollable list of data.' + description: 'Performant, scrollable list of data.', }, getInitialState: function() { @@ -57,11 +52,17 @@ var ListViewSimpleExample = createReactClass({ ); }, - _renderRow: function(rowData: string, sectionID: number, rowID: number, highlightRow: (sectionID: number, rowID: number) => void) { + _renderRow: function( + rowData: string, + sectionID: number, + rowID: number, + highlightRow: (sectionID: number, rowID: number) => void, + ) { var rowHash = Math.abs(hashCode(rowData)); var imgSource = THUMB_URLS[rowHash % THUMB_URLS.length]; return ( - { + { this._pressRow(rowID); highlightRow(sectionID, rowID); }}> @@ -88,12 +89,18 @@ var ListViewSimpleExample = createReactClass({ _pressRow: function(rowID: number) { this._pressData[rowID] = !this._pressData[rowID]; - this.setState({dataSource: this.state.dataSource.cloneWithRows( - this._genRows(this._pressData) - )}); + this.setState({ + dataSource: this.state.dataSource.cloneWithRows( + this._genRows(this._pressData), + ), + }); }, - _renderSeparator: function(sectionID: number, rowID: number, adjacentRowHighlighted: bool) { + _renderSeparator: function( + sectionID: number, + rowID: number, + adjacentRowHighlighted: boolean, + ) { return ( ); - } + }, }); var THUMB_URLS = [ @@ -119,14 +126,15 @@ var THUMB_URLS = [ require('./Thumbnails/poke.png'), require('./Thumbnails/superlike.png'), require('./Thumbnails/victory.png'), - ]; -var LOREM_IPSUM = 'Lorem ipsum dolor sit amet, ius ad pertinax oportere accommodare, an vix civibus corrumpit referrentur. Te nam case ludus inciderint, te mea facilisi adipiscing. Sea id integre luptatum. In tota sale consequuntur nec. Erat ocurreret mei ei. Eu paulo sapientem vulputate est, vel an accusam intellegam interesset. Nam eu stet pericula reprimique, ea vim illud modus, putant invidunt reprehendunt ne qui.'; +]; +var LOREM_IPSUM = + 'Lorem ipsum dolor sit amet, ius ad pertinax oportere accommodare, an vix civibus corrumpit referrentur. Te nam case ludus inciderint, te mea facilisi adipiscing. Sea id integre luptatum. In tota sale consequuntur nec. Erat ocurreret mei ei. Eu paulo sapientem vulputate est, vel an accusam intellegam interesset. Nam eu stet pericula reprimique, ea vim illud modus, putant invidunt reprehendunt ne qui.'; /* eslint no-bitwise: 0 */ var hashCode = function(str) { var hash = 15; for (var ii = str.length - 1; ii >= 0; ii--) { - hash = ((hash << 5) - hash) + str.charCodeAt(ii); + hash = (hash << 5) - hash + str.charCodeAt(ii); } return hash; }; diff --git a/RNTester/js/ListViewGridLayoutExample.js b/RNTester/js/ListViewGridLayoutExample.js index 5f389596e..65a407f4d 100644 --- a/RNTester/js/ListViewGridLayoutExample.js +++ b/RNTester/js/ListViewGridLayoutExample.js @@ -4,21 +4,16 @@ * 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'; var React = require('react'); var createReactClass = require('create-react-class'); var ReactNative = require('react-native'); -var { - Image, - ListView, - TouchableHighlight, - StyleSheet, - Text, - View, -} = ReactNative; +var {Image, ListView, TouchableHighlight, StyleSheet, Text, View} = ReactNative; var THUMB_URLS = [ require('./Thumbnails/like.png'), @@ -40,7 +35,7 @@ var ListViewGridLayoutExample = createReactClass({ statics: { title: ' - Grid Layout', - description: 'Flexbox grid layout.' + description: 'Flexbox grid layout.', }, getInitialState: function() { @@ -75,13 +70,13 @@ var ListViewGridLayoutExample = createReactClass({ var rowHash = Math.abs(hashCode(rowData)); var imgSource = THUMB_URLS[rowHash % THUMB_URLS.length]; return ( - this._pressRow(rowID)} underlayColor="transparent"> + this._pressRow(rowID)} + underlayColor="transparent"> - - {rowData} - + {rowData} @@ -99,9 +94,11 @@ var ListViewGridLayoutExample = createReactClass({ _pressRow: function(rowID: number) { this._pressData[rowID] = !this._pressData[rowID]; - this.setState({dataSource: this.state.dataSource.cloneWithRows( - this._genRows(this._pressData) - )}); + this.setState({ + dataSource: this.state.dataSource.cloneWithRows( + this._genRows(this._pressData), + ), + }); }, }); @@ -109,7 +106,7 @@ var ListViewGridLayoutExample = createReactClass({ var hashCode = function(str) { var hash = 15; for (var ii = str.length - 1; ii >= 0; ii--) { - hash = ((hash << 5) - hash) + str.charCodeAt(ii); + hash = (hash << 5) - hash + str.charCodeAt(ii); } return hash; }; @@ -119,7 +116,7 @@ var styles = StyleSheet.create({ justifyContent: 'space-around', flexDirection: 'row', flexWrap: 'wrap', - alignItems: 'flex-start' + alignItems: 'flex-start', }, row: { justifyContent: 'center', @@ -131,16 +128,16 @@ var styles = StyleSheet.create({ alignItems: 'center', borderWidth: 1, borderRadius: 5, - borderColor: '#CCC' + borderColor: '#CCC', }, thumb: { width: 64, - height: 64 + height: 64, }, text: { flex: 1, marginTop: 5, - fontWeight: 'bold' + fontWeight: 'bold', }, }); diff --git a/RNTester/js/ListViewPagingExample.js b/RNTester/js/ListViewPagingExample.js index 88548ec0b..5ff64ec6c 100644 --- a/RNTester/js/ListViewPagingExample.js +++ b/RNTester/js/ListViewPagingExample.js @@ -4,8 +4,10 @@ * 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'; var React = require('react'); @@ -21,9 +23,7 @@ var { } = ReactNative; var NativeModules = require('NativeModules'); -var { - UIManager, -} = NativeModules; +var {UIManager} = NativeModules; var THUMB_URLS = [ require('./Thumbnails/like.png'), @@ -53,7 +53,10 @@ class Thumb extends React.Component<{}, $FlowFixMeState> { }; _onPressThumb = () => { - var config = layoutAnimationConfigs[this.state.thumbIndex % layoutAnimationConfigs.length]; + var config = + layoutAnimationConfigs[ + this.state.thumbIndex % layoutAnimationConfigs.length + ]; LayoutAnimation.configureNext(config); this.setState({ thumbIndex: this._getThumbIdx(), @@ -71,13 +74,14 @@ class Thumb extends React.Component<{}, $FlowFixMeState> { - {this.state.dir === 'column' ? + {this.state.dir === 'column' ? ( - Oooo, look at this new text! So awesome it may just be crazy. - Let me keep typing here so it wraps at least one line. - : + Oooo, look at this new text! So awesome it may just be crazy. Let me + keep typing here so it wraps at least one line. + + ) : ( - } + )} ); } @@ -121,36 +125,43 @@ class ListViewPagingExample extends React.Component<$FlowFixMeProps, *> { } this.state = { - dataSource: dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs), + dataSource: dataSource.cloneWithRowsAndSections( + dataBlob, + sectionIDs, + rowIDs, + ), headerPressCount: 0, }; } - renderRow = (rowData: string, sectionID: string, rowID: string): React.Element => { - return (); + renderRow = ( + rowData: string, + sectionID: string, + rowID: string, + ): React.Element => { + return ; }; renderSectionHeader = (sectionData: string, sectionID: string) => { return ( - - {sectionData} - + {sectionData} ); }; renderHeader = () => { - var headerLikeText = this.state.headerPressCount % 2 ? - 1 Like : - null; + var headerLikeText = + this.state.headerPressCount % 2 ? ( + + 1 Like + + ) : null; return ( {headerLikeText} - - Table Header (click me) - + Table Header (click me) ); @@ -171,7 +182,9 @@ class ListViewPagingExample extends React.Component<$FlowFixMeProps, *> { console.log({visibleRows, changedRows})} + onChangeVisibleRows={(visibleRows, changedRows) => + console.log({visibleRows, changedRows}) + } renderHeader={this.renderHeader} renderFooter={this.renderFooter} renderSectionHeader={this.renderSectionHeader} @@ -185,7 +198,11 @@ class ListViewPagingExample extends React.Component<$FlowFixMeProps, *> { } _onPressHeader = () => { - var config = layoutAnimationConfigs[Math.floor(this.state.headerPressCount / 2) % layoutAnimationConfigs.length]; + var config = + layoutAnimationConfigs[ + Math.floor(this.state.headerPressCount / 2) % + layoutAnimationConfigs.length + ]; LayoutAnimation.configureNext(config); this.setState({headerPressCount: this.state.headerPressCount + 1}); }; diff --git a/RNTester/js/MaskedViewExample.js b/RNTester/js/MaskedViewExample.js index 6548b7e49..081496b6f 100644 --- a/RNTester/js/MaskedViewExample.js +++ b/RNTester/js/MaskedViewExample.js @@ -4,8 +4,10 @@ * 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'); @@ -50,7 +52,7 @@ class MaskedViewExample extends React.Component<{}, $FlowFixMeState> { timing: 750, useNativeDriver: true, }), - ]) + ]), ).start(); Animated.loop( @@ -58,7 +60,7 @@ class MaskedViewExample extends React.Component<{}, $FlowFixMeState> { toValue: 360, timing: 2000, useNativeDriver: true, - }) + }), ).start(); } @@ -66,18 +68,16 @@ class MaskedViewExample extends React.Component<{}, $FlowFixMeState> { return ( - + - - Basic Mask - + Basic Mask }> - - + + @@ -90,11 +90,11 @@ class MaskedViewExample extends React.Component<{}, $FlowFixMeState> { backgroundColor: '#eeeeee', }}> @@ -102,7 +102,7 @@ class MaskedViewExample extends React.Component<{}, $FlowFixMeState> { { - + - - Basic Mask - + Basic Mask }> { }, ], }}> - - + + - + - - Basic Mask - + Basic Mask }> {this.state.alternateChildren ? [ - , - , + , + , ] : null} diff --git a/RNTester/js/ModalExample.js b/RNTester/js/ModalExample.js index eba8a646c..cfb51abe6 100644 --- a/RNTester/js/ModalExample.js +++ b/RNTester/js/ModalExample.js @@ -4,8 +4,10 @@ * 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'; var React = require('react'); @@ -52,7 +54,9 @@ class Button extends React.Component<$FlowFixMeProps, $FlowFixMeState> { onShowUnderlay={this._onHighlight} style={[styles.button, this.props.style]} underlayColor="#a9d9d4"> - {this.props.children} + + {this.props.children} + ); } @@ -77,11 +81,11 @@ class ModalExample extends React.Component<{}, $FlowFixMeState> { currentOrientation: 'unknown', }; - _setModalVisible = (visible) => { + _setModalVisible = visible => { this.setState({modalVisible: visible}); }; - _setAnimationType = (type) => { + _setAnimationType = type => { this.setState({animationType: type}); }; @@ -94,19 +98,24 @@ class ModalExample extends React.Component<{}, $FlowFixMeState> { return null; } return ( - + ); } render() { var modalBackgroundStyle = { - backgroundColor: this.state.transparent ? 'rgba(0, 0, 0, 0.5)' : '#f5fcff', + backgroundColor: this.state.transparent + ? 'rgba(0, 0, 0, 0.5)' + : '#f5fcff', }; var innerContainerTransparentStyle = this.state.transparent ? {backgroundColor: '#fff', padding: 20} : null; var activeButtonStyle = { - backgroundColor: '#ddd' + backgroundColor: '#ddd', }; return ( @@ -117,13 +126,26 @@ class ModalExample extends React.Component<{}, $FlowFixMeState> { transparent={this.state.transparent} visible={this.state.modalVisible} onRequestClose={() => this._setModalVisible(false)} - supportedOrientations={supportedOrientationsPickerValues[this.state.selectedSupportedOrientation]} - onOrientationChange={evt => this.setState({currentOrientation: evt.nativeEvent.orientation})} - > + supportedOrientations={ + supportedOrientationsPickerValues[ + this.state.selectedSupportedOrientation + ] + } + onOrientationChange={evt => + this.setState({currentOrientation: evt.nativeEvent.orientation}) + }> - - This modal was presented {this.state.animationType === 'none' ? 'without' : 'with'} animation. - It is currently displayed in {this.state.currentOrientation} mode. + + + This modal was presented{' '} + {this.state.animationType === 'none' ? 'without' : 'with'}{' '} + animation. + + + It is currently displayed in {this.state.currentOrientation}{' '} + mode. + - - @@ -166,9 +200,10 @@ class ModalExample extends React.Component<{}, $FlowFixMeState> { Presentation style this.setState({presentationStyle})} - itemStyle={styles.pickerItem} - > + onValueChange={presentationStyle => + this.setState({presentationStyle}) + } + itemStyle={styles.pickerItem}> @@ -181,9 +216,10 @@ class ModalExample extends React.Component<{}, $FlowFixMeState> { Supported orientations this.setState({selectedSupportedOrientation: i})} - itemStyle={styles.pickerItem} - > + onValueChange={(_, i) => + this.setState({selectedSupportedOrientation: i}) + } + itemStyle={styles.pickerItem}> @@ -197,7 +233,6 @@ class ModalExample extends React.Component<{}, $FlowFixMeState> { } } - exports.examples = [ { title: 'Modal Presentation', diff --git a/RNTester/js/MultiColumnExample.js b/RNTester/js/MultiColumnExample.js index 52fdaa272..468bc7440 100644 --- a/RNTester/js/MultiColumnExample.js +++ b/RNTester/js/MultiColumnExample.js @@ -4,18 +4,15 @@ * 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 ReactNative = require('react-native'); -const { - FlatList, - StyleSheet, - Text, - View, -} = ReactNative; +const {FlatList, StyleSheet, Text, View} = ReactNative; const RNTesterPage = require('./RNTesterPage'); @@ -33,7 +30,10 @@ const { renderSmallSwitchOption, } = require('./ListExampleShared'); -class MultiColumnExample extends React.PureComponent<$FlowFixMeProps, $FlowFixMeState> { +class MultiColumnExample extends React.PureComponent< + $FlowFixMeProps, + $FlowFixMeState, +> { static title = ' - MultiColumn'; static description = 'Performant, scrollable grid of data.'; @@ -45,15 +45,16 @@ class MultiColumnExample extends React.PureComponent<$FlowFixMeProps, $FlowFixMe numColumns: 2, virtualized: true, }; - _onChangeFilterText = (filterText) => { + _onChangeFilterText = filterText => { this.setState(() => ({filterText})); }; - _onChangeNumColumns = (numColumns) => { + _onChangeNumColumns = numColumns => { this.setState(() => ({numColumns: Number(numColumns)})); }; render() { const filterRegex = new RegExp(String(this.state.filterText), 'i'); - const filter = (item) => (filterRegex.test(item.text) || filterRegex.test(item.title)); + const filter = item => + filterRegex.test(item.text) || filterRegex.test(item.title); const filteredData = this.state.data.filter(filter); return ( - numColumns: + numColumns: ); } - _getItemLayout(data: any, index: number): {length: number, offset: number, index: number} { - const length = getItemLayout(data, index).length + 2 * (CARD_MARGIN + BORDER_WIDTH); + _getItemLayout( + data: any, + index: number, + ): {length: number, offset: number, index: number} { + const length = + getItemLayout(data, index).length + 2 * (CARD_MARGIN + BORDER_WIDTH); return {length, offset: length * index, index}; } _renderItemComponent = ({item}) => { @@ -116,12 +123,19 @@ class MultiColumnExample extends React.PureComponent<$FlowFixMeProps, $FlowFixMe // This is called when items change viewability by scrolling into or out of the viewable area. _onViewableItemsChanged = (info: { changed: Array<{ - key: string, isViewable: boolean, item: {columns: Array<*>}, index: ?number, section?: any - }>}, - ) => { + key: string, + isViewable: boolean, + item: {columns: Array<*>}, + index: ?number, + section?: any, + }>, + }) => { // Impressions can be logged here if (this.state.logViewable) { - infoLog('onViewableItemsChanged: ', info.changed.map((v) => ({...v, item: '...'}))); + infoLog( + 'onViewableItemsChanged: ', + info.changed.map(v => ({...v, item: '...'})), + ); } }; _pressItem = (key: string) => { diff --git a/RNTester/js/NativeAnimationsExample.js b/RNTester/js/NativeAnimationsExample.js index 52cb766c8..44d5416c4 100644 --- a/RNTester/js/NativeAnimationsExample.js +++ b/RNTester/js/NativeAnimationsExample.js @@ -4,8 +4,10 @@ * 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'); @@ -30,9 +32,10 @@ class Tester extends React.Component<$FlowFixMeProps, $FlowFixMeState> { current = 0; onPress = () => { - const animConfig = this.current && this.props.reverseConfig - ? this.props.reverseConfig - : this.props.config; + const animConfig = + this.current && this.props.reverseConfig + ? this.props.reverseConfig + : this.props.config; this.current = this.current ? 0 : 1; const config: Object = { ...animConfig, @@ -62,9 +65,7 @@ class Tester extends React.Component<$FlowFixMeProps, $FlowFixMeState> { JavaScript: - - {this.props.children(this.state.js)} - + {this.props.children(this.state.js)} ); @@ -155,7 +156,10 @@ class LoopExample extends React.Component<{}, $FlowFixMeState> { } const RNTesterSettingSwitchRow = require('RNTesterSettingSwitchRow'); -class InternalSettings extends React.Component<{}, {busyTime: number | string, filteredStall: number}> { +class InternalSettings extends React.Component< + {}, + {busyTime: number | string, filteredStall: number}, +> { _stallInterval: ?number; render() { return ( @@ -170,8 +174,7 @@ class InternalSettings extends React.Component<{}, {busyTime: number | string, f this._stallInterval = setInterval(() => { const start = Date.now(); console.warn('burn CPU'); - while (Date.now() - start < 100) { - } + while (Date.now() - start < 100) {} }, 300); }} onDisable={() => { @@ -191,8 +194,8 @@ class InternalSettings extends React.Component<{}, {busyTime: number | string, f onStall: ({busyTime}) => this.setState(state => ({ busyTime, - filteredStall: (state.filteredStall || 0) * 0.97 + - busyTime * 0.03, + filteredStall: + (state.filteredStall || 0) * 0.97 + busyTime * 0.03, })), }); }} @@ -200,11 +203,12 @@ class InternalSettings extends React.Component<{}, {busyTime: number | string, f console.warn('Cannot disable yet....'); }} /> - {this.state && + {this.state && ( {`JS Stall filtered: ${Math.round(this.state.filteredStall)}, `} {`last: ${this.state.busyTime}`} - } + + )} ); } @@ -252,7 +256,10 @@ class EventExample extends React.Component<{}, $FlowFixMeState> { } } -class TrackingExample extends React.Component<$FlowFixMeProps, $FlowFixMeState> { +class TrackingExample extends React.Component< + $FlowFixMeProps, + $FlowFixMeState, +> { state = { native: new Animated.Value(0), toNative: new Animated.Value(0), @@ -287,9 +294,15 @@ class TrackingExample extends React.Component<$FlowFixMeProps, $FlowFixMeState> }; renderBlock = (anim, dest) => [ - , - , - ] + , + , + ]; render() { return ( @@ -572,7 +585,7 @@ exports.examples = [ title: 'translateX => Animated.spring (stiffness/damping/mass)', render: function() { return ( - + {anim => ( - - {this.props.text} - + {this.props.text} ); } diff --git a/RNTester/js/NavigatorIOSColorsExample.js b/RNTester/js/NavigatorIOSColorsExample.js index cdcf6edb7..d9a7cbb29 100644 --- a/RNTester/js/NavigatorIOSColorsExample.js +++ b/RNTester/js/NavigatorIOSColorsExample.js @@ -4,26 +4,20 @@ * 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'; var React = require('react'); var ReactNative = require('react-native'); -var { - NavigatorIOS, - StatusBar, - StyleSheet, - Text, - View -} = ReactNative; +var {NavigatorIOS, StatusBar, StyleSheet, Text, View} = ReactNative; class EmptyPage extends React.Component { render() { return ( - - {this.props.text} - + {this.props.text} ); } @@ -49,7 +43,8 @@ class NavigatorIOSColors extends React.Component { this.props.onExampleExit(); }, passProps: { - text: 'The nav bar has custom colors with tintColor, ' + + text: + 'The nav bar has custom colors with tintColor, ' + 'barTintColor and titleTextColor props.', }, }} diff --git a/RNTester/js/NavigatorIOSExample.js b/RNTester/js/NavigatorIOSExample.js index 3712b7c4d..252bf0e9e 100644 --- a/RNTester/js/NavigatorIOSExample.js +++ b/RNTester/js/NavigatorIOSExample.js @@ -4,8 +4,10 @@ * 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'); @@ -28,9 +30,7 @@ class EmptyPage extends React.Component<$FlowFixMeProps> { render() { return ( - - {this.props.text} - + {this.props.text} ); } @@ -44,7 +44,7 @@ class NavigatorIOSExamplePage extends React.Component<$FlowFixMeProps> { } return ( - + {this._renderRow(recurseTitle, () => { this.props.navigator.push({ @@ -75,7 +75,7 @@ class NavigatorIOSExamplePage extends React.Component<$FlowFixMeProps> { onRightButtonPress: () => this.props.navigator.pop(), passProps: { text: 'This page has a right button in the nav bar', - } + }, }); })} {this._renderRow('Custom Right System Button', () => { @@ -86,7 +86,7 @@ class NavigatorIOSExamplePage extends React.Component<$FlowFixMeProps> { onRightButtonPress: () => this.props.navigator.pop(), passProps: { text: 'This page has a right system button in the nav bar', - } + }, }); })} {this._renderRow('Custom Left & Right Icons', () => { @@ -98,7 +98,7 @@ class NavigatorIOSExamplePage extends React.Component<$FlowFixMeProps> { rightButtonIcon: nativeImageSource({ ios: 'NavBarButtonPlus', width: 17, - height: 17 + height: 17, }), onRightButtonPress: () => { AlertIOS.alert( @@ -109,12 +109,13 @@ class NavigatorIOSExamplePage extends React.Component<$FlowFixMeProps> { text: 'OK', onPress: () => console.log('Tapped OK'), }, - ] + ], ); }, passProps: { - text: 'This page has an icon for the right button in the nav bar', - } + text: + 'This page has an icon for the right button in the nav bar', + }, }); })} {this._renderRow('Custom Left & Right System Icons', () => { @@ -133,12 +134,13 @@ class NavigatorIOSExamplePage extends React.Component<$FlowFixMeProps> { text: 'OK', onPress: () => console.log('Tapped OK'), }, - ] + ], ); }, passProps: { - text: 'This page has an icon for the right button in the nav bar', - } + text: + 'This page has an icon for the right button in the nav bar', + }, }); })} {this._renderRow('Pop', () => { @@ -150,9 +152,12 @@ class NavigatorIOSExamplePage extends React.Component<$FlowFixMeProps> { {this._renderReplace()} {this._renderReplacePrevious()} {this._renderReplacePreviousAndPop()} - {this._renderRow('Exit NavigatorIOS Example', this.props.onExampleExit)} + {this._renderRow( + 'Exit NavigatorIOS Example', + this.props.onExampleExit, + )} - + ); } @@ -170,9 +175,10 @@ class NavigatorIOSExamplePage extends React.Component<$FlowFixMeProps> { rightButtonTitle: 'Undo', onRightButtonPress: () => this.props.navigator.replace(prevRoute), passProps: { - text: 'The component is replaced, but there is currently no ' + + text: + 'The component is replaced, but there is currently no ' + 'way to change the right button or title of the current route', - } + }, }); }); }; @@ -216,9 +222,7 @@ class NavigatorIOSExamplePage extends React.Component<$FlowFixMeProps> { - - {title} - + {title} diff --git a/RNTester/js/NetInfoExample.js b/RNTester/js/NetInfoExample.js index b81251949..c3b62afdf 100644 --- a/RNTester/js/NetInfoExample.js +++ b/RNTester/js/NetInfoExample.js @@ -4,18 +4,15 @@ * 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 ReactNative = require('react-native'); -const { - NetInfo, - Text, - View, - TouchableWithoutFeedback, -} = ReactNative; +const {NetInfo, Text, View, TouchableWithoutFeedback} = ReactNative; class ConnectionInfoSubscription extends React.Component<{}, $FlowFixMeState> { state = { @@ -23,20 +20,14 @@ class ConnectionInfoSubscription extends React.Component<{}, $FlowFixMeState> { }; componentDidMount() { - NetInfo.addEventListener( - 'change', - this._handleConnectionInfoChange - ); + NetInfo.addEventListener('change', this._handleConnectionInfoChange); } componentWillUnmount() { - NetInfo.removeEventListener( - 'change', - this._handleConnectionInfoChange - ); + NetInfo.removeEventListener('change', this._handleConnectionInfoChange); } - _handleConnectionInfoChange = (connectionInfo) => { + _handleConnectionInfoChange = connectionInfo => { const connectionInfoHistory = this.state.connectionInfoHistory.slice(); connectionInfoHistory.push(connectionInfo); this.setState({ @@ -46,9 +37,9 @@ class ConnectionInfoSubscription extends React.Component<{}, $FlowFixMeState> { render() { return ( - - {JSON.stringify(this.state.connectionInfoHistory)} - + + {JSON.stringify(this.state.connectionInfoHistory)} + ); } } @@ -59,23 +50,17 @@ class ConnectionInfoCurrent extends React.Component<{}, $FlowFixMeState> { }; componentDidMount() { - NetInfo.addEventListener( - 'change', - this._handleConnectionInfoChange - ); - NetInfo.fetch().done( - (connectionInfo) => { this.setState({connectionInfo}); } - ); + NetInfo.addEventListener('change', this._handleConnectionInfoChange); + NetInfo.fetch().done(connectionInfo => { + this.setState({connectionInfo}); + }); } componentWillUnmount() { - NetInfo.removeEventListener( - 'change', - this._handleConnectionInfoChange - ); + NetInfo.removeEventListener('change', this._handleConnectionInfoChange); } - _handleConnectionInfoChange = (connectionInfo) => { + _handleConnectionInfoChange = connectionInfo => { this.setState({ connectionInfo, }); @@ -83,9 +68,9 @@ class ConnectionInfoCurrent extends React.Component<{}, $FlowFixMeState> { render() { return ( - - {this.state.connectionInfo} - + + {this.state.connectionInfo} + ); } } @@ -97,22 +82,22 @@ class IsConnected extends React.Component<{}, $FlowFixMeState> { componentDidMount() { NetInfo.isConnected.addEventListener( - 'change', - this._handleConnectivityChange - ); - NetInfo.isConnected.fetch().done( - (isConnected) => { this.setState({isConnected}); } + 'change', + this._handleConnectivityChange, ); + NetInfo.isConnected.fetch().done(isConnected => { + this.setState({isConnected}); + }); } componentWillUnmount() { NetInfo.isConnected.removeEventListener( - 'change', - this._handleConnectivityChange + 'change', + this._handleConnectivityChange, ); } - _handleConnectivityChange = (isConnected) => { + _handleConnectivityChange = isConnected => { this.setState({ isConnected, }); @@ -120,37 +105,40 @@ class IsConnected extends React.Component<{}, $FlowFixMeState> { render() { return ( - - {this.state.isConnected ? 'Online' : 'Offline'} - + + {this.state.isConnected ? 'Online' : 'Offline'} + ); } } class IsConnectionExpensive extends React.Component<{}, $FlowFixMeState> { state = { - isConnectionExpensive: (null : ?boolean), + isConnectionExpensive: (null: ?boolean), }; _checkIfExpensive = () => { - NetInfo.isConnectionExpensive().then( - isConnectionExpensive => { this.setState({isConnectionExpensive}); } - ); + NetInfo.isConnectionExpensive().then(isConnectionExpensive => { + this.setState({isConnectionExpensive}); + }); }; render() { return ( - - - - Click to see if connection is expensive: - {this.state.isConnectionExpensive === true ? 'Expensive' : - this.state.isConnectionExpensive === false ? 'Not expensive' - : 'Unknown'} - - - - + + + + + Click to see if connection is expensive: + {this.state.isConnectionExpensive === true + ? 'Expensive' + : this.state.isConnectionExpensive === false + ? 'Not expensive' + : 'Unknown'} + + + + ); } } @@ -161,22 +149,30 @@ exports.examples = [ { title: 'NetInfo.isConnected', description: 'Asynchronously load and observe connectivity', - render(): React.Element { return ; } + render(): React.Element { + return ; + }, }, { title: 'NetInfo.update', description: 'Asynchronously load and observe connectionInfo', - render(): React.Element { return ; } + render(): React.Element { + return ; + }, }, { title: 'NetInfo.updateHistory', description: 'Observed updates to connectionInfo', - render(): React.Element { return ; } + render(): React.Element { + return ; + }, }, { platform: 'android', title: 'NetInfo.isConnectionExpensive (Android)', description: 'Asynchronously check isConnectionExpensive', - render(): React.Element { return ; } + render(): React.Element { + return ; + }, }, ]; diff --git a/RNTester/js/OrientationChangeExample.js b/RNTester/js/OrientationChangeExample.js index 0c07d21a0..cb2bee02c 100644 --- a/RNTester/js/OrientationChangeExample.js +++ b/RNTester/js/OrientationChangeExample.js @@ -4,17 +4,15 @@ * 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 ReactNative = require('react-native'); -const { - DeviceEventEmitter, - Text, - View, -} = ReactNative; +const {DeviceEventEmitter, Text, View} = ReactNative; import type EmitterSubscription from 'EmitterSubscription'; @@ -29,7 +27,8 @@ class OrientationChangeExample extends React.Component<{}, $FlowFixMeState> { componentDidMount() { this._orientationSubscription = DeviceEventEmitter.addListener( - 'namedOrientationDidChange', this._onOrientationChange, + 'namedOrientationDidChange', + this._onOrientationChange, ); } @@ -43,7 +42,7 @@ class OrientationChangeExample extends React.Component<{}, $FlowFixMeState> { orientationDegrees: orientation.rotationDegrees, isLandscape: orientation.isLandscape, }); - } + }; render() { return ( @@ -60,6 +59,8 @@ exports.examples = [ { title: 'OrientationChangeExample', description: 'listening to device orientation changes', - render() { return ; }, + render() { + return ; + }, }, ]; diff --git a/RNTester/js/PanResponderExample.js b/RNTester/js/PanResponderExample.js index 598de1eac..8e0d44a35 100644 --- a/RNTester/js/PanResponderExample.js +++ b/RNTester/js/PanResponderExample.js @@ -4,18 +4,16 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * + * @format * @flow weak */ + 'use strict'; var React = require('react'); var createReactClass = require('create-react-class'); var ReactNative = require('react-native'); -var { - PanResponder, - StyleSheet, - View, -} = ReactNative; +var {PanResponder, StyleSheet, View} = ReactNative; var CIRCLE_SIZE = 80; @@ -24,14 +22,15 @@ var PanResponderExample = createReactClass({ statics: { title: 'PanResponder Sample', - description: 'Shows the use of PanResponder to provide basic gesture handling.', + description: + 'Shows the use of PanResponder to provide basic gesture handling.', }, _panResponder: {}, _previousLeft: 0, _previousTop: 0, _circleStyles: {}, - circle: (null : ?{ setNativeProps(props: Object): void }), + circle: (null: ?{setNativeProps(props: Object): void}), UNSAFE_componentWillMount: function() { this._panResponder = PanResponder.create({ @@ -49,7 +48,7 @@ var PanResponderExample = createReactClass({ left: this._previousLeft, top: this._previousTop, backgroundColor: 'green', - } + }, }; }, @@ -59,10 +58,9 @@ var PanResponderExample = createReactClass({ render: function() { return ( - + { + ref={circle => { this.circle = circle; }} style={styles.circle} @@ -86,12 +84,18 @@ var PanResponderExample = createReactClass({ this.circle && this.circle.setNativeProps(this._circleStyles); }, - _handleStartShouldSetPanResponder: function(e: Object, gestureState: Object): boolean { + _handleStartShouldSetPanResponder: function( + e: Object, + gestureState: Object, + ): boolean { // Should we become active when the user presses down on the circle? return true; }, - _handleMoveShouldSetPanResponder: function(e: Object, gestureState: Object): boolean { + _handleMoveShouldSetPanResponder: function( + e: Object, + gestureState: Object, + ): boolean { // Should we become active when the user moves a touch over the circle? return true; }, diff --git a/RNTester/js/PermissionsExampleAndroid.android.js b/RNTester/js/PermissionsExampleAndroid.android.js index 322307f32..81a7ec5b1 100644 --- a/RNTester/js/PermissionsExampleAndroid.android.js +++ b/RNTester/js/PermissionsExampleAndroid.android.js @@ -4,8 +4,10 @@ * 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'); @@ -40,19 +42,34 @@ class PermissionsExample extends React.Component<{}, $FlowFixMeState> { style={styles.picker} selectedValue={this.state.permission} onValueChange={this._onSelectPermission.bind(this)}> - - - + + + - Check Permission + + Check Permission + - Permission Status: {this.state.hasPermission} + + Permission Status: {this.state.hasPermission} + - Request Permission + + Request Permission + @@ -68,25 +85,22 @@ class PermissionsExample extends React.Component<{}, $FlowFixMeState> { _checkPermission = async () => { let result = await PermissionsAndroid.check(this.state.permission); this.setState({ - hasPermission: (result ? 'Granted' : 'Revoked') + ' for ' + - this.state.permission, + hasPermission: + (result ? 'Granted' : 'Revoked') + ' for ' + this.state.permission, }); }; _requestPermission = async () => { - let result = await PermissionsAndroid.request( - this.state.permission, - { - title: 'Permission Explanation', - message: - 'The app needs the following permission ' + this.state.permission + - ' because of reasons. Please approve.' - }, - ); + let result = await PermissionsAndroid.request(this.state.permission, { + title: 'Permission Explanation', + message: + 'The app needs the following permission ' + + this.state.permission + + ' because of reasons. Please approve.', + }); this.setState({ - hasPermission: result + ' for ' + - this.state.permission, + hasPermission: result + ' for ' + this.state.permission, }); }; } @@ -94,7 +108,8 @@ class PermissionsExample extends React.Component<{}, $FlowFixMeState> { exports.examples = [ { title: 'Permissions Example', - description: 'Short example of how to use the runtime permissions API introduced in Android M.', + description: + 'Short example of how to use the runtime permissions API introduced in Android M.', render: () => , }, ]; @@ -116,5 +131,5 @@ var styles = StyleSheet.create({ }, picker: { flex: 1, - } + }, }); diff --git a/RNTester/js/PickerExample.js b/RNTester/js/PickerExample.js index 4bd2fd2c3..6026ac74e 100644 --- a/RNTester/js/PickerExample.js +++ b/RNTester/js/PickerExample.js @@ -4,8 +4,10 @@ * 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'); @@ -14,10 +16,7 @@ const StyleSheet = require('StyleSheet'); const RNTesterBlock = require('RNTesterBlock'); const RNTesterPage = require('RNTesterPage'); -const { - Picker, - Text, -} = ReactNative; +const {Picker, Text} = ReactNative; const Item = Picker.Item; @@ -46,7 +45,10 @@ class PickerExample extends React.Component<{}, $FlowFixMeState> { - + @@ -77,7 +79,8 @@ class PickerExample extends React.Component<{}, $FlowFixMeState> { - Cannot change the value of this picker because it doesn't update selectedValue. + Cannot change the value of this picker because it doesn't update + selectedValue. @@ -105,7 +108,8 @@ class PickerExample extends React.Component<{}, $FlowFixMeState> { } changeMode = () => { - const newMode = this.state.mode === Picker.MODE_DIALOG + const newMode = + this.state.mode === Picker.MODE_DIALOG ? Picker.MODE_DROPDOWN : Picker.MODE_DIALOG; this.setState({mode: newMode}); diff --git a/RNTester/js/PickerIOSExample.js b/RNTester/js/PickerIOSExample.js index 4202fd517..0ca1f6145 100644 --- a/RNTester/js/PickerIOSExample.js +++ b/RNTester/js/PickerIOSExample.js @@ -4,17 +4,15 @@ * 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'; var React = require('react'); var ReactNative = require('react-native'); -var { - PickerIOS, - Text, - View, -} = ReactNative; +var {PickerIOS, Text, View} = ReactNative; var PickerItemIOS = PickerIOS.Item; @@ -25,7 +23,16 @@ var CAR_MAKES_AND_MODELS = { }, alfa: { name: 'Alfa-Romeo', - models: ['159', '4C', 'Alfasud', 'Brera', 'GTV6', 'Giulia', 'MiTo', 'Spider'], + models: [ + '159', + '4C', + 'Alfasud', + 'Brera', + 'GTV6', + 'Giulia', + 'MiTo', + 'Spider', + ], }, aston: { name: 'Aston Martin', @@ -33,7 +40,19 @@ var CAR_MAKES_AND_MODELS = { }, audi: { name: 'Audi', - models: ['90', '4000', '5000', 'A3', 'A4', 'A5', 'A6', 'A7', 'A8', 'Q5', 'Q7'], + models: [ + '90', + '4000', + '5000', + 'A3', + 'A4', + 'A5', + 'A6', + 'A7', + 'A8', + 'Q5', + 'Q7', + ], }, austin: { name: 'Austin', @@ -45,8 +64,15 @@ var CAR_MAKES_AND_MODELS = { }, buick: { name: 'Buick', - models: ['Electra', 'LaCrosse', 'LeSabre', 'Park Avenue', 'Regal', - 'Roadmaster', 'Skylark'], + models: [ + 'Electra', + 'LaCrosse', + 'LeSabre', + 'Park Avenue', + 'Regal', + 'Roadmaster', + 'Skylark', + ], }, cadillac: { name: 'Cadillac', @@ -54,8 +80,21 @@ var CAR_MAKES_AND_MODELS = { }, chevrolet: { name: 'Chevrolet', - models: ['Astro', 'Aveo', 'Bel Air', 'Captiva', 'Cavalier', 'Chevelle', - 'Corvair', 'Corvette', 'Cruze', 'Nova', 'SS', 'Vega', 'Volt'], + models: [ + 'Astro', + 'Aveo', + 'Bel Air', + 'Captiva', + 'Cavalier', + 'Chevelle', + 'Corvair', + 'Corvette', + 'Cruze', + 'Nova', + 'SS', + 'Vega', + 'Volt', + ], }, }; @@ -73,8 +112,8 @@ class PickerExample extends React.Component<{}, $FlowFixMeState> { Please choose a make for your car: this.setState({carMake, modelIndex: 0})}> - {Object.keys(CAR_MAKES_AND_MODELS).map((carMake) => ( + onValueChange={carMake => this.setState({carMake, modelIndex: 0})}> + {Object.keys(CAR_MAKES_AND_MODELS).map(carMake => ( { this.setState({modelIndex})}> - {CAR_MAKES_AND_MODELS[this.state.carMake].models.map((modelName, modelIndex) => ( - - ))} + onValueChange={modelIndex => this.setState({modelIndex})}> + {CAR_MAKES_AND_MODELS[this.state.carMake].models.map( + (modelName, modelIndex) => ( + + ), + )} You selected: {selectionString} @@ -110,10 +151,15 @@ class PickerStyleExample extends React.Component<{}, $FlowFixMeState> { render() { return ( this.setState({carMake, modelIndex: 0})}> - {Object.keys(CAR_MAKES_AND_MODELS).map((carMake) => ( + onValueChange={carMake => this.setState({carMake, modelIndex: 0})}> + {Object.keys(CAR_MAKES_AND_MODELS).map(carMake => ( ', - render: function(): React.Element { - return ; + { + title: '', + render: function(): React.Element { + return ; + }, }, -}, -{ - title: ' with custom styling', - render: function(): React.Element { - return ; + { + title: ' with custom styling', + render: function(): React.Element { + return ; + }, }, -}]; +]; diff --git a/RNTester/js/PointerEventsExample.js b/RNTester/js/PointerEventsExample.js index 1fc85702a..b22fb8b33 100644 --- a/RNTester/js/PointerEventsExample.js +++ b/RNTester/js/PointerEventsExample.js @@ -4,24 +4,22 @@ * 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'; var React = require('react'); var ReactNative = require('react-native'); -var { - StyleSheet, - Text, - View, -} = ReactNative; +var {StyleSheet, Text, View} = ReactNative; class ExampleBox extends React.Component<$FlowFixMeProps, $FlowFixMeState> { state = { log: [], }; - handleLog = (msg) => { + handleLog = msg => { this.state.log = this.state.log.concat([msg]); }; @@ -48,8 +46,7 @@ class ExampleBox extends React.Component<$FlowFixMeProps, $FlowFixMeState> { * React. To see the error delete this comment and run Flow. */} - + {this.state.log.join('\n')} @@ -65,9 +62,7 @@ class NoneExample extends React.Component<$FlowFixMeProps> { this.props.onLog('A unspecified touched')} style={styles.box}> - - A: unspecified - + A: unspecified this.props.onLog('B none touched')} @@ -96,10 +91,7 @@ class DemoText extends React.Component<$FlowFixMeProps> { render() { return ( - - {this.props.children} - + {this.props.children} ); } @@ -111,9 +103,7 @@ class BoxNoneExample extends React.Component<$FlowFixMeProps> { this.props.onLog('A unspecified touched')} style={styles.box}> - - A: unspecified - + A: unspecified this.props.onLog('B box-none touched')} @@ -124,17 +114,15 @@ class BoxNoneExample extends React.Component<$FlowFixMeProps> { this.props.onLog('C unspecified touched')} style={styles.box}> - - C: unspecified - + C: unspecified this.props.onLog('C explicitly unspecified touched')} + onTouchStart={() => + this.props.onLog('C explicitly unspecified touched') + } style={[styles.box]}> - - C: explicitly unspecified - + C: explicitly unspecified @@ -148,16 +136,12 @@ class BoxOnlyExample extends React.Component<$FlowFixMeProps> { this.props.onLog('A unspecified touched')} style={styles.box}> - - A: unspecified - + A: unspecified this.props.onLog('B box-only touched')} style={styles.box}> - - B: box-only - + B: box-only this.props.onLog('C unspecified touched')} style={[styles.box, styles.boxPassedThrough]}> @@ -167,7 +151,9 @@ class BoxOnlyExample extends React.Component<$FlowFixMeProps> { this.props.onLog('C explicitly unspecified touched')} + onTouchStart={() => + this.props.onLog('C explicitly unspecified touched') + } style={[styles.box, styles.boxPassedThrough]}> C: explicitly unspecified @@ -189,21 +175,24 @@ var exampleClasses: Array = [ { Component: NoneExample, title: '`none`', - description: '`none` causes touch events on the container and its child components to pass through to the parent container.', + description: + '`none` causes touch events on the container and its child components to pass through to the parent container.', }, { Component: BoxNoneExample, title: '`box-none`', - description: '`box-none` causes touch events on the container to pass through and will only detect touch events on its child components.', + description: + '`box-none` causes touch events on the container to pass through and will only detect touch events on its child components.', }, { Component: BoxOnlyExample, title: '`box-only`', - description: '`box-only` causes touch events on the container\'s child components to pass through and will only detect touch events on the container itself.', - } + description: + "`box-only` causes touch events on the container's child components to pass through and will only detect touch events on the container itself.", + }, ]; -var infoToExample = (info) => { +var infoToExample = info => { return { title: info.title, description: info.description, @@ -248,7 +237,8 @@ var styles = StyleSheet.create({ exports.framework = 'React'; exports.title = 'Pointer Events'; -exports.description = 'Demonstrates the use of the pointerEvents prop of a ' + +exports.description = + 'Demonstrates the use of the pointerEvents prop of a ' + 'View to control how touches should be handled.'; /* $FlowFixMe(>=0.70.0 site=react_native_fb) This comment suppresses an error * found when Flow v0.70 was deployed. To see the error delete this comment diff --git a/RNTester/js/ProgressBarAndroidExample.android.js b/RNTester/js/ProgressBarAndroidExample.android.js index 1d55779d5..2b3d7feea 100644 --- a/RNTester/js/ProgressBarAndroidExample.android.js +++ b/RNTester/js/ProgressBarAndroidExample.android.js @@ -4,8 +4,10 @@ * 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'; var ProgressBar = require('ProgressBarAndroid'); @@ -22,17 +24,15 @@ var MovingBar = createReactClass({ getInitialState: function() { return { - progress: 0 + progress: 0, }; }, componentDidMount: function() { - this.setInterval( - () => { - var progress = (this.state.progress + 0.02) % 1; - this.setState({progress: progress}); - }, 50 - ); + this.setInterval(() => { + var progress = (this.state.progress + 0.02) % 1; + this.setState({progress: progress}); + }, 50); }, render: function() { @@ -60,7 +60,11 @@ class ProgressBarAndroidExample extends React.Component<{}> { - + ); diff --git a/RNTester/js/ProgressViewIOSExample.js b/RNTester/js/ProgressViewIOSExample.js index 821fe2e25..f691d9d3f 100644 --- a/RNTester/js/ProgressViewIOSExample.js +++ b/RNTester/js/ProgressViewIOSExample.js @@ -4,18 +4,16 @@ * 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'; var React = require('react'); var createReactClass = require('create-react-class'); var ReactNative = require('react-native'); -var { - ProgressViewIOS, - StyleSheet, - View, -} = ReactNative; +var {ProgressViewIOS, StyleSheet, View} = ReactNative; /* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error * found when Flow v0.54 was deployed. To see the error delete this comment and * run Flow. */ @@ -37,7 +35,7 @@ var ProgressViewExample = createReactClass({ updateProgress() { var progress = this.state.progress + 0.01; - this.setState({ progress }); + this.setState({progress}); this.requestAnimationFrame(() => this.updateProgress()); }, @@ -49,11 +47,30 @@ var ProgressViewExample = createReactClass({ render() { return ( - - - - - + + + + + ); }, @@ -63,14 +80,14 @@ exports.displayName = (undefined: ?string); exports.framework = 'React'; exports.title = 'ProgressViewIOS'; exports.description = 'ProgressViewIOS'; -exports.examples = [{ - title: 'ProgressViewIOS', - render() { - return ( - - ); - } -}]; +exports.examples = [ + { + title: 'ProgressViewIOS', + render() { + return ; + }, + }, +]; var styles = StyleSheet.create({ container: { @@ -79,5 +96,5 @@ var styles = StyleSheet.create({ }, progressView: { marginTop: 20, - } + }, }); diff --git a/RNTester/js/PushNotificationIOSExample.js b/RNTester/js/PushNotificationIOSExample.js index b2c54165a..f4e86ef5d 100644 --- a/RNTester/js/PushNotificationIOSExample.js +++ b/RNTester/js/PushNotificationIOSExample.js @@ -4,8 +4,10 @@ * 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'; var React = require('react'); @@ -26,9 +28,7 @@ class Button extends React.Component<$FlowFixMeProps> { underlayColor={'white'} style={styles.button} onPress={this.props.onPress}> - - {this.props.label} - + {this.props.label} ); } @@ -37,18 +37,36 @@ class Button extends React.Component<$FlowFixMeProps> { 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); + PushNotificationIOS.addEventListener( + 'registrationError', + this._onRegistrationError, + ); + PushNotificationIOS.addEventListener( + 'notification', + this._onRemoteNotification, + ); + PushNotificationIOS.addEventListener( + 'localNotification', + this._onLocalNotification, + ); PushNotificationIOS.requestPermissions(); } componentWillUnmount() { PushNotificationIOS.removeEventListener('register', this._onRegistered); - PushNotificationIOS.removeEventListener('registrationError', this._onRegistrationError); - PushNotificationIOS.removeEventListener('notification', this._onRemoteNotification); - PushNotificationIOS.removeEventListener('localNotification', this._onLocalNotification); + PushNotificationIOS.removeEventListener( + 'registrationError', + this._onRegistrationError, + ); + PushNotificationIOS.removeEventListener( + 'notification', + this._onRemoteNotification, + ); + PushNotificationIOS.removeEventListener( + 'localNotification', + this._onLocalNotification, + ); } render() { @@ -86,7 +104,7 @@ class NotificationExample extends React.Component<{}> { alert: 'Sample local notification', badge: '+1', sound: 'default', - category: 'REACT_NATIVE' + category: 'REACT_NATIVE', }, }); } @@ -95,10 +113,12 @@ class NotificationExample extends React.Component<{}> { AlertIOS.alert( 'Registered For Remote Push', `Device Token: ${deviceToken}`, - [{ - text: 'Dismiss', - onPress: null, - }] + [ + { + text: 'Dismiss', + onPress: null, + }, + ], ); } @@ -106,10 +126,12 @@ class NotificationExample extends React.Component<{}> { AlertIOS.alert( 'Failed To Register For Remote Push', `Error (${error.code}): ${error.message}`, - [{ - text: 'Dismiss', - onPress: null, - }] + [ + { + text: 'Dismiss', + onPress: null, + }, + ], ); } @@ -120,29 +142,32 @@ class NotificationExample extends React.Component<{}> { category: ${notification.getCategory()};\n content-available: ${notification.getContentAvailable()}.`; - AlertIOS.alert( - 'Push Notification Received', - result, - [{ + AlertIOS.alert('Push Notification Received', result, [ + { text: 'Dismiss', onPress: null, - }] - ); + }, + ]); } - _onLocalNotification(notification){ + _onLocalNotification(notification) { AlertIOS.alert( 'Local Notification Received', 'Alert message: ' + notification.getMessage(), - [{ - text: 'Dismiss', - onPress: null, - }] + [ + { + text: 'Dismiss', + onPress: null, + }, + ], ); } } -class NotificationPermissionExample extends React.Component<$FlowFixMeProps, any> { +class NotificationPermissionExample extends React.Component< + $FlowFixMeProps, + any, +> { constructor(props) { super(props); this.state = {permissions: null}; @@ -155,15 +180,13 @@ class NotificationPermissionExample extends React.Component<$FlowFixMeProps, any onPress={this._showPermissions.bind(this)} label="Show enabled permissions" /> - - {JSON.stringify(this.state.permissions)} - + {JSON.stringify(this.state.permissions)} ); } _showPermissions() { - PushNotificationIOS.checkPermissions((permissions) => { + PushNotificationIOS.checkPermissions(permissions => { this.setState({permissions}); }); } @@ -183,32 +206,35 @@ var styles = StyleSheet.create({ exports.title = 'PushNotificationIOS'; exports.description = 'Apple PushNotification and badge value'; exports.examples = [ -{ - title: 'Badge Number', - render(): React.Element { - return ( - -