diff --git a/benchmarks/src/components/AspectRatio/index.js b/benchmarks/src/components/AspectRatio/index.js index be85624e..5d92768b 100644 --- a/benchmarks/src/components/AspectRatio/index.js +++ b/benchmarks/src/components/AspectRatio/index.js @@ -21,7 +21,9 @@ class AspectRatio extends PureComponent { return ( - {children} + + {children} + ); } diff --git a/benchmarks/src/components/NestedTree/index.js b/benchmarks/src/components/NestedTree/index.js index ace872d4..5ebcf416 100644 --- a/benchmarks/src/components/NestedTree/index.js +++ b/benchmarks/src/components/NestedTree/index.js @@ -30,7 +30,11 @@ class DeepTree extends Component { ); for (let i = 0; i < wrap; i++) { - result = {result}; + result = ( + + {result} + + ); } return result; } diff --git a/benchmarks/src/components/Tweet/index.js b/benchmarks/src/components/Tweet/index.js index fc4a05df..1c99ce71 100644 --- a/benchmarks/src/components/Tweet/index.js +++ b/benchmarks/src/components/Tweet/index.js @@ -61,7 +61,6 @@ export class Tweet extends Component { : null} - {getIcon(displayMode, highlighted)} - {count > 0 ? {count} : null} + {count > 0 + ? + {count} + + : null} ); diff --git a/benchmarks/src/components/UserNames/index.js b/benchmarks/src/components/UserNames/index.js index 4f5b2075..aa2306e4 100644 --- a/benchmarks/src/components/UserNames/index.js +++ b/benchmarks/src/components/UserNames/index.js @@ -28,7 +28,9 @@ class UserNames extends PureComponent { onPress={onPress} style={[styles.root, style]} > - {fullName} + + {fullName} + {layout === 'stack' ? ' \u000A' : ' '} {`@${screenName}`} diff --git a/benchmarks/src/components/theme.js b/benchmarks/src/components/theme.js index 1dc78152..219d2cc5 100644 --- a/benchmarks/src/components/theme.js +++ b/benchmarks/src/components/theme.js @@ -27,7 +27,7 @@ module.exports = { colors, fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif, ' + - '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', // emoji fonts + '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', // emoji fonts fontSize, lineHeight: 1.3125, spaceX: 0.6, diff --git a/docs/storybook/1-components/Button/ButtonDocs.js b/docs/storybook/1-components/Button/ButtonDocs.js index d67ac93d..dae9f25b 100644 --- a/docs/storybook/1-components/Button/ButtonDocs.js +++ b/docs/storybook/1-components/Button/ButtonDocs.js @@ -63,8 +63,8 @@ storiesOf('Components', module).add('Button', () => - A basic button component. Supports a minimal level of customization. - You can build your own custom button using TouchableOpacity + A basic button component. Supports a minimal level of customization. You can build your own + custom button using TouchableOpacity or TouchableNativeFeedback. ]} diff --git a/docs/storybook/1-components/Image/examples/NetworkImage.js b/docs/storybook/1-components/Image/examples/NetworkImage.js index 5d36d8f4..5dc0a702 100644 --- a/docs/storybook/1-components/Image/examples/NetworkImage.js +++ b/docs/storybook/1-components/Image/examples/NetworkImage.js @@ -43,7 +43,10 @@ class NetworkImageExample extends PureComponent { > {loader} - {this.state.message && {this.state.message}} + {this.state.message && + + {this.state.message} + } ); } diff --git a/docs/storybook/1-components/Image/examples/PropChildren.js b/docs/storybook/1-components/Image/examples/PropChildren.js index a43426de..66971741 100644 --- a/docs/storybook/1-components/Image/examples/PropChildren.js +++ b/docs/storybook/1-components/Image/examples/PropChildren.js @@ -8,9 +8,7 @@ import { Image, StyleSheet, Text } from 'react-native'; const ImageChildrenExample = () => - - React - + React ; const styles = StyleSheet.create({ diff --git a/docs/storybook/1-components/Image/examples/PropResizeMode.js b/docs/storybook/1-components/Image/examples/PropResizeMode.js index 11e0f616..a5427d06 100644 --- a/docs/storybook/1-components/Image/examples/PropResizeMode.js +++ b/docs/storybook/1-components/Image/examples/PropResizeMode.js @@ -13,9 +13,7 @@ const ImageResizeModeExample = () => - - Contain - + Contain /> - - Cover - + Cover /> - - Stretch - + Stretch /> - - Repeat - + Repeat - - Center - + Center diff --git a/docs/storybook/1-components/Image/examples/StaticPrefetch.js b/docs/storybook/1-components/Image/examples/StaticPrefetch.js index 91ba532e..c937cc29 100644 --- a/docs/storybook/1-components/Image/examples/StaticPrefetch.js +++ b/docs/storybook/1-components/Image/examples/StaticPrefetch.js @@ -30,7 +30,9 @@ class ImagePrefetchExample extends PureComponent { : null} {startLoad ? - {this.state.events.join('\n')} + + {this.state.events.join('\n')} + - Called when scrollable content view of the ScrollView changes. - It's implemented using the onLayout handler - attached to the content container which this ScrollView renders. + Called when scrollable content view of the ScrollView changes. It's + implemented using the onLayout handler attached to the content container + which this ScrollView renders. } />, @@ -72,12 +72,10 @@ const sections = [ typeInfo="?function" description={[ - Fires at most once per frame during scrolling. The frequency of the events can - be contolled using the scrollEventThrottle prop. - , - - Invoked on scroll with the following event: + Fires at most once per frame during scrolling. The frequency of the events can be + contolled using the scrollEventThrottle prop. , + Invoked on scroll with the following event:, {`{ nativeEvent: { contentOffset: { x, y }, @@ -99,11 +97,11 @@ const sections = [ typeInfo="?number = 0" description={ - This controls how often the scroll event will be fired while scrolling (as a - time interval in ms). A lower number yields better accuracy for code that is - tracking the scroll position, but can lead to scroll performance problems. The - default value is 0, which means the scroll event will be sent only once - each time the view is scrolled. + This controls how often the scroll event will be fired while scrolling (as a time + interval in ms). A lower number yields better accuracy for code that is tracking the + scroll position, but can lead to scroll performance problems. The default value is{' '} + 0, which means the scroll event will be sent only once each time the view + is scrolled. } /> @@ -129,10 +127,10 @@ const sections = [ typeInfo="() => ScrollResponder" description={ - Returns a reference to the underlying scroll responder, which supports - operations like scrollTo. All ScrollView-like components - should implement this method so that they can be composed while providing access to the - underlying scroll responder's methods. + Returns a reference to the underlying scroll responder, which supports operations like{' '} + scrollTo. All ScrollView-like components should implement this + method so that they can be composed while providing access to the underlying scroll + responder's methods. } />, diff --git a/docs/storybook/1-components/ScrollView/examples/Horizontal.js b/docs/storybook/1-components/ScrollView/examples/Horizontal.js index 7e24668f..a94e3c8d 100644 --- a/docs/storybook/1-components/ScrollView/examples/Horizontal.js +++ b/docs/storybook/1-components/ScrollView/examples/Horizontal.js @@ -20,7 +20,9 @@ const VerticalExample = () => > {Array.from({ length: 50 }).map((item, i) => - {i} + + {i} + )} @@ -37,7 +39,9 @@ const HorizontalExample = () => > {Array.from({ length: 50 }).map((item, i) => - {i} + + {i} + )} diff --git a/docs/storybook/1-components/ScrollView/examples/ScrollTo.js b/docs/storybook/1-components/ScrollView/examples/ScrollTo.js index e27d1c50..0aba8d99 100644 --- a/docs/storybook/1-components/ScrollView/examples/ScrollTo.js +++ b/docs/storybook/1-components/ScrollView/examples/ScrollTo.js @@ -21,7 +21,9 @@ export default class ScrollToExample extends PureComponent { > {Array.from({ length: 50 }).map((item, i) => - {i} + + {i} + )} diff --git a/docs/storybook/1-components/ScrollView/examples/ScrollToEnd.js b/docs/storybook/1-components/ScrollView/examples/ScrollToEnd.js index 0c4d1fa5..4e821c72 100644 --- a/docs/storybook/1-components/ScrollView/examples/ScrollToEnd.js +++ b/docs/storybook/1-components/ScrollView/examples/ScrollToEnd.js @@ -21,7 +21,9 @@ export default class ScrollToEndExample extends PureComponent { > {Array.from({ length: 50 }).map((item, i) => - {i} + + {i} + )} diff --git a/docs/storybook/1-components/Switch/SwitchDocs.js b/docs/storybook/1-components/Switch/SwitchDocs.js index 14e44f1b..d9388742 100644 --- a/docs/storybook/1-components/Switch/SwitchDocs.js +++ b/docs/storybook/1-components/Switch/SwitchDocs.js @@ -126,10 +126,10 @@ storiesOf('Components', module).add('Switch', () => - This is a controlled component that requires an onValueChange callback - that updates the value prop in order for the component to reflect user actions. If - the value prop is not updated, the component will continue to render the - supplied value prop instead of the expected result of any user actions. + This is a controlled component that requires an onValueChange callback that + updates the value prop in order for the component to reflect user actions. If the{' '} + value prop is not updated, the component will continue to render the supplied{' '} + value prop instead of the expected result of any user actions. } sections={sections} diff --git a/docs/storybook/1-components/Switch/examples/PropOnValueChange.js b/docs/storybook/1-components/Switch/examples/PropOnValueChange.js index d893e21e..55860e54 100644 --- a/docs/storybook/1-components/Switch/examples/PropOnValueChange.js +++ b/docs/storybook/1-components/Switch/examples/PropOnValueChange.js @@ -28,7 +28,9 @@ class SwitchOnValueChangeExample extends PureComponent { style={styles.marginBottom} value={eventSwitchIsOn} /> - {eventSwitchIsOn ? 'On' : 'Off'} + + {eventSwitchIsOn ? 'On' : 'Off'} + - {eventSwitchRegressionIsOn ? 'On' : 'Off'} + + {eventSwitchRegressionIsOn ? 'On' : 'Off'} + ); diff --git a/docs/storybook/1-components/Text/TextDocs.js b/docs/storybook/1-components/Text/TextDocs.js index 5feb18d5..26d93993 100644 --- a/docs/storybook/1-components/Text/TextDocs.js +++ b/docs/storybook/1-components/Text/TextDocs.js @@ -128,14 +128,10 @@ const sections = [ description={ Indicates to assistive technologies whether to notify the user when the view changes. - The values of - this attribute are expressed in degrees of importance. When regions are specified as{ - ' ' - } - polite (recommended), - updates take low priority. When regions are specified as assertive, - assistive technologies will - interrupt and immediately notify the user. (This is implemented using 'aria-live'.) + The values of this attribute are expressed in degrees of importance. When regions are + specified as polite (recommended), updates take low priority. When regions + are specified as assertive, assistive technologies will interrupt and + immediately notify the user. (This is implemented using 'aria-live'.) } />, @@ -147,13 +143,10 @@ const sections = [ description={ Allows assistive technologies to present and support interaction with the view in a - manner that is - consistent with user expectations for similar views of that type. For example, marking a - touchable - view with an accessibilityRole of button. For compatibility - with React - Native accessibilityTraits and accessibilityComponentType are - mapped + manner that is consistent with user expectations for similar views of that type. For + example, marking a touchable view with an accessibilityRole of{' '} + button. For compatibility with React Native{' '} + accessibilityTraits and accessibilityComponentType are mapped to accessibilityRole. (This is implemented using ARIA roles.) } @@ -165,11 +158,9 @@ const sections = [ description={ When true, indicates that the view is an accessibility element (i.e., - focusable) and - groups its child content. By default, all the touchable elements and elements - with accessibilityRole of button and link are - accessible. - (This is implemented using 'tabindex'.) + focusable) and groups its child content. By default, all the touchable elements and + elements with accessibilityRole of button and{' '} + link are accessible. (This is implemented using 'tabindex'.) } />, @@ -246,15 +237,12 @@ storiesOf('Components', module).add('Text', () => description={[ Text is component for displaying text. It supports style, basic touch handling, and inherits - typographic - styles from ancestor elements. + typographic styles from ancestor elements. , Text is unique relative to layout: child elements use text layout ("inline") rather than - flexbox layout. - This means that elements inside of a Text are not rectangles, as they wrap when reaching the - edge of - their container. + flexbox layout. This means that elements inside of a Text are not rectangles, as they wrap + when reaching the edge of their container. , NOTE: Text will transfer all other props to the rendered HTML element. ]} diff --git a/docs/storybook/1-components/Text/examples/PropChildren.js b/docs/storybook/1-components/Text/examples/PropChildren.js index f1dab7e7..e2d8454f 100644 --- a/docs/storybook/1-components/Text/examples/PropChildren.js +++ b/docs/storybook/1-components/Text/examples/PropChildren.js @@ -15,13 +15,8 @@ const Entity = ({ children }) => const TextChildrenExample = () => - This text contains an inline blue view - {' '} - - {' '} - and - an inline image - {' '} + This text contains an inline blue view{' '} + and an inline image{' '} (Normal text, (and bold - - (and tiny inherited bold blue) - + (and tiny inherited bold blue) ) ) @@ -47,9 +40,7 @@ const TextChildrenExample = () => (is inherited (and accumulated - - (and also applies to the background) - + (and also applies to the background) ) ) @@ -60,7 +51,6 @@ const TextChildrenExample = () => Entity Name - ; export default TextChildrenExample; diff --git a/docs/storybook/1-components/Text/examples/PropOnPress.js b/docs/storybook/1-components/Text/examples/PropOnPress.js index 3c0ae0e1..609e5b4f 100644 --- a/docs/storybook/1-components/Text/examples/PropOnPress.js +++ b/docs/storybook/1-components/Text/examples/PropOnPress.js @@ -22,7 +22,9 @@ class TextOnPressExample extends React.Component { Text has built-in onPress handling - {textLog} + + {textLog} + ); diff --git a/docs/storybook/1-components/TextInput/TextInputDocs.js b/docs/storybook/1-components/TextInput/TextInputDocs.js index a08a2644..c7bd363b 100644 --- a/docs/storybook/1-components/TextInput/TextInputDocs.js +++ b/docs/storybook/1-components/TextInput/TextInputDocs.js @@ -38,8 +38,12 @@ const sections = [ characters: Automatically capitalize all characters., - none: Completely disables automatic capitalization., + + characters: Automatically capitalize all characters. + , + + none: Completely disables automatic capitalization. + , sentences: Automatically capitalize the first letter of sentences. , @@ -61,14 +65,13 @@ const sections = [ typeInfo="?string" description={ - Indicates whether the value of the control can be automatically - completed by the browser.{' '} + Indicates whether the value of the control can be automatically completed by the + browser.{' '} - Accepted - values. + Accepted values. } @@ -91,13 +94,11 @@ const sections = [ typeInfo="?boolean" description={ - If true, the text field will blur when submitted. The - default value is true for single-line fields and - {' '}false for multiline fields. Note, for multiline fields - setting blurOnSubmit to true means that - pressing return will blur the field and trigger the onSubmitEditing{' '} - event instead of inserting a newline - into the field. + If true, the text field will blur when submitted. The default value is{' '} + true for single-line fields and false for multiline fields. + Note, for multiline fields setting blurOnSubmit to true means + that pressing return will blur the field and trigger the onSubmitEditing{' '} + event instead of inserting a newline into the field. } example={{ @@ -119,9 +120,9 @@ const sections = [ typeInfo="?string" description={ - Provides an initial value that will change when the user starts typing. Useful - for simple use-cases where you don't want to deal with listening to events and - updating the value prop to keep the controlled state in sync. + Provides an initial value that will change when the user starts typing. Useful for + simple use-cases where you don't want to deal with listening to events and updating the{' '} + value prop to keep the controlled state in sync. } />, @@ -208,10 +209,10 @@ const sections = [ Callback that is called when a key is pressed. This will be called with{' '} {`{ nativeEvent: { key: keyValue } }`}{' '} - where keyValue is Enter or Backspace for - respective keys and the typed-in character otherwise including ' ' - for space. Modifier keys (e.g., shiftKey) are also included in - the nativeEvent. Fires before onChange callbacks. + where keyValue is Enter or Backspace for respective keys and + the typed-in character otherwise including ' ' + for space. Modifier keys (e.g., shiftKey) are also included in the{' '} + nativeEvent. Fires before onChange callbacks. } />, @@ -304,8 +305,7 @@ nativeEvent: { key: keyValue } }`}{' '} href="https://facebook.github.io/react/docs/forms.html" target="_blank" />{' '} - work. To prevent - user edits to the value set {'editable={false}'}. + work. To prevent user edits to the value set {'editable={false}'}. } /> diff --git a/docs/storybook/1-components/TextInput/examples/PropOnSelectionChange.js b/docs/storybook/1-components/TextInput/examples/PropOnSelectionChange.js index cad326cf..98d5dc1a 100644 --- a/docs/storybook/1-components/TextInput/examples/PropOnSelectionChange.js +++ b/docs/storybook/1-components/TextInput/examples/PropOnSelectionChange.js @@ -87,21 +87,13 @@ class OnSelectionChangeExample extends React.Component { selection = {JSON.stringify(this.state.selection)} - - Place at Start (0, 0) - + Place at Start (0, 0) Place at End ({length}, {length}) - - Place at Random - - - Select All - - - Select Random - + Place at Random + Select All + Select Random ); diff --git a/docs/storybook/1-components/TextInput/examples/TextInputEvents.js b/docs/storybook/1-components/TextInput/examples/TextInputEvents.js index 927fc7a3..c73d52bd 100644 --- a/docs/storybook/1-components/TextInput/examples/TextInputEvents.js +++ b/docs/storybook/1-components/TextInput/examples/TextInputEvents.js @@ -53,7 +53,8 @@ export default class TextEventsExample extends React.Component { style={[helperStyles.textinput, { maxWidth: 200 }]} /> - {this.state.curText}{'\n'} + {this.state.curText} + {'\n'} (prev: {this.state.prevText}){'\n'} (prev2: {this.state.prev2Text}){'\n'} (prev3: {this.state.prev3Text}) diff --git a/docs/storybook/1-components/TextInput/helpers.js b/docs/storybook/1-components/TextInput/helpers.js index b2e2e9a8..800909f1 100644 --- a/docs/storybook/1-components/TextInput/helpers.js +++ b/docs/storybook/1-components/TextInput/helpers.js @@ -37,7 +37,9 @@ export class WithLabel extends React.Component { return ( - {this.props.label} + + {this.props.label} + {this.props.children} diff --git a/docs/storybook/1-components/Touchable/TouchableHighlightDocs.js b/docs/storybook/1-components/Touchable/TouchableHighlightDocs.js index 9697391d..8ed915db 100644 --- a/docs/storybook/1-components/Touchable/TouchableHighlightDocs.js +++ b/docs/storybook/1-components/Touchable/TouchableHighlightDocs.js @@ -67,19 +67,18 @@ storiesOf('Components', module).add('TouchableHighlight', () => - A wrapper for making views respond properly to touches. On press down, the - opacity of the wrapped view is decreased, which allows the underlay color to - show through, darkening or tinting the view. + A wrapper for making views respond properly to touches. On press down, the opacity of the + wrapped view is decreased, which allows the underlay color to show through, darkening or + tinting the view. , - The underlay comes from wrapping the child in a new View, which can affect - layout, and sometimes cause unwanted visual artifacts if not used correctly, - for example if the backgroundColor of the wrapped view isn't explicitly set to - an opaque color. + The underlay comes from wrapping the child in a new View, which can affect layout, and + sometimes cause unwanted visual artifacts if not used correctly, for example if the + backgroundColor of the wrapped view isn't explicitly set to an opaque color. , - TouchableHighlight must have one child (not zero or more than one). If you wish - to have several child components, wrap them in a View. + TouchableHighlight must have one child (not zero or more than one). If you wish to have + several child components, wrap them in a View. ]} sections={sections} diff --git a/docs/storybook/1-components/Touchable/TouchableWithoutFeedbackDocs.js b/docs/storybook/1-components/Touchable/TouchableWithoutFeedbackDocs.js index 6404db9b..c4ec9417 100644 --- a/docs/storybook/1-components/Touchable/TouchableWithoutFeedbackDocs.js +++ b/docs/storybook/1-components/Touchable/TouchableWithoutFeedbackDocs.js @@ -49,7 +49,9 @@ const sections = [ name="disabled" typeInfo="?boolean" description={ - If true, disable all interactions for this component. + + If true, disable all interactions for this component. + } />, @@ -89,9 +91,9 @@ storiesOf('Components', module).add('TouchableWithoutFeedback', () => - Do not use unless you have a very good reason. All the elements that respond to - press should have a visual feedback when touched. This is one of the primary - reason a "web" app doesn't feel "native". + Do not use unless you have a very good reason. All the elements that respond to press should + have a visual feedback when touched. This is one of the primary reason a "web" app doesn't + feel "native". , NOTE: TouchableWithoutFeedback supports only one child. If you wish to have diff --git a/docs/storybook/1-components/Touchable/examples/PropDisabled.js b/docs/storybook/1-components/Touchable/examples/PropDisabled.js index f158f7ca..12e3ce52 100644 --- a/docs/storybook/1-components/Touchable/examples/PropDisabled.js +++ b/docs/storybook/1-components/Touchable/examples/PropDisabled.js @@ -17,9 +17,7 @@ class TouchableHighlightDisabled extends React.Component { style={[styles.row, styles.block]} underlayColor="rgb(210, 230, 255)" > - - Disabled TouchableHighlight - + Disabled TouchableHighlight - - Enabled TouchableHighlight - + Enabled TouchableHighlight ); diff --git a/docs/storybook/1-components/Touchable/examples/PropHitSlop.js b/docs/storybook/1-components/Touchable/examples/PropHitSlop.js index 06a484c4..2705bb52 100644 --- a/docs/storybook/1-components/Touchable/examples/PropHitSlop.js +++ b/docs/storybook/1-components/Touchable/examples/PropHitSlop.js @@ -39,7 +39,9 @@ export default class TouchableHitSlopExample extends React.Component { - {log} + + {log} + ); diff --git a/docs/storybook/1-components/View/ViewDocs.js b/docs/storybook/1-components/View/ViewDocs.js index 075a081b..0c8e3cd4 100644 --- a/docs/storybook/1-components/View/ViewDocs.js +++ b/docs/storybook/1-components/View/ViewDocs.js @@ -537,14 +537,10 @@ const sections = [ description={ Indicates to assistive technologies whether to notify the user when the view changes. - The values of - this attribute are expressed in degrees of importance. When regions are specified as{ - ' ' - } - polite (recommended), - updates take low priority. When regions are specified as assertive, - assistive technologies will - interrupt and immediately notify the user. (This is implemented using 'aria-live'.) + The values of this attribute are expressed in degrees of importance. When regions are + specified as polite (recommended), updates take low priority. When regions + are specified as assertive, assistive technologies will interrupt and + immediately notify the user. (This is implemented using 'aria-live'.) } />, @@ -556,13 +552,10 @@ const sections = [ description={ Allows assistive technologies to present and support interaction with the view in a - manner that is - consistent with user expectations for similar views of that type. For example, marking a - touchable - view with an accessibilityRole of button. For compatibility - with React - Native accessibilityTraits and accessibilityComponentType are - mapped + manner that is consistent with user expectations for similar views of that type. For + example, marking a touchable view with an accessibilityRole of{' '} + button. For compatibility with React Native{' '} + accessibilityTraits and accessibilityComponentType are mapped to accessibilityRole. (This is implemented using ARIA roles.) } @@ -574,11 +567,9 @@ const sections = [ description={ When true, indicates that the view is an accessibility element (i.e., - focusable) and - groups its child content. By default, all the touchable elements and elements - with accessibilityRole of button and link are - accessible. - (This is implemented using 'tabindex'.) + focusable) and groups its child content. By default, all the touchable elements and + elements with accessibilityRole of button and{' '} + link are accessible. (This is implemented using 'tabindex'.) } />, @@ -731,14 +722,12 @@ storiesOf('Components', module).add('View', () => description={[ View is the fundamental UI building block. It is a component that supports style, layout - with flexbox, - and accessibility controls. It can be nested inside another View and has 0-to-many children - of any type. + with flexbox, and accessibility controls. It can be nested inside another View and has + 0-to-many children of any type. , Also, refer to React Native's documentation about the Gesture Responder System. NOTE: View - will - transfer all other props to the rendered HTML element. + will transfer all other props to the rendered HTML element. ]} sections={sections} diff --git a/docs/storybook/1-components/View/examples/PropPointerEvents.js b/docs/storybook/1-components/View/examples/PropPointerEvents.js index 76a15d50..e02ae95f 100644 --- a/docs/storybook/1-components/View/examples/PropPointerEvents.js +++ b/docs/storybook/1-components/View/examples/PropPointerEvents.js @@ -9,7 +9,9 @@ import { Text, TouchableHighlight, View } from 'react-native'; const ViewStyleExample = () => - none + + none + auto diff --git a/docs/storybook/1-components/View/examples/ZIndex.js b/docs/storybook/1-components/View/examples/ZIndex.js index 87934570..01c637b2 100644 --- a/docs/storybook/1-components/View/examples/ZIndex.js +++ b/docs/storybook/1-components/View/examples/ZIndex.js @@ -22,7 +22,9 @@ export default class ZIndex extends React.Component { { marginTop: 0, backgroundColor: '#E57373', zIndex: indices[0] } ]} > - ZIndex {indices[0]} + + ZIndex {indices[0]} + - ZIndex {indices[1]} + + ZIndex {indices[1]} + - ZIndex {indices[2]} + + ZIndex {indices[2]} + - ZIndex {indices[3]} + + ZIndex {indices[3]} + diff --git a/docs/storybook/1-components/View/examples/transforms.js b/docs/storybook/1-components/View/examples/transforms.js index 672d1d80..d18863b4 100644 --- a/docs/storybook/1-components/View/examples/transforms.js +++ b/docs/storybook/1-components/View/examples/transforms.js @@ -64,9 +64,7 @@ class Flip extends React.Component { } ]} > - - This text is flipping great. - + This text is flipping great. - - On the flip side... - + On the flip side... ); diff --git a/docs/storybook/2-apis/AppRegistry/AppRegistryDocs.js b/docs/storybook/2-apis/AppRegistry/AppRegistryDocs.js index 2673cda2..89eeedd2 100644 --- a/docs/storybook/2-apis/AppRegistry/AppRegistryDocs.js +++ b/docs/storybook/2-apis/AppRegistry/AppRegistryDocs.js @@ -19,7 +19,9 @@ const sections = [ Register multiple applications. AppConfig type is:, + + Register multiple applications. AppConfig type is: + , {`{ appKey: string; component: ComponentProvider; @@ -32,7 +34,9 @@ const sections = [ Register a component provider under the given appKey. + + Register a component provider under the given appKey. + } example={{ code: 'AppRegistry.registerComponent("MyApp", () => AppComponent)' @@ -44,9 +48,8 @@ const sections = [ - Register a custom render function for an application. The - function will receive the appParameters passed - to runApplication. + Register a custom render function for an application. The function will receive the{' '} + appParameters passed to runApplication. } name="static registerRunnable" @@ -64,8 +67,7 @@ const sections = [ Runs the application that was registered under appKey. The{' '} appParameters must include the rootTag into which the - application is rendered, and optionally - any initialProps. + application is rendered, and optionally any initialProps. } example={{ @@ -97,10 +99,10 @@ storiesOf('APIs', module).add('AppRegistry', () => - AppRegistry is the control point for registering, running, - prerendering, and unmounting all apps. App root components should - register themselves with AppRegistry.registerComponent. Apps can be - run by invoking AppRegistry.runApplication + AppRegistry is the control point for registering, running, prerendering, and unmounting all + apps. App root components should register themselves with{' '} + AppRegistry.registerComponent. Apps can be run by invoking{' '} + AppRegistry.runApplication } sections={sections} diff --git a/docs/storybook/2-apis/AppState/AppStateDocs.js b/docs/storybook/2-apis/AppState/AppStateDocs.js index b7b747b6..9a2b3cc2 100644 --- a/docs/storybook/2-apis/AppState/AppStateDocs.js +++ b/docs/storybook/2-apis/AppState/AppStateDocs.js @@ -33,8 +33,8 @@ const sections = [ description={ Add a handler to AppState changes by listening to the - change event type and providing the handler. The - handler is called with the app state value. + change event type and providing the handler. The handler is + called with the app state value. } />, @@ -67,10 +67,10 @@ storiesOf('APIs', module).add('AppState', () => - AppState can tell you if the app is in the foreground or background, - and notify you when the state changes. States: active (the app is - running in the foreground), background (the app is running in the - background, i.e., the user has not focused the app's tab). + AppState can tell you if the app is in the foreground or background, and notify you when the + state changes. States: active (the app is running in the foreground),{' '} + background (the app is running in the background, i.e., the user has not + focused the app's tab). } sections={sections} diff --git a/docs/storybook/2-apis/AppState/examples/StateChanges.js b/docs/storybook/2-apis/AppState/examples/StateChanges.js index f7167281..ef37907e 100644 --- a/docs/storybook/2-apis/AppState/examples/StateChanges.js +++ b/docs/storybook/2-apis/AppState/examples/StateChanges.js @@ -30,9 +30,15 @@ export default class StateChanges extends PureComponent { render() { return ( - Active count: {this.state.active} - Background count: {this.state.background} - Current state is: {this.state.currentState} + + Active count: {this.state.active} + + + Background count: {this.state.background} + + + Current state is: {this.state.currentState} + ); } diff --git a/docs/storybook/2-apis/AsyncStorage/AsyncStorageDocs.js b/docs/storybook/2-apis/AsyncStorage/AsyncStorageDocs.js index 0af4796f..00955c35 100644 --- a/docs/storybook/2-apis/AsyncStorage/AsyncStorageDocs.js +++ b/docs/storybook/2-apis/AsyncStorage/AsyncStorageDocs.js @@ -14,8 +14,8 @@ const sections = [ description={ Erases all AsyncStorage. You probably don't want to call this - use - removeItem or multiRemove to clear only - your own keys instead. Returns a Promise object. + removeItem or multiRemove to clear only your own keys instead. + Returns a Promise object. } name="static clear" @@ -43,9 +43,8 @@ const sections = [ - multiGet results in an array of key-value pair arrays - that matches the input format of multiSet. Returns a - Promise object. + multiGet results in an array of key-value pair arrays that matches the + input format of multiSet. Returns a Promise object. } example={{ @@ -59,9 +58,8 @@ const sections = [ description={ multiMerge takes an array of key-value array pairs that match the output of{' '} - multiGet. - It merges existing values with input values, assuming they are stringified JSON. Returns - a Promise object. + multiGet. It merges existing values with input values, assuming they are + stringified JSON. Returns a Promise object. } name="static multiMerge" @@ -77,9 +75,8 @@ const sections = [ - multiSet takes an array of key-value array pairs that - match the output of multiGet. Returns a Promise - object. + multiSet takes an array of key-value array pairs that match the output of{' '} + multiGet. Returns a Promise object. } example={{ @@ -108,21 +105,20 @@ storiesOf('APIs', module).add('AsyncStorage', () => - AsyncStorage is a simple, unencrypted, asynchronous, persistent, - key-value storage system that is global to the domain. It's a facade - over, and should be used instead of window.localStorage to - provide an asynchronous API and multi functions. Each method returns - a Promise object. + AsyncStorage is a simple, unencrypted, asynchronous, persistent, key-value storage system + that is global to the domain. It's a facade over, and should be used instead of{' '} + window.localStorage to provide an asynchronous API and multi functions. Each + method returns a Promise object. , - It is recommended that you use an abstraction on top - of AsyncStorage instead of AsyncStorage directly - for anything more than light usage since it operates globally. + It is recommended that you use an abstraction on top of AsyncStorage instead of{' '} + AsyncStorage directly for anything more than light usage since it operates + globally. , - The batched functions are useful for executing a lot of operations at - once, allowing for optimizations to provide the convenience of a - single promise after all operations are complete. + The batched functions are useful for executing a lot of operations at once, allowing for + optimizations to provide the convenience of a single promise after all operations are + complete. ]} sections={sections} diff --git a/docs/storybook/2-apis/Dimensions/DimensionsDocs.js b/docs/storybook/2-apis/Dimensions/DimensionsDocs.js index 50905b7c..8f048cac 100644 --- a/docs/storybook/2-apis/Dimensions/DimensionsDocs.js +++ b/docs/storybook/2-apis/Dimensions/DimensionsDocs.js @@ -30,10 +30,9 @@ const sections = [ items={[ change: Fires when a property within the Dimensions object - changes. The argument to the event handler is an object - with window and screen properties whose values are the - same as the return values of Dimensions.get('window') and{' '} - Dimensions.get('screen'), + changes. The argument to the event handler is an object with window and{' '} + screen properties whose values are the same as the return values of{' '} + Dimensions.get('window') and Dimensions.get('screen'), respectively. ]} diff --git a/docs/storybook/2-apis/Dimensions/examples/DimensionsChange.js b/docs/storybook/2-apis/Dimensions/examples/DimensionsChange.js index 4b2379ab..906ee224 100644 --- a/docs/storybook/2-apis/Dimensions/examples/DimensionsChange.js +++ b/docs/storybook/2-apis/Dimensions/examples/DimensionsChange.js @@ -18,7 +18,11 @@ export default class ChangeEventExample extends Component {