chore: bump to react-native@0.61 in examples (#8884)

babel.config.js

@@ -7,6 +7,8 @@
 
 module.exports = {
   babelrcRoots: ['examples/*'],
+  // we don't wanna run the transforms in this file over react native
+  exclude: /react-native/,
   overrides: [
     {
       plugins: [

examples/react-native/.babelrc.js

@@ -1,5 +1,5 @@
 // Copyright (c) 2014-present, Facebook, Inc. All rights reserved.
 
 module.exports = {
-  presets: ['@babel/preset-env', 'module:metro-react-native-babel-preset'],
+  presets: ['module:metro-react-native-babel-preset'],
 };

examples/react-native/Intro.js

@@ -3,7 +3,6 @@
 /**
  * Sample React Native App
  * https://github.com/facebook/react-native
- * @flow
  */
 
 import React, {Component} from 'react';
@@ -28,7 +27,7 @@ const styles = StyleSheet.create({
   },
 });
 
-export default class Intro extends Component<{}> {
+export default class Intro extends Component {
   render() {
     return (
       <View style={styles.container}>

examples/react-native/__tests__/__snapshots__/intro.test.js.snap

@@ -45,6 +45,67 @@ exports[`renders the ActivityIndicator component 1`] = `
 />
 `;
 
+exports[`renders the FlatList component 1`] = `
+<RCTScrollView
+  data={
+    Array [
+      "apple",
+      "banana",
+      "kiwi",
+    ]
+  }
+  disableVirtualization={false}
+  getItem={[Function]}
+  getItemCount={[Function]}
+  horizontal={false}
+  initialNumToRender={10}
+  keyExtractor={[Function]}
+  maxToRenderPerBatch={10}
+  numColumns={1}
+  onContentSizeChange={[Function]}
+  onEndReachedThreshold={2}
+  onLayout={[Function]}
+  onMomentumScrollEnd={[Function]}
+  onScroll={[Function]}
+  onScrollBeginDrag={[Function]}
+  onScrollEndDrag={[Function]}
+  removeClippedSubviews={false}
+  renderItem={[Function]}
+  scrollEventThrottle={50}
+  stickyHeaderIndices={Array []}
+  updateCellsBatchingPeriod={50}
+  viewabilityConfigCallbackPairs={Array []}
+  windowSize={21}
+>
+  <View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    >
+      <Text>
+        apple
+      </Text>
+    </View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    >
+      <Text>
+        banana
+      </Text>
+    </View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    >
+      <Text>
+        kiwi
+      </Text>
+    </View>
+  </View>
+</RCTScrollView>
+`;
+
 exports[`renders the Image component 1`] = `
 <Image
   style={
@@ -56,34 +117,11 @@ exports[`renders the Image component 1`] = `
 />
 `;
 
-exports[`renders the ListView component 1`] = `
-<RCTScrollView
-  dataSource={
-    ListViewDataSource {
-      "items": 3,
-    }
-  }
-  renderRow={[Function]}
-  renderScrollComponent={[Function]}
->
-  <View>
-    <Text>
-      apple
-    </Text>
-    <Text>
-      banana
-    </Text>
-    <Text>
-      kiwi
-    </Text>
-  </View>
-</RCTScrollView>
-`;
-
 exports[`renders the TextInput component 1`] = `
 <TextInput
   allowFontScaling={true}
   autoCorrect={false}
+  rejectResponderTermination={true}
   underlineColorAndroid="transparent"
   value="apple banana kiwi"
 />

examples/react-native/__tests__/intro.test.js

@@ -4,14 +4,16 @@
  * Sample React Native Snapshot Test
  */
 
-'use strict';
-
-import 'react-native';
 import React from 'react';
-import Intro from '../Intro';
-
-// Note: test renderer must be required after react-native.
+import {
+  ActivityIndicator,
+  FlatList,
+  Image,
+  Text,
+  TextInput,
+} from 'react-native';
 import renderer from 'react-test-renderer';
+import Intro from '../Intro';
 
 jest.setTimeout(15000);
 
@@ -22,15 +24,13 @@ it('renders correctly', () => {
 
 // These serve as integration tests for the jest-react-native preset.
 it('renders the ActivityIndicator component', () => {
-  const ActivityIndicator = require('ActivityIndicator');
   const tree = renderer
     .create(<ActivityIndicator animating={true} size="small" />)
     .toJSON();
   expect(tree).toMatchSnapshot();
 });
 
 it('renders the Image component', done => {
-  const Image = require('Image');
   Image.getSize('path.jpg', (width, height) => {
     const tree = renderer.create(<Image style={{height, width}} />).toJSON();
     expect(tree).toMatchSnapshot();
@@ -39,24 +39,19 @@ it('renders the Image component', done => {
 });
 
 it('renders the TextInput component', () => {
-  const TextInput = require('TextInput');
   const tree = renderer
     .create(<TextInput autoCorrect={false} value="apple banana kiwi" />)
     .toJSON();
   expect(tree).toMatchSnapshot();
 });
 
-it('renders the ListView component', () => {
-  const ListView = require('ListView');
-  const Text = require('Text');
-  const dataSource = new ListView.DataSource({
-    rowHasChanged: (r1, r2) => r1 !== r2,
-  }).cloneWithRows(['apple', 'banana', 'kiwi']);
+it('renders the FlatList component', () => {
   const tree = renderer
     .create(
-      <ListView
-        dataSource={dataSource}
-        renderRow={rowData => <Text>{rowData}</Text>}
+      <FlatList
+        data={['apple', 'banana', 'kiwi']}
+        keyExtractor={item => item}
+        renderItem={({item}) => <Text>{item}</Text>}
       />
     )
     .toJSON();