diff --git a/docs/mdjs/generate-page.js b/docs/mdjs/generate-page.js index 2eba1fb5095386..e5c89aac69dd00 100644 --- a/docs/mdjs/generate-page.js +++ b/docs/mdjs/generate-page.js @@ -58,6 +58,13 @@ const generateJsPage = (filePath, filename) => { // generate HTML from the markdown tables, and inline that into the markdown markdown = replaceTables(markdown); + // NOTE(2018/11/10): react-native/layoutanimation.md has some particular + // code span inside a table which breaks the compilation. + if (filename === 'layoutanimation') { + markdown = markdown.replace(//g, '`'); + markdown = markdown.replace(/<\/code><\/td>/g, '`'); + } + // remove comments markdown = markdown.replace(//g, ''); diff --git a/docs/react-native-website b/docs/react-native-website index 5995e3d7540f15..a4070c1aaac0a6 160000 --- a/docs/react-native-website +++ b/docs/react-native-website @@ -1 +1 @@ -Subproject commit 5995e3d7540f15c3a494c45d980465424a047c77 +Subproject commit a4070c1aaac0a6007afd276b8410c45643e3ccb9 diff --git a/docs/scripts/import-react-native-docs.js b/docs/scripts/import-react-native-docs.js index 5e2ce59aed1507..d8ae3dd03ca21a 100755 --- a/docs/scripts/import-react-native-docs.js +++ b/docs/scripts/import-react-native-docs.js @@ -159,26 +159,32 @@ let mainAsync = async () => { if (basename === 'flatlist.md') { if (/Minimal /.test(l)) { l = l + '\n\n```javascript'; + inCodeBlock = true; } if (/More complex, multi-select example/.test(l)) { l = '```\n\n' + l; + inCodeBlock = false; } if (/class MyListItem extends/.test(l)) { l = '```javascript\n' + l; + inCodeBlock = true; } if (/This is a convenience wrapper/.test(l)) { l = '```\n\n' + l; + inCodeBlock = false; } } if (basename === 'picker.md') { if (/ /.test(l)) { l = l + '\n\n```\n'; + inCodeBlock = false; } } diff --git a/docs/versions/unversioned/react-native/accessibility.md b/docs/versions/unversioned/react-native/accessibility.md index 15ec552ac5a397..a08a31138edb98 100644 --- a/docs/versions/unversioned/react-native/accessibility.md +++ b/docs/versions/unversioned/react-native/accessibility.md @@ -103,7 +103,7 @@ Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on A * **header** Used when an element acts as a header for a content section (e.g. the title of a navigation bar). * **summary** Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches. -#### accessibilityState (iOS, Android) +#### accessibilityStates (iOS, Android) > **Note:** > `accessibilityRole` and `accessibilityStates` are meant to be a cross-platform solution to replace `accessibilityTraits` and `accessibilityComponentType`, which will soon be deprecated. When possible, use `accessibilityRole` and `accessibilityStates` instead of `accessibilityTraits` and `accessibilityComponentType`. @@ -112,7 +112,7 @@ Accessibility State tells a person using either VoiceOver on iOS or TalkBack on * **selected** Used when the element is in a selected state. For example, a button is selected. * **disabled** Used when the element is disabled and cannot be interacted with. -To use, set the `accessibilityState` to an array containing either `selected`, `disabled`, or both. +To use, set the `accessibilityStates` to an array containing either `selected`, `disabled`, or both. #### accessibilityTraits (iOS) diff --git a/docs/versions/unversioned/react-native/accessibilityinfo.md b/docs/versions/unversioned/react-native/accessibilityinfo.md index 7b60322f9f211b..7499cf37399180 100644 --- a/docs/versions/unversioned/react-native/accessibilityinfo.md +++ b/docs/versions/unversioned/react-native/accessibilityinfo.md @@ -18,7 +18,7 @@ class ScreenReaderStatusExample extends React.Component { componentDidMount() { AccessibilityInfo.addEventListener( 'change', - this._handleScreenReaderToggled + this._handleScreenReaderToggled, ); AccessibilityInfo.fetch().then((isEnabled) => { this.setState({ @@ -30,7 +30,7 @@ class ScreenReaderStatusExample extends React.Component { componentWillUnmount() { AccessibilityInfo.removeEventListener( 'change', - this._handleScreenReaderToggled + this._handleScreenReaderToggled, ); } diff --git a/docs/versions/unversioned/react-native/alertios.md b/docs/versions/unversioned/react-native/alertios.md index 8c4373348ac5c6..bd5b847cbdd260 100644 --- a/docs/versions/unversioned/react-native/alertios.md +++ b/docs/versions/unversioned/react-native/alertios.md @@ -90,7 +90,7 @@ AlertIOS.alert( text: 'Install', onPress: () => console.log('Install Pressed'), }, - ] + ], ); ``` @@ -140,7 +140,7 @@ AlertIOS.prompt( onPress: (password) => console.log('OK Pressed, password: ' + password), }, ], - 'secure-text' + 'secure-text', ); ``` @@ -158,7 +158,7 @@ AlertIOS.prompt( null, (text) => console.log('Your username is ' + text), null, - 'default' + 'default', ); ``` diff --git a/docs/versions/unversioned/react-native/animated.md b/docs/versions/unversioned/react-native/animated.md index 47058384c6c15e..55f6fade892b27 100644 --- a/docs/versions/unversioned/react-native/animated.md +++ b/docs/versions/unversioned/react-native/animated.md @@ -15,7 +15,7 @@ Animated.timing( this.state.fadeAnim, // The value to drive { toValue: 1, // Animate to final value of 1 - } + }, ).start(); // Start the animation ``` diff --git a/docs/versions/unversioned/react-native/animations.md b/docs/versions/unversioned/react-native/animations.md index 6a466be390b3c8..c3b41207ab7e39 100644 --- a/docs/versions/unversioned/react-native/animations.md +++ b/docs/versions/unversioned/react-native/animations.md @@ -338,7 +338,7 @@ The native driver also works with `Animated.event`. This is especially useful fo }, }, ], - {useNativeDriver: true} // <-- Add this + {useNativeDriver: true}, // <-- Add this )}> {content} diff --git a/docs/versions/unversioned/react-native/asyncstorage.md b/docs/versions/unversioned/react-native/asyncstorage.md index 0b7e68a2a78216..87eeb665bb6a10 100644 --- a/docs/versions/unversioned/react-native/asyncstorage.md +++ b/docs/versions/unversioned/react-native/asyncstorage.md @@ -49,9 +49,9 @@ _retrieveData = async () => { // We have data!! console.log(value); } - } catch (error) { - // Error retrieving data - } + } catch (error) { + // Error retrieving data + } } ``` diff --git a/docs/versions/unversioned/react-native/datepickerandroid.md b/docs/versions/unversioned/react-native/datepickerandroid.md index fec3a070bdc644..b4ad7d4ecf8fab 100644 --- a/docs/versions/unversioned/react-native/datepickerandroid.md +++ b/docs/versions/unversioned/react-native/datepickerandroid.md @@ -60,7 +60,7 @@ The available keys for the `options` object are: * 'spinner': Show a date picker in spinner mode. * 'default': Show a default native date picker(spinner/calendar) based on android versions. -Returns a Promise which will be invoked an object containing `action`, `year`, `month` (0-11), `day` if the user picked a date. If the user dismissed the dialog, the Promise will still be resolved with action being `DatePickerAndroid.dismissedAction` and all the other keys being undefined. **Always** check whether the `action` before reading the values. +Returns a Promise which will be invoked an object containing `action`, `year`, `month` (0-11), `day` if the user picked a date. If the user dismissed the dialog, the Promise will still be resolved with action being `DatePickerAndroid.dismissedAction` and all the other keys being undefined. **Always** check whether the `action` is equal to `DatePickerAndroid.dateSetAction` before reading the values. Note the native date picker dialog has some UI glitches on Android 4 and lower when using the `minDate` and `maxDate` options. diff --git a/docs/versions/unversioned/react-native/easing.md b/docs/versions/unversioned/react-native/easing.md index 1b07f2475de58f..8983c492dfdd3b 100644 --- a/docs/versions/unversioned/react-native/easing.md +++ b/docs/versions/unversioned/react-native/easing.md @@ -292,7 +292,7 @@ A useful tool to visualize cubic bezier curves can be found at http://cubic-bezi ```javascript -static in(easing) +static in easing; ``` diff --git a/docs/versions/unversioned/react-native/flatlist.md b/docs/versions/unversioned/react-native/flatlist.md index 6c861c5f47cd49..0ea13e695768d9 100644 --- a/docs/versions/unversioned/react-native/flatlist.md +++ b/docs/versions/unversioned/react-native/flatlist.md @@ -22,8 +22,8 @@ Minimal Example: ```javascript ${"{"}item.key${"}"}${"}"} + data={[{key: 'a'}, {key: 'b'}]} + renderItem={({item}) => {item.key}} /> ``` @@ -37,59 +37,59 @@ More complex, multi-select example demonstrating `PureComponent` usage for perf ```javascript class MyListItem extends React.PureComponent ${"{"} - _onPress = () => ${"{"} + _onPress = () => { this.props.onPressItem(this.props.id); - ${"}"}; + }; - render() ${"{"} + render() { const textColor = this.props.selected ? "red" : "black"; return ( - + - - ${"{"}this.props.title${"}"} + + {this.props.title} ); - ${"}"} - ${"}"} + } + } - class MultiSelectList extends React.PureComponent ${"{"} - state = ${"{"}selected: (new Map(): Map)${"}"}; + class MultiSelectList extends React.PureComponent { + state = {selected: (new Map(): Map)}; _keyExtractor = (item, index) => item.id; - _onPressItem = (id: string) => ${"{"} + _onPressItem = (id: string) => { // updater functions are preferred for transactional updates - this.setState((state) => ${"{"} + this.setState((state) => { // copy the map rather than modifying state. const selected = new Map(state.selected); selected.set(id, !selected.get(id)); // toggle - return ${"{"}selected${"}"}; - ${"}"}); - ${"}"}; + return {selected}; + }); + }; - _renderItem = (${"{"}item${"}"}) => ( + _renderItem = ({item}) => ( ); - render() ${"{"} + render() { return ( ); - ${"}"} - ${"}"} + } + } ``` diff --git a/docs/versions/unversioned/react-native/height-and-width.md b/docs/versions/unversioned/react-native/height-and-width.md index 9a8f324a653fad..0ab73396ae8ef2 100644 --- a/docs/versions/unversioned/react-native/height-and-width.md +++ b/docs/versions/unversioned/react-native/height-and-width.md @@ -37,7 +37,7 @@ Setting dimensions this way is common for components that should always render a ## Flex Dimensions -Use `flex` in a component's style to have the component expand and shrink dynamically based on available space. Normally you will use `flex: 1`, which tells a component to fill all available space, shared evenly amongst each other component with the same parent. The larger the `flex` given, the higher the ratio of space a component will take compared to its siblings. +Use `flex` in a component's style to have the component expand and shrink dynamically based on available space. Normally you will use `flex: 1`, which tells a component to fill all available space, shared evenly amongst other components with the same parent. The larger the `flex` given, the higher the ratio of space a component will take compared to its siblings. > A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed `width` and `height` or `flex`, the parent will have dimensions of 0 and the `flex` children will not be visible. diff --git a/docs/versions/unversioned/react-native/imagebackground.md b/docs/versions/unversioned/react-native/imagebackground.md new file mode 100644 index 00000000000000..628b14b45a4d98 --- /dev/null +++ b/docs/versions/unversioned/react-native/imagebackground.md @@ -0,0 +1,58 @@ +--- +id: imagebackground +title: ImageBackground +--- + +A common feature request from developers familiar with the web is `background-image`. To handle this use case, you can use the `` component, which has the same props as ``, and add whatever children to it you would like to layer on top of it. + +You might not want to use `` in some cases, since the implementation is very simple. Refer to ``'s [source code](https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js) for more insight, and create your own custom component when needed. + +Note that you must specify some width and height style attributes. + +## Example + + +```javascript + +return ( + + Inside + +); + +``` + + +### Props + +* [`Image` props...](image.md#props) +* [`style`](imagebackground.md#style) +* [`imageStyle`](imagebackground.md#imageStyle) +* [`imageRef`](imagebackground.md#imageRef) + +--- + +# Reference + +## Props + +### `style` + +| Type | Required | +| ---------------------------------- | -------- | +| [view styles](view-style-props.md) | No | + +### `imageStyle` + +| Type | Required | +| ------------------------------------ | -------- | +| [image styles](image-style-props.md) | No | + +### `imageRef` + +Allows to set a reference to the inner `Image` component + +| Type | Required | +| ----------------------------------------------------- | -------- | +| [Ref](https://reactjs.org/docs/refs-and-the-dom.html) | No | + diff --git a/docs/versions/unversioned/react-native/images.md b/docs/versions/unversioned/react-native/images.md index e887dd06a985c7..b4928ce0ea64e9 100644 --- a/docs/versions/unversioned/react-native/images.md +++ b/docs/versions/unversioned/react-native/images.md @@ -25,6 +25,7 @@ You can also use the `@2x` and `@3x` suffixes to provide images for different sc . ├── button.js └── img + ├── check.png ├── check@2x.png └── check@3x.png @@ -243,7 +244,7 @@ On the user side, this lets you annotate the object with useful attributes such A common feature request from developers familiar with the web is `background-image`. To handle this use case, you can use the `` component, which has the same props as ``, and add whatever children to it you would like to layer on top of it. -You might not want to use `` in some cases, since the implementation is very simple. Refer to ``'s [source code](https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js) for more insight, and create your own custom component when needed. +You might not want to use `` in some cases, since the implementation is very simple. Refer to ``'s [documentation](imagebackground.md) for more insight, and create your own custom component when needed. ```javascript diff --git a/docs/versions/unversioned/react-native/layout-props.md b/docs/versions/unversioned/react-native/layout-props.md index 98bda4b8417ad1..f5da78ca08b8f3 100644 --- a/docs/versions/unversioned/react-native/layout-props.md +++ b/docs/versions/unversioned/react-native/layout-props.md @@ -97,9 +97,9 @@ title: Layout Props ### `aspectRatio` -Aspect ratio control the size of the undefined dimension of a node. Aspect ratio is a non-standard property only available in react native and not CSS. +Aspect ratio controls the size of the undefined dimension of a node. Aspect ratio is a non-standard property only available in React Native and not CSS. -* On a node with a set width/height aspect ratio control the size of the unset dimension +* On a node with a set width/height aspect ratio controls the size of the unset dimension * On a node with a set flex basis aspect ratio controls the size of the node in the cross axis if unset * On a node with a measure function aspect ratio works as though the measure function measures the flex basis * On a node with flex grow/shrink aspect ratio controls the size of the node in the cross axis if unset @@ -189,9 +189,9 @@ It works similarly to `bottom` in CSS, but in React Native you must use points o See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of how `bottom` affects layout. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -223,9 +223,9 @@ When the direction is `ltr`, `end` is equivalent to `right`. When the direction This style takes precedence over the `left` and `right` styles. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -249,9 +249,9 @@ flexGrow, flexShrink, and flexBasis work the same as in CSS. ### `flexBasis` -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -297,9 +297,9 @@ flexGrow, flexShrink, and flexBasis work the same as in CSS. It works similarly to `height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. See https://developer.mozilla.org/en-US/docs/Web/CSS/height for more details. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -321,9 +321,9 @@ It works similarly to `left` in CSS, but in React Native you must use points or See https://developer.mozilla.org/en-US/docs/Web/CSS/left for more details of how `left` affects layout. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -331,9 +331,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/left for more details of ho Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin for more details. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -341,9 +341,9 @@ Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft `marginBottom` works like `margin-bottom` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom for more details. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -351,9 +351,9 @@ Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft When direction is `ltr`, `marginEnd` is equivalent to `marginRight`. When direction is `rtl`, `marginEnd` is equivalent to `marginLeft`. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -361,9 +361,9 @@ When direction is `ltr`, `marginEnd` is equivalent to `marginRight`. When direct Setting `marginHorizontal` has the same effect as setting both `marginLeft` and `marginRight`. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -371,9 +371,9 @@ Setting `marginHorizontal` has the same effect as setting both `marginLeft` and `marginLeft` works like `margin-left` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left for more details. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -381,9 +381,9 @@ Setting `marginHorizontal` has the same effect as setting both `marginLeft` and `marginRight` works like `margin-right` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right for more details. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -391,9 +391,9 @@ Setting `marginHorizontal` has the same effect as setting both `marginLeft` and When direction is `ltr`, `marginStart` is equivalent to `marginLeft`. When direction is `rtl`, `marginStart` is equivalent to `marginRight`. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -401,9 +401,9 @@ When direction is `ltr`, `marginStart` is equivalent to `marginLeft`. When direc `marginTop` works like `margin-top` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top for more details. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -411,9 +411,9 @@ When direction is `ltr`, `marginStart` is equivalent to `marginLeft`. When direc Setting `marginVertical` has the same effect as setting both `marginTop` and `marginBottom`. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -425,9 +425,9 @@ It works similarly to `max-height` in CSS, but in React Native you must use poin See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height for more details. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -439,9 +439,9 @@ It works similarly to `max-width` in CSS, but in React Native you must use point See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width for more details. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -453,9 +453,9 @@ It works similarly to `min-height` in CSS, but in React Native you must use poin See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height for more details. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -467,9 +467,9 @@ It works similarly to `min-width` in CSS, but in React Native you must use point See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -487,9 +487,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details. Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding for more details. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -497,9 +497,9 @@ Setting `padding` has the same effect as setting each of `paddingTop`, `paddingB `paddingBottom` works like `padding-bottom` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom for more details. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -507,9 +507,9 @@ Setting `padding` has the same effect as setting each of `paddingTop`, `paddingB When direction is `ltr`, `paddingEnd` is equivalent to `paddingRight`. When direction is `rtl`, `paddingEnd` is equivalent to `paddingLeft`. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -517,9 +517,9 @@ When direction is `ltr`, `paddingEnd` is equivalent to `paddingRight`. When dire Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRight`. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -527,9 +527,9 @@ Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRi `paddingLeft` works like `padding-left` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left for more details. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -537,9 +537,9 @@ Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRi `paddingRight` works like `padding-right` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right for more details. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -547,9 +547,9 @@ Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRi When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`. When direction is `rtl`, `paddingStart` is equivalent to `paddingRight`. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -567,9 +567,9 @@ When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`. When dir Setting `paddingVertical` is like setting both of `paddingTop` and `paddingBottom`. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -597,9 +597,9 @@ It works similarly to `right` in CSS, but in React Native you must use points or See https://developer.mozilla.org/en-US/docs/Web/CSS/right for more details of how `right` affects layout. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -609,9 +609,9 @@ When the direction is `ltr`, `start` is equivalent to `left`. When the direction This style takes precedence over the `left`, `right`, and `end` styles. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -623,9 +623,9 @@ It works similarly to `top` in CSS, but in React Native you must use points or p See https://developer.mozilla.org/en-US/docs/Web/CSS/top for more details of how `top` affects layout. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -635,9 +635,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/top for more details of how It works similarly to `width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. See https://developer.mozilla.org/en-US/docs/Web/CSS/width for more details. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- diff --git a/docs/versions/unversioned/react-native/layoutanimation.md b/docs/versions/unversioned/react-native/layoutanimation.md index a9fe0558b01ae8..25b433e282d4b4 100644 --- a/docs/versions/unversioned/react-native/layoutanimation.md +++ b/docs/versions/unversioned/react-native/layoutanimation.md @@ -89,13 +89,59 @@ static checkConfig(config, location, name) ## Properties +### Types + +An enumerate of animation types to be used in [`create`](layoutanimation.md#create) method. + +| Types | +| ------------- | +| spring | +| linear | +| easeInEaseOut | +| easeIn | +| easeOut | +| keyboard | + --- +### Properties + +An enumerate of object property to be animated, used in [`create`](layoutanimation.md#create) method. + +| Properties | +| ---------- | +| opacity | +| scaleX | +| scaleY | +| scaleXY | + --- +### Presets + +A set of predefined animation config. + +| Presets | Value | +| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| easeInEaseOut | `create(300, 'easeInEaseOut', 'opacity')` | +| linear | `create(500, 'linear', 'opacity')` | +| spring | `{ duration: 700, create: { type: 'linear', property: 'opacity' }, update: { type: 'spring', springDamping: 0.4 }, delete: { type: 'linear', property: 'opacity' } }` | + --- +### easeInEaseOut + +Shortcut to bind `configureNext()` methods with `Presets.easeInEaseOut`. + --- +### linear + +Shortcut to bind `configureNext()` methods with `Presets.linear`. + --- +### spring + +Shortcut to bind `configureNext()` methods with `Presets.spring`. + diff --git a/docs/versions/unversioned/react-native/navigation.md b/docs/versions/unversioned/react-native/navigation.md index 4edeae2e6f970e..781502234008e6 100644 --- a/docs/versions/unversioned/react-native/navigation.md +++ b/docs/versions/unversioned/react-native/navigation.md @@ -9,7 +9,7 @@ This guide covers the various navigation components available in React Native. I If you're only targeting iOS, you may want to also check out [NavigatorIOS](navigation.md#navigatorios) as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native `UINavigationController` class. This component will not work on Android, however. -If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:[react-native-navigation](https://github.com/wix/react-native-navigation). +If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: [react-native-navigation](https://github.com/wix/react-native-navigation). ## React Navigation diff --git a/docs/versions/unversioned/react-native/network.md b/docs/versions/unversioned/react-native/network.md index 2063e3ef334cac..b04922e8e1fc60 100644 --- a/docs/versions/unversioned/react-native/network.md +++ b/docs/versions/unversioned/react-native/network.md @@ -74,7 +74,7 @@ You can also use the proposed ES2017 `async`/`await` syntax in a React Native ap async function getMoviesFromApi() { try { let response = await fetch( - 'https://facebook.github.io/react-native/movies.json' + 'https://facebook.github.io/react-native/movies.json', ); let responseJson = await response.json(); return responseJson.movies; diff --git a/docs/versions/unversioned/react-native/out-of-tree-platforms.md b/docs/versions/unversioned/react-native/out-of-tree-platforms.md index 129554a4712afe..7b1a482eb04c30 100644 --- a/docs/versions/unversioned/react-native/out-of-tree-platforms.md +++ b/docs/versions/unversioned/react-native/out-of-tree-platforms.md @@ -16,7 +16,15 @@ Right now the process of creating a React Native platform from scratch is not ve ### Bundling -As of React Native 0.57 you can now register your React Native platform with React Native's JavaScript bundler, [Metro](https://facebook.github.io/metro/). This means you can pass `--platform example` to `react-native bundle`, and it will look for JavaScript files with the `.example.js` suffix. To register your platform with RNPM, your module's name must start with a `react-native-` suffix. You must also have an entry in your `package.json` like this: +As of React Native 0.57 you can now register your React Native platform with React Native's JavaScript bundler, [Metro](https://facebook.github.io/metro/). This means you can pass `--platform example` to `react-native bundle`, and it will look for JavaScript files with the `.example.js` suffix. + +To register your platform with RNPM, your module's name must match one of these patterns: + +* `react-native-example` - It will search all top-level modules that start with `react-native-` +* `@org/react-native-example` - It will search for modules that start with `react-native-` under any scope +* `@react-native-example/module` - It will search in all modules under scopes with names starting with `@react-native-` + +You must also have an entry in your `package.json` like this: ```json diff --git a/docs/versions/unversioned/react-native/performance.md b/docs/versions/unversioned/react-native/performance.md index f2fe59e7525a6c..7f4cac08a35957 100644 --- a/docs/versions/unversioned/react-native/performance.md +++ b/docs/versions/unversioned/react-native/performance.md @@ -231,7 +231,7 @@ If you identified a JS problem, look for clues in the specific JS that you're ex ![Too much JS](https://facebook.github.io/react-native/docs/assets/SystraceBadJS2.png) -This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into [shouldComponentUpdate](https://reactjs.org/docs/react-component.html#shouldcomponentupdate). +This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into [shouldComponentUpdate](https://facebook.github.io/react/component-specs.md#updating-shouldcomponentupdate). #### Resolving native UI Issues diff --git a/docs/versions/unversioned/react-native/picker.md b/docs/versions/unversioned/react-native/picker.md index d7a20977638630..09c1e5d248d98d 100644 --- a/docs/versions/unversioned/react-native/picker.md +++ b/docs/versions/unversioned/react-native/picker.md @@ -9,9 +9,9 @@ Renders the native picker component on iOS and Android. Example: ```javascript this.setState(${"{"}language: itemValue${"}"})${"}"}> + selectedValue={this.state.language} + style={{ height: 50, width: 100 }} + onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}> diff --git a/docs/versions/unversioned/react-native/props.md b/docs/versions/unversioned/react-native/props.md index 007362d43d9f0f..d807dd8e7cadd5 100644 --- a/docs/versions/unversioned/react-native/props.md +++ b/docs/versions/unversioned/react-native/props.md @@ -30,7 +30,7 @@ AppRegistry.registerComponent('AwesomeProject', () => Bananas); ``` -Notice that `{pic}` is surrounded by braces, to embed the variable `pic` into JSX. You can put any JavaScript expression inside braces in JSX. +Notice the braces surrounding `{pic}` - these embed the variable `pic` into JSX. You can put any JavaScript expression inside braces in JSX. Your own components can also use `props`. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place. Just refer to `this.props` in your `render` function. Here's an example: diff --git a/docs/versions/unversioned/react-native/share.md b/docs/versions/unversioned/react-native/share.md index 966b76fbfeadf0..e2f9aee8906daa 100644 --- a/docs/versions/unversioned/react-native/share.md +++ b/docs/versions/unversioned/react-native/share.md @@ -80,5 +80,47 @@ static dismissedAction() ``` -The dialog has been dismissed. @platform ios +_iOS Only_. The dialog has been dismissed. + +## Basic Example + + +```javascript + +import React, {Component} from 'react' +import {Share, Button} from 'react-native' + +class ShareExample extends Component { + + async onShare = () => { + try { + const result = await Share.share({ + message: + 'React Native | A framework for building native apps using React', + }) + + if (result.action === Share.sharedAction) { + if (result.activityType) { + // shared with activity type of result.activityType + } else { + // shared + } + } else if (result.action === Share.dismissedAction) { + // dismissed + } + } catch (error) { + alert(error.message); + } + }; + + render() { + return ( + + ); + } + +} + +``` + diff --git a/docs/versions/unversioned/react-native/state.md b/docs/versions/unversioned/react-native/state.md index 03a62d738cd5a6..5aae172fa82fb9 100644 --- a/docs/versions/unversioned/react-native/state.md +++ b/docs/versions/unversioned/react-native/state.md @@ -18,20 +18,23 @@ import { AppRegistry, Text, View } from 'react-native'; class Blink extends Component { constructor(props) { super(props); - this.state = {isShowingText: true}; + this.state = { isShowingText: true }; // Toggle the state every second - setInterval(() => { - this.setState(previousState => { - return { isShowingText: !previousState.isShowingText }; - }); - }, 1000); + setInterval(() => ( + this.setState(previousState => ( + { isShowingText: !previousState.isShowingText } + )) + ), 1000); } render() { - let display = this.state.isShowingText ? this.props.text : ' '; + if (!this.state.isShowingText) { + return null; + } + return ( - {display} + {this.props.text} ); } } diff --git a/docs/versions/unversioned/react-native/style.md b/docs/versions/unversioned/react-native/style.md index eada9ecbc2533f..e4ba115534cced 100644 --- a/docs/versions/unversioned/react-native/style.md +++ b/docs/versions/unversioned/react-native/style.md @@ -15,6 +15,17 @@ As a component grows in complexity, it is often cleaner to use `StyleSheet.creat import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; +const styles = StyleSheet.create({ + bigblue: { + color: 'blue', + fontWeight: 'bold', + fontSize: 30, + }, + red: { + color: 'red', + }, +}); + export default class LotsOfStyles extends Component { render() { return ( @@ -28,17 +39,6 @@ export default class LotsOfStyles extends Component { } } -const styles = StyleSheet.create({ - bigblue: { - color: 'blue', - fontWeight: 'bold', - fontSize: 30, - }, - red: { - color: 'red', - }, -}); - // skip this line if using Create React Native App AppRegistry.registerComponent('AwesomeProject', () => LotsOfStyles); diff --git a/docs/versions/unversioned/react-native/stylesheet.md b/docs/versions/unversioned/react-native/stylesheet.md index e32a13a4fb3c0e..eb33fef121eb70 100644 --- a/docs/versions/unversioned/react-native/stylesheet.md +++ b/docs/versions/unversioned/react-native/stylesheet.md @@ -45,11 +45,6 @@ Code quality: * By moving styles away from the render function, you're making the code easier to understand. * Naming the styles is a good way to add meaning to the low level components in the render function. -Performance: - -* Making a stylesheet from a style object makes it possible to refer to it by ID instead of creating a new style object every time. -* It also allows to send the style only once through the bridge. All subsequent uses are going to refer an id (not implemented yet). - ### Methods * [`setStyleAttributePreprocessor`](stylesheet.md#setstyleattributepreprocessor) @@ -184,7 +179,7 @@ A line with hairline width may not be visible if your simulator is downscaled. ### `absoluteFill` -A very common pattern is to create overlays with position absolute and zero positioning, so `absoluteFill` can be used for convenience and to reduce duplication of these repeated styles. +A very common pattern is to create overlays with position absolute and zero positioning (`position: 'absolute', left: 0, right: 0, top: 0, bottom: 0`), so `absoluteFill` can be used for convenience and to reduce duplication of these repeated styles. --- diff --git a/docs/versions/unversioned/react-native/switch.md b/docs/versions/unversioned/react-native/switch.md index dbc0dc4e3a24ab..3d6c8c884f5ee4 100644 --- a/docs/versions/unversioned/react-native/switch.md +++ b/docs/versions/unversioned/react-native/switch.md @@ -9,16 +9,16 @@ This is a controlled component that requires an `onValueChange` callback that up ### Props -- [View props...](view.md#props) +* [View props...](view.md#props) -* [`disabled`](switch.md#disabled) -* [`trackColor`](switch.md#trackcolor) -* [`ios_backgroundColor`](switch.md#ios-backgroundcolor) -* [`onValueChange`](switch.md#onvaluechange) -* [`testID`](switch.md#testid) -* [`thumbColor`](switch.md#thumbcolor) -* [`tintColor`](switch.md#tintcolor) -* [`value`](switch.md#value) +- [`disabled`](switch.md#disabled) +- [`trackColor`](switch.md#trackcolor) +- [`ios_backgroundColor`](switch.md#ios-backgroundcolor) +- [`onValueChange`](switch.md#onvaluechange) +- [`testID`](switch.md#testid) +- [`thumbColor`](switch.md#thumbcolor) +- [`tintColor`](switch.md#tintcolor) +- [`value`](switch.md#value) --- @@ -38,9 +38,9 @@ If true the user won't be able to toggle the switch. Default value is false. ### `trackColor` -Custom colors for the switch track. `onTintColor` is now deprecated. +Custom colors for the switch track. -iOS: when the switch value is false, the track shrinks into the border. If you want to change the color of the background exposed by the shrunken track, use [`ios_backgroundColor`](switch.md#ios_backgroundColor). +_iOS_: When the switch value is false, the track shrinks into the border. If you want to change the color of the background exposed by the shrunken track, use [`ios_backgroundColor`](switch.md#ios_backgroundColor). | Type | Required | | ------------------------------------------------------------- | -------- | @@ -90,6 +90,8 @@ Color of the foreground switch grip. If this is set on iOS, the switch grip will ### `tintColor` +`tintColor` is deprecated, use `trackColor` instead. + Border color on iOS and background color on Android when the switch is turned off. | Type | Required | diff --git a/docs/versions/unversioned/react-native/text.md b/docs/versions/unversioned/react-native/text.md index 669869e6cffd31..dc9ff047d4f081 100644 --- a/docs/versions/unversioned/react-native/text.md +++ b/docs/versions/unversioned/react-native/text.md @@ -68,7 +68,7 @@ export default class BoldAndBeautiful extends Component { render() { return ( - I am bold + I am bold and red diff --git a/docs/versions/unversioned/react-native/toastandroid.md b/docs/versions/unversioned/react-native/toastandroid.md index 1cce369073bd68..580ec3b15fc718 100644 --- a/docs/versions/unversioned/react-native/toastandroid.md +++ b/docs/versions/unversioned/react-native/toastandroid.md @@ -17,20 +17,20 @@ Basic usage: ```javascript -import { ToastAndroid } from 'react-native'; +import {ToastAndroid} from 'react-native'; ToastAndroid.show('A pikachu appeared nearby !', ToastAndroid.SHORT); ToastAndroid.showWithGravity( 'All Your Base Are Belong To Us', ToastAndroid.SHORT, - ToastAndroid.CENTER + ToastAndroid.CENTER, ); ToastAndroid.showWithGravityAndOffset( 'A wild toast appeared!', ToastAndroid.LONG, ToastAndroid.BOTTOM, 25, - 50 + 50, ); ``` @@ -38,18 +38,13 @@ ToastAndroid.showWithGravityAndOffset( ### Advanced usage: -The ToastAndroid API is imperative and this might present itself as an issue, but there is actually a way(hack) -to expose a declarative component from it. See an example below: +The ToastAndroid API is imperative and this might present itself as an issue, but there is actually a way(hack) to expose a declarative component from it. See an example below: ```javascript -import React, { Component } from 'react'; -import { - View, - Button, - ToastAndroid, -} from 'react-native'; +import React, {Component} from 'react'; +import {View, Button, ToastAndroid} from 'react-native'; // a component that calls the imperative ToastAndroid API const Toast = (props) => { @@ -59,7 +54,7 @@ const Toast = (props) => { ToastAndroid.LONG, ToastAndroid.BOTTOM, 25, - 50 + 50, ); return null; } @@ -75,26 +70,26 @@ class App extends Component { } handleButtonPress = () => { - this.setState({ + this.setState( + { visible: true, - }, () => { - this.hideToast(); - }); + }, + () => { + this.hideToast(); + }, + ); }; hideToast = () => { this.setState({ - visible: false - }) - } + visible: false, + }); + }; render() { return ( - + + ); + } + +} + +``` + diff --git a/docs/versions/v31.0.0/react-native/state.md b/docs/versions/v31.0.0/react-native/state.md index 03a62d738cd5a6..5aae172fa82fb9 100644 --- a/docs/versions/v31.0.0/react-native/state.md +++ b/docs/versions/v31.0.0/react-native/state.md @@ -18,20 +18,23 @@ import { AppRegistry, Text, View } from 'react-native'; class Blink extends Component { constructor(props) { super(props); - this.state = {isShowingText: true}; + this.state = { isShowingText: true }; // Toggle the state every second - setInterval(() => { - this.setState(previousState => { - return { isShowingText: !previousState.isShowingText }; - }); - }, 1000); + setInterval(() => ( + this.setState(previousState => ( + { isShowingText: !previousState.isShowingText } + )) + ), 1000); } render() { - let display = this.state.isShowingText ? this.props.text : ' '; + if (!this.state.isShowingText) { + return null; + } + return ( - {display} + {this.props.text} ); } } diff --git a/docs/versions/v31.0.0/react-native/style.md b/docs/versions/v31.0.0/react-native/style.md index eada9ecbc2533f..e4ba115534cced 100644 --- a/docs/versions/v31.0.0/react-native/style.md +++ b/docs/versions/v31.0.0/react-native/style.md @@ -15,6 +15,17 @@ As a component grows in complexity, it is often cleaner to use `StyleSheet.creat import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; +const styles = StyleSheet.create({ + bigblue: { + color: 'blue', + fontWeight: 'bold', + fontSize: 30, + }, + red: { + color: 'red', + }, +}); + export default class LotsOfStyles extends Component { render() { return ( @@ -28,17 +39,6 @@ export default class LotsOfStyles extends Component { } } -const styles = StyleSheet.create({ - bigblue: { - color: 'blue', - fontWeight: 'bold', - fontSize: 30, - }, - red: { - color: 'red', - }, -}); - // skip this line if using Create React Native App AppRegistry.registerComponent('AwesomeProject', () => LotsOfStyles); diff --git a/docs/versions/v31.0.0/react-native/stylesheet.md b/docs/versions/v31.0.0/react-native/stylesheet.md index e32a13a4fb3c0e..eb33fef121eb70 100644 --- a/docs/versions/v31.0.0/react-native/stylesheet.md +++ b/docs/versions/v31.0.0/react-native/stylesheet.md @@ -45,11 +45,6 @@ Code quality: * By moving styles away from the render function, you're making the code easier to understand. * Naming the styles is a good way to add meaning to the low level components in the render function. -Performance: - -* Making a stylesheet from a style object makes it possible to refer to it by ID instead of creating a new style object every time. -* It also allows to send the style only once through the bridge. All subsequent uses are going to refer an id (not implemented yet). - ### Methods * [`setStyleAttributePreprocessor`](stylesheet.md#setstyleattributepreprocessor) @@ -184,7 +179,7 @@ A line with hairline width may not be visible if your simulator is downscaled. ### `absoluteFill` -A very common pattern is to create overlays with position absolute and zero positioning, so `absoluteFill` can be used for convenience and to reduce duplication of these repeated styles. +A very common pattern is to create overlays with position absolute and zero positioning (`position: 'absolute', left: 0, right: 0, top: 0, bottom: 0`), so `absoluteFill` can be used for convenience and to reduce duplication of these repeated styles. --- diff --git a/docs/versions/v31.0.0/react-native/switch.md b/docs/versions/v31.0.0/react-native/switch.md index dbc0dc4e3a24ab..3d6c8c884f5ee4 100644 --- a/docs/versions/v31.0.0/react-native/switch.md +++ b/docs/versions/v31.0.0/react-native/switch.md @@ -9,16 +9,16 @@ This is a controlled component that requires an `onValueChange` callback that up ### Props -- [View props...](view.md#props) +* [View props...](view.md#props) -* [`disabled`](switch.md#disabled) -* [`trackColor`](switch.md#trackcolor) -* [`ios_backgroundColor`](switch.md#ios-backgroundcolor) -* [`onValueChange`](switch.md#onvaluechange) -* [`testID`](switch.md#testid) -* [`thumbColor`](switch.md#thumbcolor) -* [`tintColor`](switch.md#tintcolor) -* [`value`](switch.md#value) +- [`disabled`](switch.md#disabled) +- [`trackColor`](switch.md#trackcolor) +- [`ios_backgroundColor`](switch.md#ios-backgroundcolor) +- [`onValueChange`](switch.md#onvaluechange) +- [`testID`](switch.md#testid) +- [`thumbColor`](switch.md#thumbcolor) +- [`tintColor`](switch.md#tintcolor) +- [`value`](switch.md#value) --- @@ -38,9 +38,9 @@ If true the user won't be able to toggle the switch. Default value is false. ### `trackColor` -Custom colors for the switch track. `onTintColor` is now deprecated. +Custom colors for the switch track. -iOS: when the switch value is false, the track shrinks into the border. If you want to change the color of the background exposed by the shrunken track, use [`ios_backgroundColor`](switch.md#ios_backgroundColor). +_iOS_: When the switch value is false, the track shrinks into the border. If you want to change the color of the background exposed by the shrunken track, use [`ios_backgroundColor`](switch.md#ios_backgroundColor). | Type | Required | | ------------------------------------------------------------- | -------- | @@ -90,6 +90,8 @@ Color of the foreground switch grip. If this is set on iOS, the switch grip will ### `tintColor` +`tintColor` is deprecated, use `trackColor` instead. + Border color on iOS and background color on Android when the switch is turned off. | Type | Required | diff --git a/docs/versions/v31.0.0/react-native/text.md b/docs/versions/v31.0.0/react-native/text.md index 669869e6cffd31..dc9ff047d4f081 100644 --- a/docs/versions/v31.0.0/react-native/text.md +++ b/docs/versions/v31.0.0/react-native/text.md @@ -68,7 +68,7 @@ export default class BoldAndBeautiful extends Component { render() { return ( - I am bold + I am bold and red diff --git a/docs/versions/v31.0.0/react-native/toastandroid.md b/docs/versions/v31.0.0/react-native/toastandroid.md index 1cce369073bd68..580ec3b15fc718 100644 --- a/docs/versions/v31.0.0/react-native/toastandroid.md +++ b/docs/versions/v31.0.0/react-native/toastandroid.md @@ -17,20 +17,20 @@ Basic usage: ```javascript -import { ToastAndroid } from 'react-native'; +import {ToastAndroid} from 'react-native'; ToastAndroid.show('A pikachu appeared nearby !', ToastAndroid.SHORT); ToastAndroid.showWithGravity( 'All Your Base Are Belong To Us', ToastAndroid.SHORT, - ToastAndroid.CENTER + ToastAndroid.CENTER, ); ToastAndroid.showWithGravityAndOffset( 'A wild toast appeared!', ToastAndroid.LONG, ToastAndroid.BOTTOM, 25, - 50 + 50, ); ``` @@ -38,18 +38,13 @@ ToastAndroid.showWithGravityAndOffset( ### Advanced usage: -The ToastAndroid API is imperative and this might present itself as an issue, but there is actually a way(hack) -to expose a declarative component from it. See an example below: +The ToastAndroid API is imperative and this might present itself as an issue, but there is actually a way(hack) to expose a declarative component from it. See an example below: ```javascript -import React, { Component } from 'react'; -import { - View, - Button, - ToastAndroid, -} from 'react-native'; +import React, {Component} from 'react'; +import {View, Button, ToastAndroid} from 'react-native'; // a component that calls the imperative ToastAndroid API const Toast = (props) => { @@ -59,7 +54,7 @@ const Toast = (props) => { ToastAndroid.LONG, ToastAndroid.BOTTOM, 25, - 50 + 50, ); return null; } @@ -75,26 +70,26 @@ class App extends Component { } handleButtonPress = () => { - this.setState({ + this.setState( + { visible: true, - }, () => { - this.hideToast(); - }); + }, + () => { + this.hideToast(); + }, + ); }; hideToast = () => { this.setState({ - visible: false - }) - } + visible: false, + }); + }; render() { return ( - +