Add list screen for debug usage (#1940)

* add list screen for debug behaviours

* add dummy screen

* ui changes in ListScreen

* add push list screen function without add it to the button to the screen

* add and comment push list screen row

example/src/screens/NavigationTypes.js

@@ -34,6 +34,14 @@ class NavigationTypes extends React.Component {
     });
   };
 
+  pushListScreen = () => {
+    console.log('RANG', 'pushListScreen');
+    this.props.navigator.push({
+      screen: 'example.Types.ListScreen',
+      title: 'List Screen',
+    });
+  };
+
   pushCustomTopBarScreen = () => {
     this.props.navigator.push({
       screen: 'example.Types.CustomTopBarScreen'
@@ -99,6 +107,7 @@ class NavigationTypes extends React.Component {
       <ScrollView style={styles.container}>
         <Row title={'Toggle Drawer'} onPress={this.toggleDrawer}/>
         <Row title={'Push Screen'} testID={'pushScreen'} onPress={this.pushScreen}/>
+        {/*<Row title={'Push List Screen'} testID={'pushListScreen'} onPress={this.pushListScreen}/>*/}
         <Row title={'Custom TopBar'} onPress={this.pushCustomTopBarScreen}/>
         <Row title={'Custom Button'} onPress={this.pushCustomButtonScreen}/>
         <Row title={'Top Tabs Screen'} onPress={this.pushTopTabsScreen} platform={'android'}/>

example/src/screens/index.js

@@ -6,6 +6,8 @@ import Transitions from './Transitions';
 
 import Push from './types/Push';
 import Drawer from './types/Drawer';
+import ListScreen from './types/ListScreen';
+import DummyScreen from './types/DummyScreen';
 import LightBox from './types/LightBox';
 import Notification from './types/Notification';
 import Modal from './types/Modal';
@@ -32,6 +34,8 @@ export function registerScreens() {
   Navigation.registerComponent('example.Types.Push', () => Push);
   Navigation.registerComponent('example.Types.Drawer', () => Drawer);
   Navigation.registerComponent('example.Types.Screen', () => Drawer);
+  Navigation.registerComponent('example.Types.ListScreen', () => ListScreen);
+  Navigation.registerComponent('example.Types.DummyScreen', () => DummyScreen);
   Navigation.registerComponent('example.Types.Modal', () => Modal);
   Navigation.registerComponent('example.Types.LightBox', () => LightBox);
   Navigation.registerComponent('example.Types.Notification', () => Notification);

example/src/screens/types/DummyScreen.js

@@ -0,0 +1,38 @@
+import _ from 'lodash';
+import React, { Component } from 'react';
+import {
+  View,
+  ScrollView,
+  Dimensions,
+  Text,
+  StyleSheet,
+  Button
+} from 'react-native';
+
+
+class ListScreen extends Component {
+
+  render(){
+    return (
+      <View
+        style={[{flex: 1, justifyContent: 'center', alignItems:'center', backgroundColor: this.props.bgColor,}]}>
+
+        <Text>🤗</Text>
+        <Text>{this.props.text}</Text>
+
+
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  cellContainer: {
+    flex: 1,
+    paddingVertical: 30,
+  }
+});
+
+
+
+module.exports = ListScreen;

example/src/screens/types/ListScreen.js

@@ -0,0 +1,101 @@
+import _ from 'lodash';
+import React, { Component } from 'react';
+import {
+  View,
+  ScrollView,
+  Dimensions,
+  Text,
+  StyleSheet,
+  Button
+} from 'react-native';
+
+const Colors = [
+  "#1abc9c",
+  "#2ecc71",
+  "#3498db",
+  "#9b59b6",
+  "#34495e",
+  "#16a085",
+  "#27ae60",
+  "#2980b9",
+  "#8e44ad",
+  "#2c3e50",
+  "#f1c40f",
+  "#e67e22",
+  "#e74c3c",
+  "#ecf0f1",
+  "#95a5a6",
+  "#f39c12",
+  "#d35400",
+  "#c0392b",
+  "#bdc3c7",
+  "#7f8c8d"
+];
+const {height, width} = Dimensions.get('window');
+
+class ListScreen extends Component {
+  constructor(props){
+    super(props);
+    this.data = [];
+    const numberOfItems = 100;
+    for (i = 0; i < numberOfItems; i++) {
+      this.data.push({text:`cell ${i}`, tapCount: 0, id: i});
+    }
+  }
+
+  _onButtonPressed(i, color) {
+    this.props.navigator.push({
+      screen: 'example.Types.DummyScreen',
+      title: 'Dummy',
+      passProps: {
+        text: i,
+        bgColor: color
+      }
+    });
+  }
+
+  render(){
+    return (
+      <ScrollView
+        style={[{flex: 1, backgroundColor: 'transparent',}]}
+        scrollEnabled={true}
+        scrollsToTop={false}
+        scrollEventThrottle={100}
+        automaticallyAdjustContentInsets={false}
+        directionalLockEnabled={true}
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}>
+
+
+        {_.map(this.data, (o, i) => {
+          const color = getRandomColor(i);
+          return (
+            <View key={o.id} style={[styles.cellContainer, {backgroundColor: color}]}>
+              <Button title={o.text} onPress={() => {
+                this._onButtonPressed(i, color);
+              }}>
+              </Button>
+            </View>
+          );
+        })}
+
+
+      </ScrollView>
+    );
+  }
+}
+
+function getRandomColor(index) {
+  return Colors[index % Colors.length];
+}
+
+const styles = StyleSheet.create({
+  cellContainer: {
+    flex: 1,
+    paddingVertical: 30,
+  }
+});
+
+
+
+module.exports = ListScreen;