Add example layout: FlatList (#4092)

Lists are a crucial component to almost every single app out there. This example contains a flatlist inside a bottomTab layout with a sidemenu too (basically as complicated as a screen would get).

playground/src/assets/FakeListData.json

@@ -0,0 +1,606 @@
+{
+  "_comment": "This is fake data completely generated.",
+	"data": [
+    {
+      "id": 1,
+      "first_name": "Hamnet",
+      "last_name": "Macbane",
+      "email": "hmacbane0@cloudflare.com",
+      "gender": "Male"
+    }, {
+      "id": 2,
+      "first_name": "Booth",
+      "last_name": "Ravenscroft",
+      "email": "bravenscroft1@tumblr.com",
+      "gender": "Male"
+    }, {
+      "id": 3,
+      "first_name": "Nathalie",
+      "last_name": "Grimbleby",
+      "email": "ngrimbleby2@baidu.com",
+      "gender": "Female"
+    }, {
+      "id": 4,
+      "first_name": "Alane",
+      "last_name": "Batte",
+      "email": "abatte3@pen.io",
+      "gender": "Female"
+    }, {
+      "id": 5,
+      "first_name": "Walsh",
+      "last_name": "Guage",
+      "email": "wguage4@clickbank.net",
+      "gender": "Male"
+    }, {
+      "id": 6,
+      "first_name": "Diannne",
+      "last_name": "Tompsett",
+      "email": "dtompsett5@cbsnews.com",
+      "gender": "Female"
+    }, {
+      "id": 7,
+      "first_name": "Rozella",
+      "last_name": "Mathis",
+      "email": "rmathis6@imgur.com",
+      "gender": "Female"
+    }, {
+      "id": 8,
+      "first_name": "Percy",
+      "last_name": "Pickrill",
+      "email": "ppickrill7@ihg.com",
+      "gender": "Male"
+    }, {
+      "id": 9,
+      "first_name": "Sancho",
+      "last_name": "Downie",
+      "email": "sdownie8@furl.net",
+      "gender": "Male"
+    }, {
+      "id": 10,
+      "first_name": "Ynes",
+      "last_name": "Whiffin",
+      "email": "ywhiffin9@google.com",
+      "gender": "Female"
+    }, {
+      "id": 11,
+      "first_name": "Trev",
+      "last_name": "Wreiford",
+      "email": "twreiforda@vkontakte.ru",
+      "gender": "Male"
+    }, {
+      "id": 12,
+      "first_name": "Laney",
+      "last_name": "Salvatore",
+      "email": "lsalvatoreb@tmall.com",
+      "gender": "Male"
+    }, {
+      "id": 13,
+      "first_name": "Morten",
+      "last_name": "Kalinovich",
+      "email": "mkalinovichc@sina.com.cn",
+      "gender": "Male"
+    }, {
+      "id": 14,
+      "first_name": "Johnath",
+      "last_name": "Drinkall",
+      "email": "jdrinkalld@usatoday.com",
+      "gender": "Female"
+    }, {
+      "id": 15,
+      "first_name": "Granthem",
+      "last_name": "Harry",
+      "email": "gharrye@blogtalkradio.com",
+      "gender": "Male"
+    }, {
+      "id": 16,
+      "first_name": "Bebe",
+      "last_name": "Tull",
+      "email": "btullf@prnewswire.com",
+      "gender": "Female"
+    }, {
+      "id": 17,
+      "first_name": "Sharleen",
+      "last_name": "Fernihough",
+      "email": "sfernihoughg@pinterest.com",
+      "gender": "Female"
+    }, {
+      "id": 18,
+      "first_name": "Lorelle",
+      "last_name": "Semken",
+      "email": "lsemkenh@chron.com",
+      "gender": "Female"
+    }, {
+      "id": 19,
+      "first_name": "Tiphanie",
+      "last_name": "Redgrove",
+      "email": "tredgrovei@blogs.com",
+      "gender": "Female"
+    }, {
+      "id": 20,
+      "first_name": "Salome",
+      "last_name": "Camier",
+      "email": "scamierj@storify.com",
+      "gender": "Female"
+    }, {
+      "id": 21,
+      "first_name": "Inigo",
+      "last_name": "De Beneditti",
+      "email": "idebenedittik@ucoz.com",
+      "gender": "Male"
+    }, {
+      "id": 22,
+      "first_name": "Riva",
+      "last_name": "Picardo",
+      "email": "rpicardol@homestead.com",
+      "gender": "Female"
+    }, {
+      "id": 23,
+      "first_name": "Kahaleel",
+      "last_name": "Klug",
+      "email": "kklugm@51.la",
+      "gender": "Male"
+    }, {
+      "id": 24,
+      "first_name": "Patty",
+      "last_name": "Veryard",
+      "email": "pveryardn@gmpg.org",
+      "gender": "Male"
+    }, {
+      "id": 25,
+      "first_name": "Augustine",
+      "last_name": "Pattemore",
+      "email": "apattemoreo@artisteer.com",
+      "gender": "Male"
+    }, {
+      "id": 26,
+      "first_name": "Obadiah",
+      "last_name": "Moreinis",
+      "email": "omoreinisp@arstechnica.com",
+      "gender": "Male"
+    }, {
+      "id": 27,
+      "first_name": "Janie",
+      "last_name": "Grimstead",
+      "email": "jgrimsteadq@google.com",
+      "gender": "Female"
+    }, {
+      "id": 28,
+      "first_name": "Reynold",
+      "last_name": "Whitbread",
+      "email": "rwhitbreadr@eepurl.com",
+      "gender": "Male"
+    }, {
+      "id": 29,
+      "first_name": "Cassandre",
+      "last_name": "Crowden",
+      "email": "ccrowdens@google.de",
+      "gender": "Female"
+    }, {
+      "id": 30,
+      "first_name": "Jesse",
+      "last_name": "Mabon",
+      "email": "jmabont@over-blog.com",
+      "gender": "Male"
+    }, {
+      "id": 31,
+      "first_name": "Galvan",
+      "last_name": "De Banke",
+      "email": "gdebankeu@time.com",
+      "gender": "Male"
+    }, {
+      "id": 32,
+      "first_name": "Stavro",
+      "last_name": "Meaney",
+      "email": "smeaneyv@tinypic.com",
+      "gender": "Male"
+    }, {
+      "id": 33,
+      "first_name": "Nixie",
+      "last_name": "Tinghill",
+      "email": "ntinghillw@nbcnews.com",
+      "gender": "Female"
+    }, {
+      "id": 34,
+      "first_name": "Ronald",
+      "last_name": "Farrall",
+      "email": "rfarrallx@census.gov",
+      "gender": "Male"
+    }, {
+      "id": 35,
+      "first_name": "Findley",
+      "last_name": "Baudains",
+      "email": "fbaudainsy@wix.com",
+      "gender": "Male"
+    }, {
+      "id": 36,
+      "first_name": "Cathyleen",
+      "last_name": "Backen",
+      "email": "cbackenz@mozilla.org",
+      "gender": "Female"
+    }, {
+      "id": 37,
+      "first_name": "Ingrim",
+      "last_name": "Sandiford",
+      "email": "isandiford10@mapquest.com",
+      "gender": "Male"
+    }, {
+      "id": 38,
+      "first_name": "Everard",
+      "last_name": "De Blasiis",
+      "email": "edeblasiis11@oaic.gov.au",
+      "gender": "Male"
+    }, {
+      "id": 39,
+      "first_name": "Kennith",
+      "last_name": "Gilliard",
+      "email": "kgilliard12@bloglines.com",
+      "gender": "Male"
+    }, {
+      "id": 40,
+      "first_name": "Ryley",
+      "last_name": "Tours",
+      "email": "rtours13@youtube.com",
+      "gender": "Male"
+    }, {
+      "id": 41,
+      "first_name": "Tillie",
+      "last_name": "Jacmar",
+      "email": "tjacmar14@upenn.edu",
+      "gender": "Female"
+    }, {
+      "id": 42,
+      "first_name": "Kele",
+      "last_name": "Marchetti",
+      "email": "kmarchetti15@forbes.com",
+      "gender": "Male"
+    }, {
+      "id": 43,
+      "first_name": "Ainslie",
+      "last_name": "Emtage",
+      "email": "aemtage16@youtu.be",
+      "gender": "Female"
+    }, {
+      "id": 44,
+      "first_name": "Irving",
+      "last_name": "Skyrme",
+      "email": "iskyrme17@printfriendly.com",
+      "gender": "Male"
+    }, {
+      "id": 45,
+      "first_name": "Carma",
+      "last_name": "Guinan",
+      "email": "cguinan18@prlog.org",
+      "gender": "Female"
+    }, {
+      "id": 46,
+      "first_name": "Aurel",
+      "last_name": "Keady",
+      "email": "akeady19@bizjournals.com",
+      "gender": "Female"
+    }, {
+      "id": 47,
+      "first_name": "Obediah",
+      "last_name": "Peete",
+      "email": "opeete1a@jalbum.net",
+      "gender": "Male"
+    }, {
+      "id": 48,
+      "first_name": "Debbi",
+      "last_name": "Mc Gorley",
+      "email": "dmcgorley1b@dyndns.org",
+      "gender": "Female"
+    }, {
+      "id": 49,
+      "first_name": "Jennifer",
+      "last_name": "Boase",
+      "email": "jboase1c@toplist.cz",
+      "gender": "Female"
+    }, {
+      "id": 50,
+      "first_name": "Addie",
+      "last_name": "Garnson",
+      "email": "agarnson1d@house.gov",
+      "gender": "Male"
+    }, {
+      "id": 51,
+      "first_name": "Cara",
+      "last_name": "Mustin",
+      "email": "cmustin1e@google.com.br",
+      "gender": "Female"
+    }, {
+      "id": 52,
+      "first_name": "Michel",
+      "last_name": "Danslow",
+      "email": "mdanslow1f@nyu.edu",
+      "gender": "Male"
+    }, {
+      "id": 53,
+      "first_name": "Cart",
+      "last_name": "Innis",
+      "email": "cinnis1g@edublogs.org",
+      "gender": "Male"
+    }, {
+      "id": 54,
+      "first_name": "Ashli",
+      "last_name": "Ast",
+      "email": "aast1h@disqus.com",
+      "gender": "Female"
+    }, {
+      "id": 55,
+      "first_name": "Reginald",
+      "last_name": "Tubble",
+      "email": "rtubble1i@canalblog.com",
+      "gender": "Male"
+    }, {
+      "id": 56,
+      "first_name": "Kamila",
+      "last_name": "Rylatt",
+      "email": "krylatt1j@upenn.edu",
+      "gender": "Female"
+    }, {
+      "id": 57,
+      "first_name": "Janice",
+      "last_name": "Burtt",
+      "email": "jburtt1k@wordpress.com",
+      "gender": "Female"
+    }, {
+      "id": 58,
+      "first_name": "Augustina",
+      "last_name": "Lampel",
+      "email": "alampel1l@cyberchimps.com",
+      "gender": "Female"
+    }, {
+      "id": 59,
+      "first_name": "Chrysa",
+      "last_name": "Draxford",
+      "email": "cdraxford1m@alexa.com",
+      "gender": "Female"
+    }, {
+      "id": 60,
+      "first_name": "Patin",
+      "last_name": "Mathey",
+      "email": "pmathey1n@scientificamerican.com",
+      "gender": "Male"
+    }, {
+      "id": 61,
+      "first_name": "Bianca",
+      "last_name": "Filimore",
+      "email": "bfilimore1o@about.me",
+      "gender": "Female"
+    }, {
+      "id": 62,
+      "first_name": "Nickolaus",
+      "last_name": "Swarbrigg",
+      "email": "nswarbrigg1p@g.co",
+      "gender": "Male"
+    }, {
+      "id": 63,
+      "first_name": "Callida",
+      "last_name": "Skone",
+      "email": "cskone1q@canalblog.com",
+      "gender": "Female"
+    }, {
+      "id": 64,
+      "first_name": "Zaneta",
+      "last_name": "Hanscome",
+      "email": "zhanscome1r@earthlink.net",
+      "gender": "Female"
+    }, {
+      "id": 65,
+      "first_name": "Gail",
+      "last_name": "Noblett",
+      "email": "gnoblett1s@cbslocal.com",
+      "gender": "Male"
+    }, {
+      "id": 66,
+      "first_name": "Anneliese",
+      "last_name": "Holbie",
+      "email": "aholbie1t@typepad.com",
+      "gender": "Female"
+    }, {
+      "id": 67,
+      "first_name": "Winny",
+      "last_name": "Challicombe",
+      "email": "wchallicombe1u@tamu.edu",
+      "gender": "Male"
+    }, {
+      "id": 68,
+      "first_name": "Ada",
+      "last_name": "Constantine",
+      "email": "aconstantine1v@goo.ne.jp",
+      "gender": "Female"
+    }, {
+      "id": 69,
+      "first_name": "Faber",
+      "last_name": "Elgar",
+      "email": "felgar1w@edublogs.org",
+      "gender": "Male"
+    }, {
+      "id": 70,
+      "first_name": "Tiebold",
+      "last_name": "Salla",
+      "email": "tsalla1x@barnesandnoble.com",
+      "gender": "Male"
+    }, {
+      "id": 71,
+      "first_name": "Mirabella",
+      "last_name": "Pummery",
+      "email": "mpummery1y@cmu.edu",
+      "gender": "Female"
+    }, {
+      "id": 72,
+      "first_name": "Mayor",
+      "last_name": "Ayliff",
+      "email": "mayliff1z@feedburner.com",
+      "gender": "Male"
+    }, {
+      "id": 73,
+      "first_name": "Isiahi",
+      "last_name": "Rives",
+      "email": "irives20@deviantart.com",
+      "gender": "Male"
+    }, {
+      "id": 74,
+      "first_name": "Mariya",
+      "last_name": "Scardifeild",
+      "email": "mscardifeild21@fastcompany.com",
+      "gender": "Female"
+    }, {
+      "id": 75,
+      "first_name": "Cort",
+      "last_name": "Placido",
+      "email": "cplacido22@behance.net",
+      "gender": "Male"
+    }, {
+      "id": 76,
+      "first_name": "Bobbye",
+      "last_name": "Inglish",
+      "email": "binglish23@reddit.com",
+      "gender": "Female"
+    }, {
+      "id": 77,
+      "first_name": "Erroll",
+      "last_name": "Lescop",
+      "email": "elescop24@gmpg.org",
+      "gender": "Male"
+    }, {
+      "id": 78,
+      "first_name": "Nathalia",
+      "last_name": "Casewell",
+      "email": "ncasewell25@craigslist.org",
+      "gender": "Female"
+    }, {
+      "id": 79,
+      "first_name": "Lynsey",
+      "last_name": "Lakey",
+      "email": "llakey26@yellowbook.com",
+      "gender": "Female"
+    }, {
+      "id": 80,
+      "first_name": "Ricardo",
+      "last_name": "Keenan",
+      "email": "rkeenan27@time.com",
+      "gender": "Male"
+    }, {
+      "id": 81,
+      "first_name": "Vidovik",
+      "last_name": "Klimentov",
+      "email": "vklimentov28@skyrock.com",
+      "gender": "Male"
+    }, {
+      "id": 82,
+      "first_name": "Moreen",
+      "last_name": "Stammers",
+      "email": "mstammers29@networksolutions.com",
+      "gender": "Female"
+    }, {
+      "id": 83,
+      "first_name": "Fenelia",
+      "last_name": "Churches",
+      "email": "fchurches2a@zdnet.com",
+      "gender": "Female"
+    }, {
+      "id": 84,
+      "first_name": "Dolly",
+      "last_name": "Guiducci",
+      "email": "dguiducci2b@cnet.com",
+      "gender": "Female"
+    }, {
+      "id": 85,
+      "first_name": "Aretha",
+      "last_name": "Grotty",
+      "email": "agrotty2c@quantcast.com",
+      "gender": "Female"
+    }, {
+      "id": 86,
+      "first_name": "Koral",
+      "last_name": "Wyldbore",
+      "email": "kwyldbore2d@eepurl.com",
+      "gender": "Female"
+    }, {
+      "id": 87,
+      "first_name": "Bernetta",
+      "last_name": "Bayliss",
+      "email": "bbayliss2e@rediff.com",
+      "gender": "Female"
+    }, {
+      "id": 88,
+      "first_name": "Brew",
+      "last_name": "Bromige",
+      "email": "bbromige2f@webnode.com",
+      "gender": "Male"
+    }, {
+      "id": 89,
+      "first_name": "Elfie",
+      "last_name": "Beeton",
+      "email": "ebeeton2g@1688.com",
+      "gender": "Female"
+    }, {
+      "id": 90,
+      "first_name": "Micheline",
+      "last_name": "O'Scollain",
+      "email": "moscollain2h@yolasite.com",
+      "gender": "Female"
+    }, {
+      "id": 91,
+      "first_name": "Madalyn",
+      "last_name": "Zanettini",
+      "email": "mzanettini2i@youtube.com",
+      "gender": "Female"
+    }, {
+      "id": 92,
+      "first_name": "Babbette",
+      "last_name": "Hause",
+      "email": "bhause2j@vk.com",
+      "gender": "Female"
+    }, {
+      "id": 93,
+      "first_name": "Arlette",
+      "last_name": "Maybury",
+      "email": "amaybury2k@cocolog-nifty.com",
+      "gender": "Female"
+    }, {
+      "id": 94,
+      "first_name": "Twyla",
+      "last_name": "Yerlett",
+      "email": "tyerlett2l@unicef.org",
+      "gender": "Female"
+    }, {
+      "id": 95,
+      "first_name": "Dania",
+      "last_name": "Warren",
+      "email": "dwarren2m@histats.com",
+      "gender": "Female"
+    }, {
+      "id": 96,
+      "first_name": "Andrey",
+      "last_name": "Peet",
+      "email": "apeet2n@bizjournals.com",
+      "gender": "Male"
+    }, {
+      "id": 97,
+      "first_name": "Tyson",
+      "last_name": "Ledekker",
+      "email": "tledekker2o@histats.com",
+      "gender": "Male"
+    }, {
+      "id": 98,
+      "first_name": "Lynnell",
+      "last_name": "Senner",
+      "email": "lsenner2p@wunderground.com",
+      "gender": "Female"
+    }, {
+      "id": 99,
+      "first_name": "Ky",
+      "last_name": "Gealle",
+      "email": "kgealle2q@huffingtonpost.com",
+      "gender": "Male"
+    }, {
+      "id": 100,
+      "first_name": "Lillian",
+      "last_name": "Berndt",
+      "email": "lberndt2r@qq.com",
+      "gender": "Female"
+    }
+  ]
+}

playground/src/screens/ComplexLayout.js

@@ -115,6 +115,36 @@ class ComplexLayout extends Component {
                   }
                 }
               }
