[ReactNative][SyncDiff] Add Movies app

Examples/Movies/MovieCell.js

@@ -19,9 +19,11 @@ var React = require('react-native');
 var {
   Image,
   PixelRatio,
+  Platform,
   StyleSheet,
   Text,
   TouchableHighlight,
+  TouchableNativeFeedback,
   View
 } = React;
 
@@ -32,9 +34,13 @@ var getTextFromScore = require('./getTextFromScore');
 var MovieCell = React.createClass({
   render: function() {
     var criticsScore = this.props.movie.ratings.critics_score;
+    var TouchableElement = TouchableHighlight;
+    if (Platform.OS === 'android') {
+      TouchableElement = TouchableNativeFeedback;
+    }
     return (
       <View>
-        <TouchableHighlight
+        <TouchableElement
           onPress={this.props.onSelect}
           onShowUnderlay={this.props.onHighlight}
           onHideUnderlay={this.props.onUnhighlight}>
@@ -59,7 +65,7 @@ var MovieCell = React.createClass({
               </Text>
             </View>
           </View>
-        </TouchableHighlight>
+        </TouchableElement>
       </View>
     );
   }

Examples/Movies/SearchBar.ios.js

@@ -0,0 +1,66 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @providesModule SearchBar
+ * @flow
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  ActivityIndicatorIOS,
+  TextInput,
+  StyleSheet,
+  View,
+} = React;
+
+var SearchBar = React.createClass({
+  render: function() {
+    return (
+      <View style={styles.searchBar}>
+        <TextInput
+          autoCapitalize="none"
+          autoCorrect={false}
+          onChange={this.props.onSearchChange}
+          placeholder="Search a movie..."
+          onFocus={this.props.onFocus}
+          style={styles.searchBarInput}
+        />
+        <ActivityIndicatorIOS
+          animating={this.props.isLoading}
+          style={styles.spinner}
+        />
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  searchBar: {
+    marginTop: 64,
+    padding: 3,
+    paddingLeft: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  searchBarInput: {
+    fontSize: 15,
+    flex: 1,
+    height: 30,
+  },
+  spinner: {
+    width: 30,
+  },
+});
+
+module.exports = SearchBar;

Examples/Movies/SearchScreen.js

@@ -19,6 +19,8 @@ var React = require('react-native');
 var {
   ActivityIndicatorIOS,
   ListView,
+  Platform,
+  ProgressBarAndroid,
   StyleSheet,
   Text,
   TextInput,
@@ -27,9 +29,11 @@ var {
 var TimerMixin = require('react-timer-mixin');
 
 var invariant = require('invariant');
+var dismissKeyboard = require('dismissKeyboard');
 
 var MovieCell = require('./MovieCell');
 var MovieScreen = require('./MovieScreen');
+var SearchBar = require('SearchBar');
 
 /**
  * This is for demo purposes only, and rate limited.
@@ -219,11 +223,20 @@ var SearchScreen = React.createClass({
   },
 
   selectMovie: function(movie: Object) {
+    if (Platform.OS === 'ios') {
       this.props.navigator.push({
         title: movie.title,
         component: MovieScreen,
         passProps: {movie},
       });
+    } else {
+      dismissKeyboard();
+      this.props.navigator.push({
+        title: movie.title,
+        name: 'movie',
+        movie: movie,
+      });
+    }
   },
 
   onSearchChange: function(event: Object) {
@@ -237,7 +250,15 @@ var SearchScreen = React.createClass({
     if (!this.hasMore() || !this.state.isLoadingTail) {
       return <View style={styles.scrollSpinner} />;
     }
+    if (Platform.OS === 'ios') {
       return <ActivityIndicatorIOS style={styles.scrollSpinner} />;
+    } else {
+      return (
+        <View  style={{alignItems: 'center'}}>
+          <ProgressBarAndroid styleAttr="Large"/>
+        </View>
+      );
+    }
   },
 
   renderSeparator: function(
@@ -295,7 +316,8 @@ var SearchScreen = React.createClass({
         <SearchBar
           onSearchChange={this.onSearchChange}
           isLoading={this.state.isLoading}
-          onFocus={() => this.refs.listview.getScrollResponder().scrollTo(0, 0)}
+          onFocus={() =>
+            this.refs.listview && this.refs.listview.getScrollResponder().scrollTo(0, 0)}
         />
         <View style={styles.separator} />
         {content}
@@ -323,27 +345,6 @@ var NoMovies = React.createClass({
   }
 });
 
-var SearchBar = React.createClass({
-  render: function() {
-    return (
-      <View style={styles.searchBar}>
-        <TextInput
-          autoCapitalize="none"
-          autoCorrect={false}
-          onChange={this.props.onSearchChange}
-          placeholder="Search a movie..."
-          onFocus={this.props.onFocus}
-          style={styles.searchBarInput}
-        />
-        <ActivityIndicatorIOS
-          animating={this.props.isLoading}
-          style={styles.spinner}
-        />
-      </View>
-    );
-  }
-});
-
 var styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -356,25 +357,10 @@ var styles = StyleSheet.create({
     marginTop: 80,
     color: '#888888',
   },
-  searchBar: {
-    marginTop: 64,
-    padding: 3,
-    paddingLeft: 8,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  searchBarInput: {
-    fontSize: 15,
-    flex: 1,
-    height: 30,
-  },
   separator: {
     height: 1,
     backgroundColor: '#eeeeee',
   },
-  spinner: {
-    width: 30,
-  },
   scrollSpinner: {
     marginVertical: 20,
   },