Add simple ListScreen to test collapsing bottom tabs functionality

example-redux/package.json

@@ -15,7 +15,7 @@
     "redux": "^3.0.5",
     "redux-thunk": "^1.0.3",
     "seamless-immutable": "^5.0.1",
-    "react-native-navigation": "file:../",
+    "react-native-navigation": "latest",
     "babel-preset-react-native-stage-0": "*"
   }
 }

example-redux/src/screens/ListScreen.js

@@ -0,0 +1,101 @@
+import React, {Component, PropTypes} from 'react';
+import {
+  Text,
+  View,
+  ScrollView,
+  TouchableOpacity,
+  StyleSheet,
+  ListView,
+} from 'react-native';
+import {connect} from 'react-redux';
+import * as counterActions from '../reducers/counter/actions';
+
+const LOREM_IPSUM = 'Lorem ipsum dolor sit amet, ius ad pertinax oportere accommodare, an vix civibus corrumpit referrentur. Te nam case ludus inciderint, te mea facilisi adipiscing. Sea id integre luptatum. In tota sale consequuntur nec. Erat ocurreret mei ei. Eu paulo sapientem vulputate est, vel an accusam intellegam interesset. Nam eu stet pericula reprimique, ea vim illud modus, putant invidunt reprehendunt ne qui.';
+const hashCode = function(str) {
+  var hash = 15;
+  for (var ii = str.length - 1; ii >= 0; ii--) {
+    hash = ((hash << 5) - hash) + str.charCodeAt(ii);
+  }
+  return hash;
+};
+
+class ListScreen extends Component {
+
+  static navigatorStyle = {
+    statusBarColor: '#7CB342',
+    toolBarColor: '#8BC34A',
+    navigationBarColor: '#8BC34A'
+  };
+
+  constructor(props) {
+    super(props);
+
+    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
+    this.state = {
+      dataSource: ds.cloneWithRows(this._genRows({}))
+    }
+  }
+
+  componentWillMount() {
+    this._pressData = {};
+  }
+
+  render() {
+    return (
+      <ListView
+        dataSource={this.state.dataSource}
+        renderRow={this._renderRow}/>
+    );
+  }
+
+  _renderRow(rowData, sectionID, rowID) {
+    const rowHash = Math.abs(hashCode(rowData));
+    return (
+      <View style={styles.row}>
+        <Text style={styles.text}>
+          {rowData + ' - ' + LOREM_IPSUM.substr(0, rowHash % 301 + 10)}
+        </Text>
+      </View>
+    );
+  }
+
+  _genRows() {
+    var dataBlob = [];
+    for (var ii = 0; ii < 100; ii++) {
+      dataBlob.push('Row ' + ii + ' ');
+    }
+    return dataBlob;
+  }
+
+  _renderSeparator(sectionID, rowID) {
+    return (
+      <View
+        key={`${sectionID}-${rowID}`}
+        style={{
+          height: 1,
+          backgroundColor: rowID % 2 == 0 ? '#3B5998' : '#CCCCCC'
+        }}
+      />
+    );
+  }
+}
+
+export default connect()(ListScreen);
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    padding: 10,
+    backgroundColor: '#F6F6F6'
+  },
+  thumb: {
+    width: 64,
+    height: 64
+  },
+  text: {
+    flex: 1
+  }
+});
+
+

example-redux/src/screens/index.js

@@ -4,6 +4,7 @@ import LoginScreen from './LoginScreen';
 import FirstTabScreen from './FirstTabScreen';
 import SecondTabScreen from './SecondTabScreen';
 import PushedScreen from './PushedScreen';
+import ListScreen from './ListScreen';
 
 // register all screens of the app (including internal ones)
 export function registerScreens(store, Provider) {
@@ -11,4 +12,5 @@ export function registerScreens(store, Provider) {
   Navigation.registerComponent('example.FirstTabScreen', () => FirstTabScreen, store, Provider);
   Navigation.registerComponent('example.SecondTabScreen', () => SecondTabScreen, store, Provider);
   Navigation.registerComponent('example.PushedScreen', () => PushedScreen, store, Provider);
+  Navigation.registerComponent('example.ListScreen', () => ListScreen, store, Provider);
 }