From 4c245160bd9a67acb3d5d39f0369d15e2141e043 Mon Sep 17 00:00:00 2001 From: Janic Duplessis Date: Mon, 13 Jun 2016 22:15:47 -0700 Subject: [PATCH] Replace deprecated ActivityIndicatorIOS and ProgressBar with ActivityIndicator Summary: This replaces ActivityIndicatorIOS and indeterminate ProgressBar that were deprecated recently with ActivityIndicator across the codebase and examples and a few other cleanups. This also make a small tweak to ActivityIndicator so it uses the Android theme color instead of gray when no color is specified. Use Slider instead of SliderIOS in CameraRoll example. Remove the line about unifying ActivityIndicator and ProgressBar. **Test plan** Tested the affected components in UIExplorer on iOS and Android, tested the changes made in Movies example on iOS and Android. Closes https://github.com/facebook/react-native/pull/8082 Differential Revision: D3429770 fbshipit-source-id: 3b2e1196a8b9fe00d47a7aa1bbc079b094796421 --- Examples/Movies/SearchBar.android.js | 21 +++++++------------ Examples/Movies/SearchBar.ios.js | 4 ++-- Examples/Movies/SearchScreen.js | 14 +++---------- Examples/UIExplorer/CameraRollExample.js | 4 ++-- Examples/UIExplorer/CameraRollView.js | 6 +++--- Examples/UIExplorer/ImageExample.js | 4 ++-- Examples/UIExplorer/UIExplorerExampleList.js | 1 + .../ActivityIndicator/ActivityIndicator.js | 2 +- .../Components/WebView/WebView.android.js | 5 ++--- Libraries/Components/WebView/WebView.ios.js | 4 ++-- docs/KnownIssues.md | 1 - 11 files changed, 26 insertions(+), 40 deletions(-) diff --git a/Examples/Movies/SearchBar.android.js b/Examples/Movies/SearchBar.android.js index d4110ef9de1..f54b1b894cf 100644 --- a/Examples/Movies/SearchBar.android.js +++ b/Examples/Movies/SearchBar.android.js @@ -21,7 +21,7 @@ var ReactNative = require('react-native'); var { Image, Platform, - ProgressBarAndroid, + ActivityIndicator, TextInput, StyleSheet, TouchableNativeFeedback, @@ -32,17 +32,6 @@ var IS_RIPPLE_EFFECT_SUPPORTED = Platform.Version >= 21; var SearchBar = React.createClass({ render: function() { - var loadingView; - if (this.props.isLoading) { - loadingView = ( - - ); - } else { - loadingView = ; - } var background = IS_RIPPLE_EFFECT_SUPPORTED ? TouchableNativeFeedback.SelectableBackgroundBorderless() : TouchableNativeFeedback.SelectableBackground(); @@ -69,7 +58,12 @@ var SearchBar = React.createClass({ onFocus={this.props.onFocus} style={styles.searchBarInput} /> - {loadingView} + ); } @@ -94,6 +88,7 @@ var styles = StyleSheet.create({ spinner: { width: 30, height: 30, + marginRight: 16, }, icon: { width: 24, diff --git a/Examples/Movies/SearchBar.ios.js b/Examples/Movies/SearchBar.ios.js index 754a10b0ab6..b4429f56f80 100644 --- a/Examples/Movies/SearchBar.ios.js +++ b/Examples/Movies/SearchBar.ios.js @@ -19,7 +19,7 @@ var React = require('react'); var ReactNative = require('react-native'); var { - ActivityIndicatorIOS, + ActivityIndicator, TextInput, StyleSheet, View, @@ -37,7 +37,7 @@ var SearchBar = React.createClass({ onFocus={this.props.onFocus} style={styles.searchBarInput} /> - diff --git a/Examples/Movies/SearchScreen.js b/Examples/Movies/SearchScreen.js index 88eabcdee33..e8400c39a3b 100644 --- a/Examples/Movies/SearchScreen.js +++ b/Examples/Movies/SearchScreen.js @@ -18,10 +18,9 @@ var React = require('react'); var ReactNative = require('react-native'); var { - ActivityIndicatorIOS, + ActivityIndicator, ListView, Platform, - ProgressBarAndroid, StyleSheet, Text, View, @@ -250,15 +249,8 @@ var SearchScreen = React.createClass({ if (!this.hasMore() || !this.state.isLoadingTail) { return ; } - if (Platform.OS === 'ios') { - return ; - } else { - return ( - - - - ); - } + + return ; }, renderSeparator: function( diff --git a/Examples/UIExplorer/CameraRollExample.js b/Examples/UIExplorer/CameraRollExample.js index f39b78f3987..0dcad8adba5 100644 --- a/Examples/UIExplorer/CameraRollExample.js +++ b/Examples/UIExplorer/CameraRollExample.js @@ -20,7 +20,7 @@ const ReactNative = require('react-native'); const { CameraRoll, Image, - SliderIOS, + Slider, StyleSheet, Switch, Text, @@ -51,7 +51,7 @@ const CameraRollExample = React.createClass({ onValueChange={this._onSwitchChange} value={this.state.bigImages} /> {(this.state.bigImages ? 'Big' : 'Small') + ' Images'} - diff --git a/Examples/UIExplorer/CameraRollView.js b/Examples/UIExplorer/CameraRollView.js index 3dca7867f71..f5f428f95a0 100644 --- a/Examples/UIExplorer/CameraRollView.js +++ b/Examples/UIExplorer/CameraRollView.js @@ -19,7 +19,7 @@ var React = require('react'); var ReactNative = require('react-native'); var { - ActivityIndicatorIOS, + ActivityIndicator, CameraRoll, Image, ListView, @@ -141,7 +141,7 @@ var CameraRollView = React.createClass({ groupTypes: this.props.groupTypes, assetType: this.props.assetType, }; - if (Platform.OS === "android") { + if (Platform.OS === 'android') { // not supported in android delete fetchParams.groupTypes; } @@ -191,7 +191,7 @@ var CameraRollView = React.createClass({ _renderFooterSpinner: function() { if (!this.state.noMore) { - return ; + return ; } return null; }, diff --git a/Examples/UIExplorer/ImageExample.js b/Examples/UIExplorer/ImageExample.js index 905c17f4cb9..50809906433 100644 --- a/Examples/UIExplorer/ImageExample.js +++ b/Examples/UIExplorer/ImageExample.js @@ -25,12 +25,12 @@ var React = require('react'); var ReactNative = require('react-native'); var { + ActivityIndicator, Image, Platform, StyleSheet, Text, View, - ActivityIndicatorIOS } = ReactNative; var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg=='; @@ -108,7 +108,7 @@ var NetworkImageExample = React.createClass({ var loader = this.state.loading ? {this.state.progress}% - + : null; return this.state.error ? {this.state.error} : diff --git a/Examples/UIExplorer/UIExplorerExampleList.js b/Examples/UIExplorer/UIExplorerExampleList.js index e0331bde98e..ea06c05f10c 100644 --- a/Examples/UIExplorer/UIExplorerExampleList.js +++ b/Examples/UIExplorer/UIExplorerExampleList.js @@ -80,6 +80,7 @@ class UIExplorerExampleList extends React.Component { dataSource={dataSource} renderRow={this._renderExampleRow.bind(this)} renderSectionHeader={this._renderSectionHeader} + enableEmptySections={true} keyboardShouldPersistTaps={true} automaticallyAdjustContentInsets={false} keyboardDismissMode="on-drag" diff --git a/Libraries/Components/ActivityIndicator/ActivityIndicator.js b/Libraries/Components/ActivityIndicator/ActivityIndicator.js index 636f68327b3..f30fe79ace0 100644 --- a/Libraries/Components/ActivityIndicator/ActivityIndicator.js +++ b/Libraries/Components/ActivityIndicator/ActivityIndicator.js @@ -58,7 +58,7 @@ const ActivityIndicator = React.createClass({ getDefaultProps() { return { animating: true, - color: GRAY, + color: Platform.OS === 'ios' ? GRAY : undefined, hidesWhenStopped: true, size: 'small', }; diff --git a/Libraries/Components/WebView/WebView.android.js b/Libraries/Components/WebView/WebView.android.js index c9db749a8b9..d4eb7707908 100644 --- a/Libraries/Components/WebView/WebView.android.js +++ b/Libraries/Components/WebView/WebView.android.js @@ -11,7 +11,7 @@ 'use strict'; var EdgeInsetsPropType = require('EdgeInsetsPropType'); -var ProgressBarAndroid = require('ProgressBarAndroid'); +var ActivityIndicator = require('ActivityIndicator'); var React = require('React'); var ReactNative = require('ReactNative'); var ReactNativeViewAttributes = require('ReactNativeViewAttributes'); @@ -37,9 +37,8 @@ var WebViewState = keyMirror({ var defaultRenderLoading = () => ( - ); diff --git a/Libraries/Components/WebView/WebView.ios.js b/Libraries/Components/WebView/WebView.ios.js index 09eeee0c366..c3865963e57 100644 --- a/Libraries/Components/WebView/WebView.ios.js +++ b/Libraries/Components/WebView/WebView.ios.js @@ -11,7 +11,7 @@ */ 'use strict'; -var ActivityIndicatorIOS = require('ActivityIndicatorIOS'); +var ActivityIndicator = require('ActivityIndicator'); var EdgeInsetsPropType = require('EdgeInsetsPropType'); var React = require('React'); var ReactNative = require('ReactNative'); @@ -61,7 +61,7 @@ type Event = Object; var defaultRenderLoading = () => ( - + ); var defaultRenderError = (errorDomain, errorCode, errorDesc) => ( diff --git a/docs/KnownIssues.md b/docs/KnownIssues.md index 600eefb0a60..9a26760ce88 100644 --- a/docs/KnownIssues.md +++ b/docs/KnownIssues.md @@ -34,7 +34,6 @@ There are properties that work on one platform only, either because they can inh There are known cases where the APIs could be made more consistent across iOS and Android: - `` and `` on iOS do a similar thing. We might want to unify them to ``. -- `ActivityIndicator` could render a native spinning indicator on both platforms (currently this is done using `ActivityIndicatorIOS` on iOS and `ProgressBarAndroid` on Android). - `ProgressBar` could render a horizontal progress bar on both platforms (on iOS this is `ProgressViewIOS`, on Android it's `ProgressBarAndroid`). ### The `overflow` style property defaults to `hidden` and cannot be changed on Android