+            },
+            {
+              sideMenu: {
+                left: {
+                  component: {
+                    name: 'navigation.playground.SideMenuScreen',
+                    passProps: {
+                      side: 'left'
+                    }
+                  }
+                },
+                center: {
+                  stack: {
+                    children: [
+                      {
+                        component: {
+                          name: 'navigation.playground.FlatListScreen',
+                        }
+                      }
+                    ]
+                  }
+                },
+                options: {
+                  bottomTab: {
+                    text: 'FlatList',
+                    icon: require('../images/three.png'),
+                    testID: testIDs.THIRD_TAB_BAR_BUTTON,
+                  }
+                }
+              }
             }
            ]
         }

playground/src/screens/FlatListScreen.js

@@ -0,0 +1,129 @@
+const React = require('react');
+const { Component } = require('react');
+const { SafeAreaView, FlatList, View, Text } = require('react-native');
+const { Navigation } = require('react-native-navigation');
+const testIDs = require('../testIDs');
+
+const FakeListData = require('../assets/FakeListData');
+
+class FlatListScreen extends Component {
+  static options(passProps) {
+    return {
+      topBar: {
+        title: {
+          text: 'FlatList with fake data',
+        },
+        searchBar: true, // iOS 11+ native UISearchBar inside topBar
+        searchBarHiddenWhenScrolling: true,
+        searchBarPlaceholder: 'Search', // iOS 11+ SearchBar placeholder
+        largeTitle: {
+          visible: true,
+          fontSize: 30,
+          color: 'white',
+          fontFamily: 'Helvetica',
+        },
+        leftButtons: [
+          {
+            id: 'sideMenu',
+            color: 'red',
+            icon: require('../images/two.png'),
+          }
+        ],
+        rightButtons: [
+          {
+            id: 'toggle',
+            color: 'red',
+            icon: require('../images/one.png'),
+          },
+        ],
+      },
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    Navigation.events().bindComponent(this);
+    this.state = { isFetching: false, shouldHideOnScroll: false };
+  }
+
+  navigationButtonPressed({ buttonId }) {
+    switch (buttonId) {
+
+      case 'sideMenu':
+        Navigation.mergeOptions(this.props.componentId, {
+          sideMenu: {
+            left: {
+              visible: true,
+            },
+          },
+        });
+        break;
+
+      case 'toggle':
+        const { shouldHideOnScroll } = this.state;
+        Navigation.mergeOptions(this.props.componentId, {
+          topBar: {
+            hideOnScroll: !shouldHideOnScroll,
+            drawBehind: !shouldHideOnScroll,
+          }
+        });
+        this.setState({
+          shouldHideOnScroll: !shouldHideOnScroll
+        });
+        alert(`hideOnScroll/drawBehind is now ${!shouldHideOnScroll}`);
+        break;
+
+      default:
+        break;
+
+    }
+  }
+
+  onRefresh = () => {
+    this.setState({ isFetching: true }, () => {
+      setTimeout(() => {
+        this.setState({ isFetching: false });
+      }, 2000);
+    });
+  }
+
+  seperatorComponent = () => <View style={styles.seperatorComponent} />;
+
+  keyExtractor = item => item.id;
+
+  renderItem = ({ item }) => (
+    <View style={styles.listItem}>
+      <Text>{item.first_name} {item.last_name}</Text>
+      <Text>{item.email}</Text>
+    </View>
+  )
+
+  render() {
+    return (
+      <SafeAreaView style={styles.root}>
+        <FlatList
+          data={FakeListData.data}
+          keyExtractor={this.keyExtractor}
+          onRefresh={this.onRefresh}
+          ItemSeparatorComponent={this.seperatorComponent}
+          refreshing={this.state.isFetching}
+          renderItem={this.renderItem}
+        />
+      </SafeAreaView>
+    );
+  }
+}
+module.exports = FlatListScreen;
+const styles = {
+  root: {
+    flex: 1,
+    backgroundColor: 'whitesmoke'
+  },
+  listItem: {
+    height: 50,
+  },
+  seperatorComponent: {
+    height: 5,
+    backgroundColor: 'black',
+  }
+};

playground/src/screens/index.js

@@ -26,6 +26,7 @@ const ComplexLayout = require('./ComplexLayout');
 const SearchScreen = require('./SearchScreen');
 const KeyboardScreen = require('./KeyboardScreen');
 const BottomTabSideMenuScreen = require('./complexlayouts/BottomTabSideMenuScreen');
+const FlatListScreen = require('./FlatListScreen');
 
 function registerScreens() {
   Navigation.registerComponent(`navigation.playground.CustomTransitionDestination`, () => CustomTransitionDestination);
@@ -55,6 +56,7 @@ function registerScreens() {
   Navigation.registerComponent('navigation.playground.SearchControllerScreen', () => SearchScreen);
   Navigation.registerComponent('navigation.playground.KeyboardScreen', () => KeyboardScreen);
   Navigation.registerComponent('complexLayout.bottomTabThatOpensSideMenu', () => BottomTabSideMenuScreen);
+  Navigation.registerComponent('navigation.playground.FlatListScreen', () => FlatListScreen);
 }
 
 module.exports = {

playground/src/testIDs.js

@@ -55,6 +55,7 @@ module.exports = {
   SHOW_BOTTOM_TABS_BUTTON: `SHOW_BOTTOM_TABS_BUTTON`,
   FIRST_TAB_BAR_BUTTON: `FIRST_TAB_BAR_BUTTON`,
   SECOND_TAB_BAR_BUTTON: `SECOND_TAB_BAR_BUTTON`,
+  THIRD_TAB_BAR_BUTTON: `THIRD_TAB_BAR_BUTTON`,
   SHOW_OVERLAY_BUTTON: `SHOW_OVERLAY_BUTTON`,
   SHOW_TOUCH_THROUGH_OVERLAY_BUTTON: `SHOW_TOUCH_THROUGH_OVERLAY_BUTTON`,
   OK_BUTTON: `OK_BUTTON`,