diff --git a/RNTester/e2e/__tests__/Button-test.js b/RNTester/e2e/__tests__/Button-test.js
index 5a4bf7fd9f4a..3ac9b7e65e9e 100644
--- a/RNTester/e2e/__tests__/Button-test.js
+++ b/RNTester/e2e/__tests__/Button-test.js
@@ -25,18 +25,27 @@ describe('Button', () => {
   });
 
   it('Simple button should be tappable', async () => {
+    await element(by.id('explorer_example_search')).replaceText(
+      'Simple Button',
+    );
     await element(by.id('simple_button')).tap();
     await expect(element(by.text('Simple has been pressed!'))).toBeVisible();
     await element(by.text('OK')).tap();
   });
 
   it('Adjusted color button should be tappable', async () => {
+    await element(by.id('explorer_example_search')).replaceText(
+      'Adjusted color',
+    );
     await element(by.id('purple_button')).tap();
     await expect(element(by.text('Purple has been pressed!'))).toBeVisible();
     await element(by.text('OK')).tap();
   });
 
   it("Two buttons with JustifyContent:'space-between' should be tappable", async () => {
+    await element(by.id('explorer_example_search')).replaceText(
+      'Fit to text layout',
+    );
     await element(by.id('left_button')).tap();
     await expect(element(by.text('Left has been pressed!'))).toBeVisible();
     await element(by.text('OK')).tap();
@@ -47,6 +56,9 @@ describe('Button', () => {
   });
 
   it('Disabled button should not interact', async () => {
+    await element(by.id('explorer_example_search')).replaceText(
+      'Disabled Button',
+    );
     await element(by.id('disabled_button')).tap();
     await expect(
       element(by.text('Disabled has been pressed!')),
diff --git a/RNTester/e2e/__tests__/DatePickerIOS-test.js b/RNTester/e2e/__tests__/DatePickerIOS-test.js
index 0947e00c0a09..5752132e4cf3 100644
--- a/RNTester/e2e/__tests__/DatePickerIOS-test.js
+++ b/RNTester/e2e/__tests__/DatePickerIOS-test.js
@@ -25,6 +25,9 @@ describe('DatePickerIOS', () => {
   });
 
   it('Should change indicator with datetime picker', async () => {
+    await element(by.id('explorer_example_search')).replaceText(
+      'Date and time picker',
+    );
     const testID = 'date-and-time';
     const indicatorID = 'date-and-time-indicator';
 
@@ -45,6 +48,7 @@ describe('DatePickerIOS', () => {
   });
 
   it('Should change indicator with date-only picker', async () => {
+    await element(by.id('explorer_example_search')).replaceText('Date only');
     const testID = 'date-only';
     const indicatorID = 'date-and-time-indicator';
 
diff --git a/RNTester/e2e/__tests__/Picker-test.js b/RNTester/e2e/__tests__/Picker-test.js
index 37a97ae49498..cf2bcb1ffeae 100644
--- a/RNTester/e2e/__tests__/Picker-test.js
+++ b/RNTester/e2e/__tests__/Picker-test.js
@@ -25,6 +25,7 @@ describe('Picker', () => {
   });
 
   it('should be selectable by ID', async () => {
+    await element(by.id('explorer_example_search')).replaceText('Basic picker');
     await expect(element(by.id('basic-picker'))).toBeVisible();
   });
 });
diff --git a/RNTester/e2e/__tests__/Switch-test.js b/RNTester/e2e/__tests__/Switch-test.js
index c1d819d3023b..5af87cfe5995 100644
--- a/RNTester/e2e/__tests__/Switch-test.js
+++ b/RNTester/e2e/__tests__/Switch-test.js
@@ -19,63 +19,79 @@ describe('Switch', () => {
     await element(by.label('<Switch> Native boolean input')).tap();
   });
 
-  it('Switch that starts off should switch', async () => {
-    const testID = 'on-off-initial-off';
-    const indicatorID = 'on-off-initial-off-indicator';
+  describe('Switches can be set to true or false', () => {
+    beforeEach(async () => {
+      await element(by.id('explorer_example_search')).replaceText(
+        'Switches can be set to true or false',
+      );
+    });
 
-    await expect(element(by.id(testID))).toHaveValue('0');
-    await expect(element(by.id(indicatorID))).toHaveText('Off');
-    await element(by.id(testID)).tap();
-    await expect(element(by.id(testID))).toHaveValue('1');
-    await expect(element(by.id(indicatorID))).toHaveText('On');
-  });
+    it('Switch that starts off should switch', async () => {
+      const testID = 'on-off-initial-off';
+      const indicatorID = 'on-off-initial-off-indicator';
 
-  it('Switch that starts on should switch', async () => {
-    const testID = 'on-off-initial-on';
-    const indicatorID = 'on-off-initial-on-indicator';
+      await expect(element(by.id(testID))).toHaveValue('0');
+      await expect(element(by.id(indicatorID))).toHaveText('Off');
+      await element(by.id(testID)).tap();
+      await expect(element(by.id(testID))).toHaveValue('1');
+      await expect(element(by.id(indicatorID))).toHaveText('On');
+    });
 
-    await expect(element(by.id(testID))).toHaveValue('1');
-    await expect(element(by.id(indicatorID))).toHaveText('On');
-    await element(by.id(testID)).tap();
-    await expect(element(by.id(testID))).toHaveValue('0');
-    await expect(element(by.id(indicatorID))).toHaveText('Off');
+    it('Switch that starts on should switch', async () => {
+      const testID = 'on-off-initial-on';
+      const indicatorID = 'on-off-initial-on-indicator';
+
+      await expect(element(by.id(testID))).toHaveValue('1');
+      await expect(element(by.id(indicatorID))).toHaveText('On');
+      await element(by.id(testID)).tap();
+      await expect(element(by.id(testID))).toHaveValue('0');
+      await expect(element(by.id(indicatorID))).toHaveText('Off');
+    });
   });
 
-  it('disabled switch should not toggle', async () => {
-    const onTestID = 'disabled-initial-on';
-    const offTestID = 'disabled-initial-off';
-    const onIndicatorID = 'disabled-initial-on-indicator';
-    const offIndicatorID = 'disabled-initial-off-indicator';
+  describe('Switches can be disabled', () => {
+    beforeEach(async () => {
+      await element(by.id('explorer_example_search')).replaceText(
+        'Switches can be disabled',
+      );
+    });
 
-    await expect(element(by.id(onTestID))).toHaveValue('1');
-    await expect(element(by.id(onIndicatorID))).toHaveText('On');
+    it('disabled switch should not toggle', async () => {
+      const onTestID = 'disabled-initial-on';
+      const offTestID = 'disabled-initial-off';
+      const onIndicatorID = 'disabled-initial-on-indicator';
+      const offIndicatorID = 'disabled-initial-off-indicator';
 
-    try {
-      await element(by.id(onTestID)).tap();
-      throw new Error('Does not match');
-    } catch (err) {
-      jestExpect(err.message.message).toEqual(
-        jestExpect.stringContaining(
-          'Cannot perform action due to constraint(s) failure',
-        ),
-      );
-    }
-    await expect(element(by.id(onTestID))).toHaveValue('1');
-    await expect(element(by.id(onIndicatorID))).toHaveText('On');
+      await expect(element(by.id(onTestID))).toHaveValue('1');
+      await expect(element(by.id(onIndicatorID))).toHaveText('On');
 
-    await expect(element(by.id(offTestID))).toHaveValue('0');
-    await expect(element(by.id(offIndicatorID))).toHaveText('Off');
-    try {
-      await element(by.id(offTestID)).tap();
-      throw new Error('Does not match');
-    } catch (err) {
-      jestExpect(err.message.message).toEqual(
-        jestExpect.stringContaining(
-          'Cannot perform action due to constraint(s) failure',
-        ),
-      );
-    }
-    await expect(element(by.id(offTestID))).toHaveValue('0');
-    await expect(element(by.id(offIndicatorID))).toHaveText('Off');
+      try {
+        await element(by.id(onTestID)).tap();
+        throw new Error('Does not match');
+      } catch (err) {
+        jestExpect(err.message.message).toEqual(
+          jestExpect.stringContaining(
+            'Cannot perform action due to constraint(s) failure',
+          ),
+        );
+      }
+      await expect(element(by.id(onTestID))).toHaveValue('1');
+      await expect(element(by.id(onIndicatorID))).toHaveText('On');
+
+      await expect(element(by.id(offTestID))).toHaveValue('0');
+      await expect(element(by.id(offIndicatorID))).toHaveText('Off');
+      try {
+        await element(by.id(offTestID)).tap();
+        throw new Error('Does not match');
+      } catch (err) {
+        jestExpect(err.message.message).toEqual(
+          jestExpect.stringContaining(
+            'Cannot perform action due to constraint(s) failure',
+          ),
+        );
+      }
+      await expect(element(by.id(offTestID))).toHaveValue('0');
+      await expect(element(by.id(offIndicatorID))).toHaveText('Off');
+    });
   });
 });
diff --git a/RNTester/e2e/__tests__/Touchable-test.js b/RNTester/e2e/__tests__/Touchable-test.js
index 6ac25fdeca73..645fa80f1823 100644
--- a/RNTester/e2e/__tests__/Touchable-test.js
+++ b/RNTester/e2e/__tests__/Touchable-test.js
@@ -24,6 +24,9 @@ describe('Touchable', () => {
   });
 
   it('Touchable Highlight should be tappable', async () => {
+    await element(by.id('explorer_example_search')).replaceText(
+      '<TouchableHighlight>',
+    );
     const buttonID = 'touchable_highlight_image_button';
     const button2ID = 'touchable_highlight_text_button';
     const consoleID = 'touchable_highlight_console';
@@ -45,6 +48,9 @@ describe('Touchable', () => {
   });
 
   it('Touchable Without Feedback should be tappable', async () => {
+    await element(by.id('explorer_example_search')).replaceText(
+      '<TouchableWithoutFeedback>',
+    );
     const buttonID = 'touchable_without_feedback_button';
     const consoleID = 'touchable_without_feedback_console';
 
@@ -60,6 +66,9 @@ describe('Touchable', () => {
   });
 
   it('Text should be tappable', async () => {
+    await element(by.id('explorer_example_search')).replaceText(
+      '<Text onPress={fn}> with highlight',
+    );
     const buttonID = 'tappable_text';
     const consoleID = 'tappable_text_console';
 
diff --git a/RNTester/js/ActivityIndicatorExample.js b/RNTester/js/ActivityIndicatorExample.js
index 937b368a443b..1da6d686d884 100644
--- a/RNTester/js/ActivityIndicatorExample.js
+++ b/RNTester/js/ActivityIndicatorExample.js
@@ -67,6 +67,22 @@ class ToggleAnimatingActivityIndicator extends Component<
   }
 }
 
+const styles = StyleSheet.create({
+  centering: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 8,
+  },
+  gray: {
+    backgroundColor: '#cccccc',
+  },
+  horizontal: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    padding: 8,
+  },
+});
+
 exports.displayName = (undefined: ?string);
 exports.framework = 'React';
 exports.title = '<ActivityIndicator>';
@@ -158,19 +174,3 @@ exports.examples = [
     },
   },
 ];
-
-const styles = StyleSheet.create({
-  centering: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 8,
-  },
-  gray: {
-    backgroundColor: '#cccccc',
-  },
-  horizontal: {
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    padding: 8,
-  },
-});
diff --git a/RNTester/js/AlertIOSExample.js b/RNTester/js/AlertIOSExample.js
index 16868ce504a1..a33c06f5ee9d 100644
--- a/RNTester/js/AlertIOSExample.js
+++ b/RNTester/js/AlertIOSExample.js
@@ -16,58 +16,6 @@ const {StyleSheet, View, Text, TouchableHighlight, AlertIOS} = ReactNative;
 
 const {SimpleAlertExampleBlock} = require('./AlertExample');
 
-exports.framework = 'React';
-exports.title = 'AlertIOS';
-exports.description = 'iOS alerts and action sheets';
-exports.examples = [
-  {
-    title: 'Alerts',
-    render() {
-      return <SimpleAlertExampleBlock />;
-    },
-  },
-  {
-    title: 'Prompt Options',
-    render(): React.Element<any> {
-      return <PromptOptions />;
-    },
-  },
-  {
-    title: 'Prompt Types',
-    render() {
-      return (
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => AlertIOS.prompt('Plain Text Entry')}>
-            <View style={styles.button}>
-              <Text>plain-text</Text>
-            </View>
-          </TouchableHighlight>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() =>
-              AlertIOS.prompt('Secure Text', null, null, 'secure-text')
-            }>
-            <View style={styles.button}>
-              <Text>secure-text</Text>
-            </View>
-          </TouchableHighlight>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() =>
-              AlertIOS.prompt('Login & Password', null, null, 'login-password')
-            }>
-            <View style={styles.button}>
-              <Text>login-password</Text>
-            </View>
-          </TouchableHighlight>
-        </View>
-      );
-    },
-  },
-];
-
 class PromptOptions extends React.Component<$FlowFixMeProps, any> {
   customButtons: Array<Object>;
 
@@ -196,3 +144,55 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
   },
 });
+
+exports.framework = 'React';
+exports.title = 'AlertIOS';
+exports.description = 'iOS alerts and action sheets';
+exports.examples = [
+  {
+    title: 'Alerts',
+    render() {
+      return <SimpleAlertExampleBlock />;
+    },
+  },
+  {
+    title: 'Prompt Options',
+    render(): React.Element<any> {
+      return <PromptOptions />;
+    },
+  },
+  {
+    title: 'Prompt Types',
+    render() {
+      return (
+        <View>
+          <TouchableHighlight
+            style={styles.wrapper}
+            onPress={() => AlertIOS.prompt('Plain Text Entry')}>
+            <View style={styles.button}>
+              <Text>plain-text</Text>
+            </View>
+          </TouchableHighlight>
+          <TouchableHighlight
+            style={styles.wrapper}
+            onPress={() =>
+              AlertIOS.prompt('Secure Text', null, null, 'secure-text')
+            }>
+            <View style={styles.button}>
+              <Text>secure-text</Text>
+            </View>
+          </TouchableHighlight>
+          <TouchableHighlight
+            style={styles.wrapper}
+            onPress={() =>
+              AlertIOS.prompt('Login & Password', null, null, 'login-password')
+            }>
+            <View style={styles.button}>
+              <Text>login-password</Text>
+            </View>
+          </TouchableHighlight>
+        </View>
+      );
+    },
+  },
+];
diff --git a/RNTester/js/AnimatedExample.js b/RNTester/js/AnimatedExample.js
index 1802d03a2719..7e26c9f9fa57 100644
--- a/RNTester/js/AnimatedExample.js
+++ b/RNTester/js/AnimatedExample.js
@@ -15,6 +15,22 @@ const ReactNative = require('react-native');
 const {Animated, Easing, StyleSheet, Text, View} = ReactNative;
 const RNTesterButton = require('./RNTesterButton');
 
+const styles = StyleSheet.create({
+  content: {
+    backgroundColor: 'deepskyblue',
+    borderWidth: 1,
+    borderColor: 'dodgerblue',
+    padding: 20,
+    margin: 20,
+    borderRadius: 10,
+    alignItems: 'center',
+  },
+  rotatingImage: {
+    width: 70,
+    height: 70,
+  },
+});
+
 exports.framework = 'React';
 exports.title = 'Animated - Examples';
 exports.description =
@@ -287,19 +303,3 @@ exports.examples = [
     render: () => <Text>Checkout the Gratuitous Animation App!</Text>,
   },
 ];
-
-const styles = StyleSheet.create({
-  content: {
-    backgroundColor: 'deepskyblue',
-    borderWidth: 1,
-    borderColor: 'dodgerblue',
-    padding: 20,
-    margin: 20,
-    borderRadius: 10,
-    alignItems: 'center',
-  },
-  rotatingImage: {
-    width: 70,
-    height: 70,
-  },
-});
diff --git a/RNTester/js/AnimatedGratuitousApp/AnExApp.js b/RNTester/js/AnimatedGratuitousApp/AnExApp.js
index f9aa375a7d96..be1142bd4544 100644
--- a/RNTester/js/AnimatedGratuitousApp/AnExApp.js
+++ b/RNTester/js/AnimatedGratuitousApp/AnExApp.js
@@ -195,11 +195,6 @@ class Circle extends React.Component<any, any> {
 }
 
 class AnExApp extends React.Component<any, any> {
-  static title = 'Animated - Gratuitous App';
-  static description =
-    'Bunch of Animations - tap a circle to ' +
-    'open a view with more animations, or longPress and drag to reorder circles.';
-
   _onMove: (position: Point) => void;
   constructor(props: any): void {
     super(props);
@@ -365,4 +360,14 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = AnExApp;
+exports.title = 'Animated - Gratuitous App';
+exports.description =
+  'Bunch of Animations - tap a circle to open a view with more animations, or longPress and drag to reorder circles.';
+exports.examples = [
+  {
+    title: 'And example app',
+    render(): React.Element<typeof AnExApp> {
+      return <AnExApp />;
+    },
+  },
+];
diff --git a/RNTester/js/ButtonExample.js b/RNTester/js/ButtonExample.js
index ccabd4ae7862..cdea028cf226 100644
--- a/RNTester/js/ButtonExample.js
+++ b/RNTester/js/ButtonExample.js
@@ -18,6 +18,13 @@ function onButtonPress(buttonName) {
   Alert.alert(`${buttonName} has been pressed!`);
 }
 
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+});
+
 exports.displayName = 'ButtonExample';
 exports.framework = 'React';
 exports.title = '<Button>';
@@ -99,10 +106,3 @@ exports.examples = [
     },
   },
 ];
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-});
diff --git a/RNTester/js/CameraRollExample.js b/RNTester/js/CameraRollExample.js
index 468bd8e70536..91ffcdcc3520 100644
--- a/RNTester/js/CameraRollExample.js
+++ b/RNTester/js/CameraRollExample.js
@@ -153,7 +153,7 @@ exports.description =
 exports.examples = [
   {
     title: 'Photos',
-    render(): React.Node {
+    render(): React.Element<typeof CameraRollExample> {
       return <CameraRollExample />;
     },
   },
diff --git a/RNTester/js/CheckBoxExample.js b/RNTester/js/CheckBoxExample.js
index 1b16231ef333..fc39d265126f 100644
--- a/RNTester/js/CheckBoxExample.js
+++ b/RNTester/js/CheckBoxExample.js
@@ -92,7 +92,20 @@ class EventCheckBoxExample extends React.Component<{}, $FlowFixMeState> {
   }
 }
 
-let examples = [
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+  checkbox: {
+    marginBottom: 10,
+  },
+});
+
+exports.title = '<CheckBox>';
+exports.displayName = 'CheckBoxExample';
+exports.description = 'Native boolean input';
+exports.examples = [
   {
     title: 'CheckBoxes can be set to true or false',
     render(): React.Element<any> {
@@ -118,18 +131,3 @@ let examples = [
     },
   },
 ];
-
-exports.title = '<CheckBox>';
-exports.displayName = 'CheckBoxExample';
-exports.description = 'Native boolean input';
-exports.examples = examples;
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-  },
-  checkbox: {
-    marginBottom: 10,
-  },
-});
diff --git a/RNTester/js/ClipboardExample.js b/RNTester/js/ClipboardExample.js
index adc6f40a1dbb..d30f0792608c 100644
--- a/RNTester/js/ClipboardExample.js
+++ b/RNTester/js/ClipboardExample.js
@@ -41,6 +41,16 @@ class ClipboardExample extends React.Component<{}, $FlowFixMeState> {
   }
 }
 
+const styles = StyleSheet.create({
+  label: {
+    color: 'blue',
+  },
+  content: {
+    color: 'red',
+    marginTop: 20,
+  },
+});
+
 exports.title = 'Clipboard';
 exports.description = 'Show Clipboard contents.';
 exports.examples = [
@@ -51,13 +61,3 @@ exports.examples = [
     },
   },
 ];
-
-const styles = StyleSheet.create({
-  label: {
-    color: 'blue',
-  },
-  content: {
-    color: 'red',
-    marginTop: 20,
-  },
-});
diff --git a/RNTester/js/DatePickerAndroidExample.js b/RNTester/js/DatePickerAndroidExample.js
index 8e50de025950..de27a3a10499 100644
--- a/RNTester/js/DatePickerAndroidExample.js
+++ b/RNTester/js/DatePickerAndroidExample.js
@@ -22,9 +22,6 @@ const RNTesterBlock = require('./RNTesterBlock');
 const RNTesterPage = require('./RNTesterPage');
 
 class DatePickerAndroidExample extends React.Component {
-  static title = 'DatePickerAndroid';
-  static description = 'Standard Android date picker dialog';
-
   state = {
     presetDate: new Date(2020, 4, 5),
     simpleDate: new Date(2020, 4, 5),
@@ -144,4 +141,13 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = DatePickerAndroidExample;
+exports.title = 'DatePickerAndroid';
+exports.description = 'Standard Android date picker dialog';
+exports.examples = [
+  {
+    title: 'Simple date picker',
+    render: function(): React.Element<typeof DatePickerAndroidExample> {
+      return <DatePickerAndroidExample />;
+    },
+  },
+];
diff --git a/RNTester/js/DatePickerIOSExample.js b/RNTester/js/DatePickerIOSExample.js
index 5d4ad687150a..90291b4e7685 100644
--- a/RNTester/js/DatePickerIOSExample.js
+++ b/RNTester/js/DatePickerIOSExample.js
@@ -14,20 +14,15 @@ const React = require('react');
 const ReactNative = require('react-native');
 const {DatePickerIOS, StyleSheet, Text, TextInput, View} = ReactNative;
 
-class DatePickerExample extends React.Component<
+class WithDatePickerData extends React.Component<
   $FlowFixMeProps,
   $FlowFixMeState,
 > {
-  static defaultProps = {
+  state = {
     date: new Date(),
     timeZoneOffsetInHours: (-1 * new Date().getTimezoneOffset()) / 60,
   };
 
-  state = {
-    date: this.props.date,
-    timeZoneOffsetInHours: this.props.timeZoneOffsetInHours,
-  };
-
   onDateChange = date => {
     this.setState({date: date});
   };
@@ -63,31 +58,7 @@ class DatePickerExample extends React.Component<
           />
           <Text> hours from UTC</Text>
         </WithLabel>
-        <Heading label="Date + time picker" />
-        <DatePickerIOS
-          testID="date-and-time"
-          date={this.state.date}
-          mode="datetime"
-          timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
-          onDateChange={this.onDateChange}
-        />
-        <Heading label="Date picker" />
-        <DatePickerIOS
-          testID="date-only"
-          date={this.state.date}
-          mode="date"
-          timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
-          onDateChange={this.onDateChange}
-        />
-        <Heading label="Time picker, 10-minute interval" />
-        <DatePickerIOS
-          testID="time-only"
-          date={this.state.date}
-          mode="time"
-          timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
-          onDateChange={this.onDateChange}
-          minuteInterval={10}
-        />
+        {this.props.children(this.state, this.onDateChange)}
       </View>
     );
   }
@@ -106,28 +77,6 @@ class WithLabel extends React.Component<$FlowFixMeProps> {
   }
 }
 
-class Heading extends React.Component<$FlowFixMeProps> {
-  render() {
-    return (
-      <View style={styles.headingContainer}>
-        <Text style={styles.heading}>{this.props.label}</Text>
-      </View>
-    );
-  }
-}
-
-exports.displayName = (undefined: ?string);
-exports.title = '<DatePickerIOS>';
-exports.description = 'Select dates and times using the native UIDatePicker.';
-exports.examples = [
-  {
-    title: '<DatePickerIOS>',
-    render: function(): React.Element<any> {
-      return <DatePickerExample />;
-    },
-  },
-];
-
 const styles = StyleSheet.create({
   textinput: {
     height: 26,
@@ -149,12 +98,63 @@ const styles = StyleSheet.create({
   label: {
     fontWeight: '500',
   },
-  headingContainer: {
-    padding: 4,
-    backgroundColor: '#f6f7f8',
+});
+
+exports.title = '<DatePickerIOS>';
+exports.description = 'Select dates and times using the native UIDatePicker.';
+exports.examples = [
+  {
+    title: 'Date and time picker',
+    render: function(): React.Element<any> {
+      return (
+        <WithDatePickerData>
+          {(state, onDateChange) => (
+            <DatePickerIOS
+              testID="date-and-time"
+              date={state.date}
+              mode="datetime"
+              timeZoneOffsetInMinutes={state.timeZoneOffsetInHours * 60}
+              onDateChange={onDateChange}
+            />
+          )}
+        </WithDatePickerData>
+      );
+    },
   },
-  heading: {
-    fontWeight: '500',
-    fontSize: 14,
+  {
+    title: 'Date only picker',
+    render: function(): React.Element<any> {
+      return (
+        <WithDatePickerData>
+          {(state, onDateChange) => (
+            <DatePickerIOS
+              testID="date-only"
+              date={state.date}
+              mode="date"
+              timeZoneOffsetInMinutes={state.timeZoneOffsetInHours * 60}
+              onDateChange={onDateChange}
+            />
+          )}
+        </WithDatePickerData>
+      );
+    },
   },
-});
+  {
+    title: 'Time only picker, 10-minute interval',
+    render: function(): React.Element<any> {
+      return (
+        <WithDatePickerData>
+          {(state, onDateChange) => (
+            <DatePickerIOS
+              testID="time-only"
+              date={state.date}
+              mode="time"
+              timeZoneOffsetInMinutes={state.timeZoneOffsetInHours * 60}
+              onDateChange={onDateChange}
+            />
+          )}
+        </WithDatePickerData>
+      );
+    },
+  },
+];
diff --git a/RNTester/js/ExampleTypes.js b/RNTester/js/ExampleTypes.js
deleted file mode 100644
index aa5c84ebca73..000000000000
--- a/RNTester/js/ExampleTypes.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- * @flow
- */
-
-'use strict';
-
-import type React from 'react';
-
-export type Example = {
-  title: string,
-  /* $FlowFixMe(>=0.89.0 site=react_native_fb) This comment suppresses an error
-   * found when Flow v0.89 was deployed. To see the error, delete this comment
-   * and run Flow. */
-  render: () => ?React.Element<any>,
-  description?: string,
-  platform?: string,
-};
-
-export type ExampleModule = {
-  title: string,
-  description: string,
-  examples: Array<Example>,
-};
diff --git a/RNTester/js/FlatListExample.js b/RNTester/js/FlatListExample.js
index d8eeb4626cf7..1a9ee8956629 100644
--- a/RNTester/js/FlatListExample.js
+++ b/RNTester/js/FlatListExample.js
@@ -220,4 +220,13 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = FlatListExample;
+exports.title = '<FlatList>';
+exports.description = 'Performant, scrollable list of data.';
+exports.examples = [
+  {
+    title: 'Simple list of items',
+    render: function(): React.Element<typeof FlatListExample> {
+      return <FlatListExample />;
+    },
+  },
+];
diff --git a/RNTester/js/GeolocationExample.js b/RNTester/js/GeolocationExample.js
index 8ed2182ecd92..808f6c074c5c 100644
--- a/RNTester/js/GeolocationExample.js
+++ b/RNTester/js/GeolocationExample.js
@@ -14,19 +14,6 @@ const React = require('react');
 const ReactNative = require('react-native');
 const {StyleSheet, Text, View, Alert} = ReactNative;
 
-exports.framework = 'React';
-exports.title = 'Geolocation';
-exports.description = 'Examples of using the Geolocation API.';
-
-exports.examples = [
-  {
-    title: 'navigator.geolocation',
-    render: function(): React.Element<any> {
-      return <GeolocationExample />;
-    },
-  },
-];
-
 class GeolocationExample extends React.Component<{}, $FlowFixMeState> {
   state = {
     initialPosition: 'unknown',
@@ -75,3 +62,16 @@ const styles = StyleSheet.create({
     fontWeight: '500',
   },
 });
+
+exports.framework = 'React';
+exports.title = 'Geolocation';
+exports.description = 'Examples of using the Geolocation API.';
+
+exports.examples = [
+  {
+    title: 'navigator.geolocation',
+    render: function(): React.Element<any> {
+      return <GeolocationExample />;
+    },
+  },
+];
diff --git a/RNTester/js/ImageEditingExample.js b/RNTester/js/ImageEditingExample.js
index c62784acb2c6..bc4fdbb7a070 100644
--- a/RNTester/js/ImageEditingExample.js
+++ b/RNTester/js/ImageEditingExample.js
@@ -278,18 +278,6 @@ class ImageCropper extends React.Component<$FlowFixMeProps, $FlowFixMeState> {
   }
 }
 
-exports.framework = 'React';
-exports.title = 'ImageEditor';
-exports.description = 'Cropping and scaling with ImageEditor';
-exports.examples = [
-  {
-    title: 'Image Cropping',
-    render() {
-      return <SquareImageCropper />;
-    },
-  },
-];
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -314,3 +302,15 @@ const styles = StyleSheet.create({
     fontWeight: '500',
   },
 });
+
+exports.framework = 'React';
+exports.title = 'ImageEditor';
+exports.description = 'Cropping and scaling with ImageEditor';
+exports.examples = [
+  {
+    title: 'Image Cropping',
+    render() {
+      return <SquareImageCropper />;
+    },
+  },
+];
diff --git a/RNTester/js/ImageExample.js b/RNTester/js/ImageExample.js
index abec3802716c..7b55b1c4f256 100644
--- a/RNTester/js/ImageExample.js
+++ b/RNTester/js/ImageExample.js
@@ -335,6 +335,71 @@ class MultipleSourcesExample extends React.Component<
   }
 }
 
+const fullImage = {
+  uri: 'https://facebook.github.io/react-native/img/opengraph.png',
+};
+const smallImage = {
+  uri: 'https://facebook.github.io/react-native/img/favicon.png',
+};
+
+const styles = StyleSheet.create({
+  base: {
+    width: 38,
+    height: 38,
+  },
+  progress: {
+    flex: 1,
+    alignItems: 'center',
+    flexDirection: 'row',
+    width: 100,
+  },
+  leftMargin: {
+    marginLeft: 10,
+  },
+  background: {
+    backgroundColor: '#222222',
+  },
+  sectionText: {
+    marginVertical: 6,
+  },
+  nestedText: {
+    marginLeft: 12,
+    marginTop: 20,
+    backgroundColor: 'transparent',
+    color: 'white',
+  },
+  resizeMode: {
+    width: 90,
+    height: 60,
+    borderWidth: 0.5,
+    borderColor: 'black',
+  },
+  resizeModeText: {
+    fontSize: 11,
+    marginBottom: 3,
+  },
+  icon: {
+    width: 15,
+    height: 15,
+  },
+  horizontal: {
+    flexDirection: 'row',
+  },
+  gif: {
+    flex: 1,
+    height: 200,
+  },
+  base64: {
+    flex: 1,
+    height: 50,
+    resizeMode: 'contain',
+  },
+  touchableText: {
+    fontWeight: '500',
+    color: 'blue',
+  },
+});
+
 exports.displayName = (undefined: ?string);
 exports.framework = 'React';
 exports.title = '<Image>';
@@ -890,68 +955,3 @@ exports.examples = [
     },
   },
 ];
-
-const fullImage = {
-  uri: 'https://facebook.github.io/react-native/img/opengraph.png',
-};
-const smallImage = {
-  uri: 'https://facebook.github.io/react-native/img/favicon.png',
-};
-
-const styles = StyleSheet.create({
-  base: {
-    width: 38,
-    height: 38,
-  },
-  progress: {
-    flex: 1,
-    alignItems: 'center',
-    flexDirection: 'row',
-    width: 100,
-  },
-  leftMargin: {
-    marginLeft: 10,
-  },
-  background: {
-    backgroundColor: '#222222',
-  },
-  sectionText: {
-    marginVertical: 6,
-  },
-  nestedText: {
-    marginLeft: 12,
-    marginTop: 20,
-    backgroundColor: 'transparent',
-    color: 'white',
-  },
-  resizeMode: {
-    width: 90,
-    height: 60,
-    borderWidth: 0.5,
-    borderColor: 'black',
-  },
-  resizeModeText: {
-    fontSize: 11,
-    marginBottom: 3,
-  },
-  icon: {
-    width: 15,
-    height: 15,
-  },
-  horizontal: {
-    flexDirection: 'row',
-  },
-  gif: {
-    flex: 1,
-    height: 200,
-  },
-  base64: {
-    flex: 1,
-    height: 50,
-    resizeMode: 'contain',
-  },
-  touchableText: {
-    fontWeight: '500',
-    color: 'blue',
-  },
-});
diff --git a/RNTester/js/InputAccessoryViewExample.js b/RNTester/js/InputAccessoryViewExample.js
index 70f9b5729451..7907717eeabb 100644
--- a/RNTester/js/InputAccessoryViewExample.js
+++ b/RNTester/js/InputAccessoryViewExample.js
@@ -61,10 +61,6 @@ class TextInputBar extends React.PureComponent<*, *> {
 const BAR_HEIGHT = 44;
 
 class InputAccessoryViewExample extends React.Component<*> {
-  static title = '<InputAccessoryView>';
-  static description =
-    'Example showing how to use an InputAccessoryView to build an iMessage-like sticky text input';
-
   render() {
     return (
       <>
@@ -108,4 +104,14 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = InputAccessoryViewExample;
+exports.title = '<InputAccessoryView>';
+exports.description =
+  'Example showing how to use an InputAccessoryView to build an iMessage-like sticky text input';
+exports.examples = [
+  {
+    title: 'Simple view with sticky input',
+    render: function(): React.Element<any> {
+      return <InputAccessoryViewExample />;
+    },
+  },
+];
diff --git a/RNTester/js/KeyboardAvoidingViewExample.js b/RNTester/js/KeyboardAvoidingViewExample.js
index 5a959c8618e3..ffd76a53d913 100644
--- a/RNTester/js/KeyboardAvoidingViewExample.js
+++ b/RNTester/js/KeyboardAvoidingViewExample.js
@@ -26,10 +26,6 @@ const RNTesterBlock = require('./RNTesterBlock');
 const RNTesterPage = require('./RNTesterPage');
 
 class KeyboardAvoidingViewExample extends React.Component {
-  static title = '<KeyboardAvoidingView>';
-  static description =
-    'Base component for views that automatically adjust their height or position to move out of the way of the keyboard.';
-
   state = {
     behavior: 'padding',
     modalOpen: false,
@@ -105,4 +101,14 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = KeyboardAvoidingViewExample;
+exports.title = '<KeyboardAvoidingView>';
+exports.description =
+  'Base component for views that automatically adjust their height or position to move out of the way of the keyboard.';
+exports.examples = [
+  {
+    title: 'Simple keyboard view',
+    render: function(): React.Element<typeof KeyboardAvoidingViewExample> {
+      return <KeyboardAvoidingViewExample />;
+    },
+  },
+];
diff --git a/RNTester/js/LayoutExample.js b/RNTester/js/LayoutExample.js
index fed6f705783a..d77e6c67de43 100644
--- a/RNTester/js/LayoutExample.js
+++ b/RNTester/js/LayoutExample.js
@@ -51,10 +51,6 @@ class CircleBlock extends React.Component<$FlowFixMeProps> {
 }
 
 class LayoutExample extends React.Component<$FlowFixMeProps> {
-  static title = 'Layout - Flexbox';
-  static description = 'Examples of using the flexbox API to layout views.';
-  static displayName = 'LayoutExample';
-
   render() {
     const fiveColoredCircles = [
       <Circle bgColor="#527fe4" key="blue" />,
@@ -196,4 +192,14 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = LayoutExample;
+exports.title = 'Layout - Flexbox';
+exports.description = 'Examples of using the flexbox API to layout views.';
+exports.displayName = 'LayoutExample';
+exports.examples = [
+  {
+    title: 'Simple layout using flexbox',
+    render: function(): React.Element<typeof LayoutExample> {
+      return <LayoutExample />;
+    },
+  },
+];
diff --git a/RNTester/js/LinkingExample.js b/RNTester/js/LinkingExample.js
index def07bdb5238..32ae2bc990e8 100644
--- a/RNTester/js/LinkingExample.js
+++ b/RNTester/js/LinkingExample.js
@@ -69,9 +69,6 @@ class SendIntentButton extends React.Component<Props> {
 }
 
 class IntentAndroidExample extends React.Component {
-  static title = 'Linking';
-  static description = 'Shows how to use Linking to open URLs.';
-
   render() {
     return (
       <View>
@@ -119,4 +116,13 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = IntentAndroidExample;
+exports.title = 'Linking';
+exports.description = 'Shows how to use Linking to open URLs.';
+exports.examples = [
+  {
+    title: 'Simple list of items',
+    render: function(): React.Element<typeof IntentAndroidExample> {
+      return <IntentAndroidExample />;
+    },
+  },
+];
diff --git a/RNTester/js/ListViewExample.js b/RNTester/js/ListViewExample.js
index eb2c572be284..a8663da20bd5 100644
--- a/RNTester/js/ListViewExample.js
+++ b/RNTester/js/ListViewExample.js
@@ -29,10 +29,7 @@ type State = {|
   dataSource: ListViewDataSource,
 |};
 
-class ListViewSimpleExample extends React.Component<RNTesterProps, State> {
-  static title = '<ListView>';
-  static description = 'Performant, scrollable list of data.';
-
+class ListViewExample extends React.Component<RNTesterProps, State> {
   state = {
     dataSource: this.getInitialDataSource(),
   };
@@ -166,4 +163,13 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = ListViewSimpleExample;
+exports.title = '<ListView>';
+exports.description = 'Performant, scrollable list of data.';
+exports.examples = [
+  {
+    title: 'Simple list of items',
+    render: function(): React.Element<typeof ListViewExample> {
+      return <ListViewExample />;
+    },
+  },
+];
diff --git a/RNTester/js/ListViewGridLayoutExample.js b/RNTester/js/ListViewGridLayoutExample.js
index 2bc2cb251438..e3d6cb5b63c9 100644
--- a/RNTester/js/ListViewGridLayoutExample.js
+++ b/RNTester/js/ListViewGridLayoutExample.js
@@ -44,9 +44,6 @@ type State = {|
 |};
 
 class ListViewGridLayoutExample extends React.Component<RNTesterProps, State> {
-  static title = '<ListView> - Grid Layout';
-  static description = 'Flexbox grid layout.';
-
   state = {
     dataSource: this.getInitialDataSource(),
   };
@@ -152,4 +149,13 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = ListViewGridLayoutExample;
+exports.title = '<ListView> - Grid Layout';
+exports.description = 'Flexbox grid layout.';
+exports.examples = [
+  {
+    title: 'Simple list view with grid layout',
+    render: function(): React.Element<typeof ListViewGridLayoutExample> {
+      return <ListViewGridLayoutExample />;
+    },
+  },
+];
diff --git a/RNTester/js/ListViewPagingExample.js b/RNTester/js/ListViewPagingExample.js
index 8c81d62cb9ee..4aade764f440 100644
--- a/RNTester/js/ListViewPagingExample.js
+++ b/RNTester/js/ListViewPagingExample.js
@@ -88,9 +88,6 @@ class Thumb extends React.Component<{}, $FlowFixMeState> {
 }
 
 class ListViewPagingExample extends React.Component<$FlowFixMeProps, *> {
-  static title = '<ListView> - Paging';
-  static description = 'Floating headers & layout animations.';
-
   // $FlowFixMe found when converting React.createClass to ES6
   constructor(props) {
     super(props);
@@ -282,4 +279,13 @@ const layoutAnimationConfigs = [
   animations.layout.easeInEaseOut,
 ];
 
-module.exports = ListViewPagingExample;
+exports.title = '<ListView> - Paging';
+exports.description = 'Floating headers & layout animations.';
+exports.examples = [
+  {
+    title: 'Simple list view with pagination',
+    render: function(): React.Element<typeof ListViewPagingExample> {
+      return <ListViewPagingExample />;
+    },
+  },
+];
diff --git a/RNTester/js/MaskedViewExample.js b/RNTester/js/MaskedViewExample.js
index 8a2ebd71116a..165ce1eedf5c 100644
--- a/RNTester/js/MaskedViewExample.js
+++ b/RNTester/js/MaskedViewExample.js
@@ -23,10 +23,6 @@ const {
 } = require('react-native');
 
 class MaskedViewExample extends React.Component<{}, $FlowFixMeState> {
-  static title = '<MaskedViewIOS>';
-  static description =
-    'Renders the child view with a mask specified in the `renderMask` prop.';
-
   state = {
     alternateChildren: true,
   };
@@ -181,4 +177,14 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = MaskedViewExample;
+exports.title = '<MaskedViewIOS>';
+exports.description =
+  'Renders the child view with a mask specified in the `renderMask` prop.';
+exports.examples = [
+  {
+    title: 'Simple masked view',
+    render: function(): React.Element<typeof MaskedViewExample> {
+      return <MaskedViewExample />;
+    },
+  },
+];
diff --git a/RNTester/js/MultiColumnExample.js b/RNTester/js/MultiColumnExample.js
index 28f7804c5efa..c7ae28a997ef 100644
--- a/RNTester/js/MultiColumnExample.js
+++ b/RNTester/js/MultiColumnExample.js
@@ -34,9 +34,6 @@ class MultiColumnExample extends React.PureComponent<
   $FlowFixMeProps,
   $FlowFixMeState,
 > {
-  static title = '<FlatList> - MultiColumn';
-  static description = 'Performant, scrollable grid of data.';
-
   state = {
     data: genItemData(1000),
     filterText: '',
@@ -165,4 +162,13 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = MultiColumnExample;
+exports.title = '<FlatList> - MultiColumn';
+exports.description = 'Performant, scrollable grid of data.';
+exports.examples = [
+  {
+    title: 'Simple flat list multi column',
+    render: function(): React.Element<typeof MultiColumnExample> {
+      return <MultiColumnExample />;
+    },
+  },
+];
diff --git a/RNTester/js/PanResponderExample.js b/RNTester/js/PanResponderExample.js
index b484dc086bfb..94735f5e583a 100644
--- a/RNTester/js/PanResponderExample.js
+++ b/RNTester/js/PanResponderExample.js
@@ -28,10 +28,6 @@ const CIRCLE_SIZE = 80;
 type Props = $ReadOnly<{||}>;
 
 class PanResponderExample extends React.Component<Props> {
-  static title = 'PanResponder Sample';
-  static description =
-    'Shows the Use of PanResponder to provide basic gesture handling';
-
   _handleStartShouldSetPanResponder = (
     event: PressEvent,
     gestureState: GestureState,
@@ -141,4 +137,14 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = PanResponderExample;
+exports.title = 'PanResponder Sample';
+exports.description =
+  'Shows the Use of PanResponder to provide basic gesture handling';
+exports.examples = [
+  {
+    title: 'Basic gresture handling',
+    render: function(): React.Element<typeof PanResponderExample> {
+      return <PanResponderExample />;
+    },
+  },
+];
diff --git a/RNTester/js/PermissionsExampleAndroid.android.js b/RNTester/js/PermissionsExampleAndroid.android.js
index 93a7451809b2..a45efa9a544e 100644
--- a/RNTester/js/PermissionsExampleAndroid.android.js
+++ b/RNTester/js/PermissionsExampleAndroid.android.js
@@ -23,11 +23,6 @@ const {
 
 const Item = Picker.Item;
 
-exports.displayName = (undefined: ?string);
-exports.framework = 'React';
-exports.title = 'PermissionsAndroid';
-exports.description = 'Permissions example for API 23+.';
-
 class PermissionsExample extends React.Component<{}, $FlowFixMeState> {
   state = {
     permission: PermissionsAndroid.PERMISSIONS.CAMERA,
@@ -105,6 +100,10 @@ class PermissionsExample extends React.Component<{}, $FlowFixMeState> {
   };
 }
 
+exports.displayName = (undefined: ?string);
+exports.framework = 'React';
+exports.title = 'PermissionsAndroid';
+exports.description = 'Permissions example for API 23+.';
 exports.examples = [
   {
     title: 'Permissions Example',
diff --git a/RNTester/js/PickerExample.js b/RNTester/js/PickerExample.js
index 6d54914ca2a8..a6dccfefcf32 100644
--- a/RNTester/js/PickerExample.js
+++ b/RNTester/js/PickerExample.js
@@ -13,115 +13,115 @@
 const React = require('react');
 const ReactNative = require('react-native');
 const StyleSheet = require('StyleSheet');
-const RNTesterBlock = require('RNTesterBlock');
-const RNTesterPage = require('RNTesterPage');
 
 const {Picker, Text} = ReactNative;
 
 const Item = Picker.Item;
 
-class PickerExample extends React.Component<{}, $FlowFixMeState> {
-  static title = '<Picker>';
-  static description =
-    'Provides multiple options to choose from, using either a dropdown menu or a dialog.';
+class BasicPickerExample extends React.Component<{}, $FlowFixMeState> {
+  state = {
+    value: 'key1',
+  };
 
+  render() {
+    return (
+      <Picker
+        testID="basic-picker"
+        style={styles.picker}
+        selectedValue={this.state.value}
+        onValueChange={v => this.setState({value: v})}>
+        <Item label="hello" value="key0" />
+        <Item label="world" value="key1" />
+      </Picker>
+    );
+  }
+}
+
+class DisabledPickerExample extends React.Component<{}, $FlowFixMeState> {
   state = {
-    selected1: 'key1',
-    selected2: 'key1',
-    selected3: 'key1',
-    color: 'red',
-    mode: Picker.MODE_DIALOG,
+    value: 'key1',
   };
 
   render() {
     return (
-      <RNTesterPage title="<Picker>">
-        <RNTesterBlock title="Basic Picker">
-          <Picker
-            testID="basic-picker"
-            style={styles.picker}
-            selectedValue={this.state.selected1}
-            onValueChange={this.onValueChange.bind(this, 'selected1')}>
-            <Item label="hello" value="key0" />
-            <Item label="world" value="key1" />
-          </Picker>
-        </RNTesterBlock>
-        <RNTesterBlock title="Disabled picker">
-          <Picker
-            style={styles.picker}
-            enabled={false}
-            selectedValue={this.state.selected1}>
-            <Item label="hello" value="key0" />
-            <Item label="world" value="key1" />
-          </Picker>
-        </RNTesterBlock>
-        <RNTesterBlock title="Dropdown Picker">
-          <Picker
-            style={styles.picker}
-            selectedValue={this.state.selected2}
-            onValueChange={this.onValueChange.bind(this, 'selected2')}
-            mode="dropdown">
-            <Item label="hello" value="key0" />
-            <Item label="world" value="key1" />
-          </Picker>
-        </RNTesterBlock>
-        <RNTesterBlock title="Picker with prompt message">
-          <Picker
-            style={styles.picker}
-            selectedValue={this.state.selected3}
-            onValueChange={this.onValueChange.bind(this, 'selected3')}
-            prompt="Pick one, just one">
-            <Item label="hello" value="key0" />
-            <Item label="world" value="key1" />
-          </Picker>
-        </RNTesterBlock>
-        <RNTesterBlock title="Picker with no listener">
-          <Picker style={styles.picker}>
-            <Item label="hello" value="key0" />
-            <Item label="world" value="key1" />
-          </Picker>
-          <Text>
-            Cannot change the value of this picker because it doesn't update
-            selectedValue.
-          </Text>
-        </RNTesterBlock>
-        <RNTesterBlock title="Colorful pickers">
-          <Picker
-            style={[styles.picker, {color: 'white', backgroundColor: '#333'}]}
-            selectedValue={this.state.color}
-            onValueChange={this.onValueChange.bind(this, 'color')}
-            mode="dropdown">
-            <Item label="red" color="red" value="red" />
-            <Item label="green" color="green" value="green" />
-            <Item label="blue" color="blue" value="blue" />
-          </Picker>
-          <Picker
-            style={styles.picker}
-            selectedValue={this.state.color}
-            onValueChange={this.onValueChange.bind(this, 'color')}
-            mode="dialog">
-            <Item label="red" color="red" value="red" />
-            <Item label="green" color="green" value="green" />
-            <Item label="blue" color="blue" value="blue" />
-          </Picker>
-        </RNTesterBlock>
-      </RNTesterPage>
+      <Picker
+        style={styles.picker}
+        enabled={false}
+        selectedValue={this.state.value}>
+        <Item label="hello" value="key0" />
+        <Item label="world" value="key1" />
+      </Picker>
     );
   }
+}
 
-  changeMode = () => {
-    const newMode =
-      this.state.mode === Picker.MODE_DIALOG
-        ? Picker.MODE_DROPDOWN
-        : Picker.MODE_DIALOG;
-    this.setState({mode: newMode});
+class DropdownPickerExample extends React.Component<{}, $FlowFixMeState> {
+  state = {
+    value: 'key1',
   };
 
-  onValueChange = (key: string, value: string | number) => {
-    const newState = {};
-    newState[key] = value;
-    this.setState(newState);
+  render() {
+    return (
+      <Picker
+        style={styles.picker}
+        selectedValue={this.state.value}
+        onValueChange={v => this.setState({value: v})}
+        mode="dropdown">
+        <Item label="hello" value="key0" />
+        <Item label="world" value="key1" />
+      </Picker>
+    );
+  }
+}
+
+class PromptPickerExample extends React.Component<{}, $FlowFixMeState> {
+  state = {
+    value: 'key1',
   };
+
+  render() {
+    return (
+      <Picker
+        style={styles.picker}
+        selectedValue={this.state.value}
+        onValueChange={v => this.setState({value: v})}
+        prompt="Pick one, just one">
+        <Item label="hello" value="key0" />
+        <Item label="world" value="key1" />
+      </Picker>
+    );
+  }
+}
+
+class ColorPickerExample extends React.Component<{}, $FlowFixMeState> {
+  state = {
+    color: 'red',
+  };
+
+  render() {
+    return (
+      <>
+        <Picker
+          style={[styles.picker, {color: 'white', backgroundColor: '#333'}]}
+          selectedValue={this.state.color}
+          onValueChange={v => this.setState({color: v})}
+          mode="dropdown">
+          <Item label="red" color="red" value="red" />
+          <Item label="green" color="green" value="green" />
+          <Item label="blue" color="blue" value="blue" />
+        </Picker>
+        <Picker
+          style={styles.picker}
+          selectedValue={this.state.color}
+          onValueChange={v => this.setState({color: v})}
+          mode="dialog">
+          <Item label="red" color="red" value="red" />
+          <Item label="green" color="green" value="green" />
+          <Item label="blue" color="blue" value="blue" />
+        </Picker>
+      </>
+    );
+  }
 }
 
 const styles = StyleSheet.create({
@@ -130,4 +130,55 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = PickerExample;
+exports.title = '<Picker>';
+exports.description =
+  'Provides multiple options to choose from, using either a dropdown menu or a dialog.';
+exports.examples = [
+  {
+    title: 'Basic Picker',
+    render: function(): React.Element<typeof BasicPickerExample> {
+      return <BasicPickerExample />;
+    },
+  },
+  {
+    title: 'Disabled Picker',
+    render: function(): React.Element<typeof DisabledPickerExample> {
+      return <DisabledPickerExample />;
+    },
+  },
+  {
+    title: 'Dropdown Picker',
+    render: function(): React.Element<typeof DropdownPickerExample> {
+      return <DropdownPickerExample />;
+    },
+  },
+  {
+    title: 'Picker with prompt message',
+    render: function(): React.Element<typeof PromptPickerExample> {
+      return <PromptPickerExample />;
+    },
+  },
+  {
+    title: 'Picker with no listener',
+    render: function(): React.Element<typeof PromptPickerExample> {
+      return (
+        <>
+          <Picker style={styles.picker}>
+            <Item label="hello" value="key0" />
+            <Item label="world" value="key1" />
+          </Picker>
+          <Text>
+            Cannot change the value of this picker because it doesn't update
+            selectedValue.
+          </Text>
+        </>
+      );
+    },
+  },
+  {
+    title: 'Colorful pickers',
+    render: function(): React.Element<typeof ColorPickerExample> {
+      return <ColorPickerExample />;
+    },
+  },
+];
diff --git a/RNTester/js/ProgressBarAndroidExample.android.js b/RNTester/js/ProgressBarAndroidExample.android.js
index 9c45fc54c401..02761819cb79 100644
--- a/RNTester/js/ProgressBarAndroidExample.android.js
+++ b/RNTester/js/ProgressBarAndroidExample.android.js
@@ -57,9 +57,6 @@ class MovingBar extends React.Component<MovingBarProps, MovingBarState> {
 }
 
 class ProgressBarAndroidExample extends React.Component<{}> {
-  static title = '<ProgressBarAndroid>';
-  static description = 'Horizontal bar to show the progress of some operation.';
-
   render() {
     return (
       <RNTesterPage title="ProgressBar Examples">
@@ -91,4 +88,13 @@ class ProgressBarAndroidExample extends React.Component<{}> {
   }
 }
 
-module.exports = ProgressBarAndroidExample;
+exports.title = '<ProgressBarAndroid>';
+exports.description = 'Horizontal bar to show the progress of some operation.';
+exports.examples = [
+  {
+    title: 'Simple progress bar',
+    render: function(): React.Element<typeof ProgressBarAndroidExample> {
+      return <ProgressBarAndroidExample />;
+    },
+  },
+];
diff --git a/RNTester/js/ProgressViewIOSExample.js b/RNTester/js/ProgressViewIOSExample.js
index b7d854707449..63bc82c07675 100644
--- a/RNTester/js/ProgressViewIOSExample.js
+++ b/RNTester/js/ProgressViewIOSExample.js
@@ -82,6 +82,16 @@ class ProgressViewExample extends React.Component<Props, State> {
   }
 }
 
+const styles = StyleSheet.create({
+  container: {
+    marginTop: -20,
+    backgroundColor: 'transparent',
+  },
+  progressView: {
+    marginTop: 20,
+  },
+});
+
 exports.displayName = (undefined: ?string);
 exports.framework = 'React';
 exports.title = 'ProgressViewIOS';
@@ -94,13 +104,3 @@ exports.examples = [
     },
   },
 ];
-
-const styles = StyleSheet.create({
-  container: {
-    marginTop: -20,
-    backgroundColor: 'transparent',
-  },
-  progressView: {
-    marginTop: 20,
-  },
-});
diff --git a/RNTester/js/RNTesterApp.ios.js b/RNTester/js/RNTesterApp.ios.js
index 56a90d435bac..b6c9ebfb1565 100644
--- a/RNTester/js/RNTesterApp.ios.js
+++ b/RNTester/js/RNTesterApp.ios.js
@@ -33,7 +33,7 @@ const {
   YellowBox,
 } = ReactNative;
 
-import type {RNTesterExample} from './RNTesterList.ios';
+import type {RNTesterExample} from './Shared/RNTesterTypes';
 import type {RNTesterAction} from './RNTesterActions';
 import type {RNTesterNavigationState} from './RNTesterNavigationReducer';
 
diff --git a/RNTester/js/RNTesterExampleContainer.js b/RNTester/js/RNTesterExampleContainer.js
index e1c66e3333f1..8336efe585e5 100644
--- a/RNTester/js/RNTesterExampleContainer.js
+++ b/RNTester/js/RNTesterExampleContainer.js
@@ -9,12 +9,24 @@
 
 'use strict';
 
+import type {RNTesterExampleModule} from './Shared/RNTesterTypes';
+
 const React = require('react');
-const {Platform} = require('react-native');
+const {Platform, StyleSheet, View, TextInput} = require('react-native');
 const RNTesterBlock = require('./RNTesterBlock');
 const RNTesterPage = require('./RNTesterPage');
 
-class RNTesterExampleContainer extends React.Component {
+type Props = $ReadOnly<{|
+  module: RNTesterExampleModule,
+|}>;
+
+type State = {|
+  filterText: string,
+|};
+
+class RNTesterExampleContainer extends React.Component<Props, State> {
+  state = {filterText: ''};
+
   renderExample(example, i) {
     // Filter platform-specific examples
     const {description, platform} = example;
@@ -32,17 +44,81 @@ class RNTesterExampleContainer extends React.Component {
     );
   }
 
+  renderExamples() {
+    const {module} = this.props;
+    const {filterText} = this.state;
+    let filterRegex = /.*/;
+
+    try {
+      filterRegex = new RegExp(String(filterText), 'i');
+    } catch (error) {
+      console.warn(
+        'Failed to create RegExp: %s\n%s',
+        filterText,
+        error.message,
+      );
+    }
+
+    const filter = example => filterRegex.test(example.title);
+
+    return module.examples.filter(filter).map(this.renderExample);
+  }
+
+  renderFilter() {
+    const {filterText} = this.state;
+
+    return (
+      <View style={styles.searchRow}>
+        <TextInput
+          autoCapitalize="none"
+          autoCorrect={false}
+          clearButtonMode="always"
+          onChangeText={text => {
+            this.setState(() => ({filterText: text}));
+          }}
+          placeholder="Search..."
+          underlineColorAndroid="transparent"
+          style={styles.searchTextInput}
+          testID="explorer_example_search"
+          value={filterText}
+        />
+      </View>
+    );
+  }
+
   render(): React.Element<any> {
     if (!this.props.module.examples) {
       return <this.props.module />;
     }
 
+    if (this.props.module.examples.length === 1) {
+      const Example = this.props.module.examples[0].render;
+      return <Example />;
+    }
+
     return (
       <RNTesterPage title={this.props.title}>
-        {this.props.module.examples.map(this.renderExample)}
+        {this.renderFilter()}
+        {this.renderExamples()}
       </RNTesterPage>
     );
   }
 }
 
+const styles = StyleSheet.create({
+  searchRow: {
+    backgroundColor: '#eeeeee',
+    padding: 10,
+  },
+  searchTextInput: {
+    backgroundColor: 'white',
+    borderColor: '#cccccc',
+    borderRadius: 3,
+    borderWidth: 1,
+    paddingLeft: 8,
+    paddingVertical: 0,
+    height: 35,
+  },
+});
+
 module.exports = RNTesterExampleContainer;
diff --git a/RNTester/js/RNTesterExampleList.js b/RNTester/js/RNTesterExampleList.js
index 48bfab002852..9ec964726da3 100644
--- a/RNTester/js/RNTesterExampleList.js
+++ b/RNTester/js/RNTesterExampleList.js
@@ -22,8 +22,8 @@ const View = require('View');
 
 /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found when
  * making Flow check .android.js files. */
-import type {RNTesterExample} from './RNTesterList.ios';
-import type {TextStyleProp, ViewStyleProp} from 'StyleSheet';
+import type {RNTesterExample} from './Shared/RNTesterTypes';
+import type {ViewStyleProp} from 'StyleSheet';
 
 type Props = {
   onNavigate: Function,
diff --git a/RNTester/js/RNTesterList.android.js b/RNTester/js/RNTesterList.android.js
index 8657fc430610..96d91968c291 100644
--- a/RNTester/js/RNTesterList.android.js
+++ b/RNTester/js/RNTesterList.android.js
@@ -10,10 +10,7 @@
 
 'use strict';
 
-export type RNTesterExample = {
-  key: string,
-  module: Object,
-};
+import type {RNTesterExample} from './Shared/RNTesterTypes';
 
 const ComponentExamples: Array<RNTesterExample> = [
   {
diff --git a/RNTester/js/RNTesterList.ios.js b/RNTester/js/RNTesterList.ios.js
index bcf31b320b9f..c9a5e2ea6b92 100644
--- a/RNTester/js/RNTesterList.ios.js
+++ b/RNTester/js/RNTesterList.ios.js
@@ -10,11 +10,7 @@
 
 'use strict';
 
-export type RNTesterExample = {
-  key: string,
-  module: Object,
-  supportsTVOS: boolean,
-};
+import type {RNTesterExample} from './Shared/RNTesterTypes';
 
 const ComponentExamples: Array<RNTesterExample> = [
   {
diff --git a/RNTester/js/RTLExample.js b/RNTester/js/RTLExample.js
index c7afa0e1876e..96fe2fc8a2ac 100644
--- a/RNTester/js/RTLExample.js
+++ b/RNTester/js/RTLExample.js
@@ -372,10 +372,6 @@ const BorderExample = withRTLState(({isRTL, setRTL}) => {
 });
 
 class RTLExample extends React.Component<any, State> {
-  static title = 'RTLExample';
-  static description =
-    'Examples to show how to apply components to RTL layout.';
-
   _panResponder: Object;
 
   constructor(props: Object) {
@@ -679,4 +675,13 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = RTLExample;
+exports.title = 'RTLExample';
+exports.description = 'Examples to show how to apply components to RTL layout.';
+exports.examples = [
+  {
+    title: 'Simple RTL',
+    render: function(): React.Element<typeof RTLExample> {
+      return <RTLExample />;
+    },
+  },
+];
diff --git a/RNTester/js/RefreshControlExample.js b/RNTester/js/RefreshControlExample.js
index 30f20cf03cae..515eeac33ae4 100644
--- a/RNTester/js/RefreshControlExample.js
+++ b/RNTester/js/RefreshControlExample.js
@@ -56,9 +56,6 @@ class Row extends React.Component {
 }
 
 class RefreshControlExample extends React.Component {
-  static title = '<RefreshControl>';
-  static description = 'Adds pull-to-refresh support to a scrollview.';
-
   state = {
     isRefreshing: false,
     loaded: 0,
@@ -118,4 +115,13 @@ class RefreshControlExample extends React.Component {
   };
 }
 
-module.exports = RefreshControlExample;
+exports.title = '<RefreshControl>';
+exports.description = 'Adds pull-to-refresh support to a scrollview.';
+exports.examples = [
+  {
+    title: 'Simple refresh',
+    render: function(): React.Element<typeof RefreshControlExample> {
+      return <RefreshControlExample />;
+    },
+  },
+];
diff --git a/RNTester/js/SafeAreaViewExample.js b/RNTester/js/SafeAreaViewExample.js
index 37a3910a7162..0dbc79e09476 100644
--- a/RNTester/js/SafeAreaViewExample.js
+++ b/RNTester/js/SafeAreaViewExample.js
@@ -19,12 +19,6 @@ const Switch = require('Switch');
 const Text = require('Text');
 const View = require('View');
 
-exports.displayName = (undefined: ?string);
-exports.framework = 'React';
-exports.title = '<SafeAreaView>';
-exports.description =
-  'SafeAreaView automatically applies paddings reflect the portion of the view that is not covered by other (special) ancestor views.';
-
 class SafeAreaViewExample extends React.Component<
   {},
   {|
@@ -100,6 +94,27 @@ class IsIPhoneXExample extends React.Component<{}> {
   }
 }
 
+const styles = StyleSheet.create({
+  modal: {
+    flex: 1,
+  },
+  safeArea: {
+    flex: 1,
+    height: 1000,
+  },
+  safeAreaContent: {
+    flex: 1,
+    backgroundColor: '#ffaaaa',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+exports.displayName = (undefined: ?string);
+exports.framework = 'React';
+exports.title = '<SafeAreaView>';
+exports.description =
+  'SafeAreaView automatically applies paddings reflect the portion of the view that is not covered by other (special) ancestor views.';
 exports.examples = [
   {
     title: '<SafeAreaView> Example',
@@ -117,19 +132,3 @@ exports.examples = [
     render: () => <IsIPhoneXExample />,
   },
 ];
-
-const styles = StyleSheet.create({
-  modal: {
-    flex: 1,
-  },
-  safeArea: {
-    flex: 1,
-    height: 1000,
-  },
-  safeAreaContent: {
-    flex: 1,
-    backgroundColor: '#ffaaaa',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
diff --git a/RNTester/js/ScrollViewSimpleExample.js b/RNTester/js/ScrollViewSimpleExample.js
index c72a47076892..f5ca4fcedf87 100644
--- a/RNTester/js/ScrollViewSimpleExample.js
+++ b/RNTester/js/ScrollViewSimpleExample.js
@@ -17,10 +17,6 @@ const {ScrollView, StyleSheet, Text, TouchableOpacity} = ReactNative;
 const NUM_ITEMS = 20;
 
 class ScrollViewSimpleExample extends React.Component<{}> {
-  static title = '<ScrollView>';
-  static description =
-    'Component that enables scrolling through child components.';
-
   /* $FlowFixMe(>=0.85.0 site=react_native_fb) This comment suppresses an error
    * found when Flow v0.85 was deployed. To see the error, delete this comment
    * and run Flow. */
@@ -90,4 +86,15 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = ScrollViewSimpleExample;
+exports.title = '<ScrollView>';
+exports.description =
+  'Component that enables scrolling through child components.';
+
+exports.examples = [
+  {
+    title: 'Simple scroll view',
+    render: function(): React.Element<typeof ScrollViewSimpleExample> {
+      return <ScrollViewSimpleExample />;
+    },
+  },
+];
diff --git a/RNTester/js/SectionListExample.js b/RNTester/js/SectionListExample.js
index 0d72c60fab2f..be4179f7e6c1 100644
--- a/RNTester/js/SectionListExample.js
+++ b/RNTester/js/SectionListExample.js
@@ -62,9 +62,6 @@ const CustomSeparatorComponent = ({highlighted, text}) => (
 );
 
 class SectionListExample extends React.PureComponent<{}, $FlowFixMeState> {
-  static title = '<SectionList>';
-  static description = 'Performant, scrollable list of data.';
-
   state = {
     data: genItemData(1000),
     debug: false,
@@ -275,4 +272,13 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = SectionListExample;
+exports.title = '<SectionList>';
+exports.description = 'Performant, scrollable list of data.';
+exports.examples = [
+  {
+    title: 'Simple scrollable list',
+    render: function(): React.Element<typeof SectionListExample> {
+      return <SectionListExample />;
+    },
+  },
+];
diff --git a/RNTester/js/ShareExample.js b/RNTester/js/ShareExample.js
index d1608a250715..53180d2cf95e 100644
--- a/RNTester/js/ShareExample.js
+++ b/RNTester/js/ShareExample.js
@@ -14,18 +14,6 @@ const React = require('react');
 const ReactNative = require('react-native');
 const {StyleSheet, View, Text, TouchableHighlight, Share} = ReactNative;
 
-exports.framework = 'React';
-exports.title = 'Share';
-exports.description = 'Share data with other Apps.';
-exports.examples = [
-  {
-    title: 'Share Text Content',
-    render() {
-      return <ShareMessageExample />;
-    },
-  },
-];
-
 class ShareMessageExample extends React.Component<$FlowFixMeProps, any> {
   _shareMessage: Function;
   _shareText: Function;
@@ -116,3 +104,15 @@ const styles = StyleSheet.create({
     padding: 10,
   },
 });
+
+exports.framework = 'React';
+exports.title = 'Share';
+exports.description = 'Share data with other Apps.';
+exports.examples = [
+  {
+    title: 'Share Text Content',
+    render() {
+      return <ShareMessageExample />;
+    },
+  },
+];
diff --git a/RNTester/js/Shared/RNTesterTypes.js b/RNTester/js/Shared/RNTesterTypes.js
index 00b91ea0ae71..d6dfacccb582 100644
--- a/RNTester/js/Shared/RNTesterTypes.js
+++ b/RNTester/js/Shared/RNTesterTypes.js
@@ -11,6 +11,7 @@
 'use strict';
 
 import type {ComponentType} from 'React';
+import * as React from 'react';
 
 export type RNTesterProps = $ReadOnly<{|
   navigator?: ?$ReadOnlyArray<
@@ -22,3 +23,24 @@ export type RNTesterProps = $ReadOnly<{|
     |}>,
   >,
 |}>;
+
+export type RNTesterExampleModuleItem = $ReadOnly<{|
+  title: string,
+  platform?: string,
+  description?: string,
+  render: () => React.Element<any>,
+|}>;
+
+export type RNTesterExampleModule = $ReadOnly<{|
+  title: string,
+  description: string,
+  displayName?: ?string,
+  framework?: string,
+  examples: Array<RNTesterExampleModuleItem>,
+|}>;
+
+export type RNTesterExample = $ReadOnly<{|
+  key: string,
+  module: RNTesterExampleModule,
+  supportsTVOS?: boolean,
+|}>;
diff --git a/RNTester/js/StatusBarExample.js b/RNTester/js/StatusBarExample.js
index dece8e23fa2e..258215c83f14 100644
--- a/RNTester/js/StatusBarExample.js
+++ b/RNTester/js/StatusBarExample.js
@@ -21,10 +21,6 @@ const {
   Modal,
 } = ReactNative;
 
-exports.framework = 'React';
-exports.title = '<StatusBar>';
-exports.description = 'Component for controlling the status bar';
-
 const colors = ['#ff0000', '#00ff00', '#0000ff', 'rgba(0, 0, 0, 0.4)'];
 
 const barStyles = ['default', 'light-content'];
@@ -434,7 +430,10 @@ class ModalExample extends React.Component<{}, $FlowFixMeState> {
   }
 }
 
-const examples = [
+exports.framework = 'React';
+exports.title = '<StatusBar>';
+exports.description = 'Component for controlling the status bar';
+exports.examples = [
   {
     title: 'StatusBar hidden',
     render() {
@@ -496,8 +495,6 @@ const examples = [
   },
 ];
 
-exports.examples = examples;
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,
diff --git a/RNTester/js/SwipeableFlatListExample.js b/RNTester/js/SwipeableFlatListExample.js
index 7cf2a0810dcc..feef9fff12a9 100644
--- a/RNTester/js/SwipeableFlatListExample.js
+++ b/RNTester/js/SwipeableFlatListExample.js
@@ -44,9 +44,6 @@ const data = [
 ];
 
 class SwipeableFlatListExample extends React.Component<RNTesterProps> {
-  static title = '<SwipeableFlatList>';
-  static description = 'Performant, scrollable, swipeable list of data.';
-
   render() {
     return (
       <RNTesterPage
@@ -141,4 +138,13 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = SwipeableFlatListExample;
+exports.title = '<SwipeableFlatList>';
+exports.description = 'Performant, scrollable, swipeable list of data.';
+exports.examples = [
+  {
+    title: 'Simple swipable list',
+    render: function(): React.Element<typeof SwipeableFlatListExample> {
+      return <SwipeableFlatListExample />;
+    },
+  },
+];
diff --git a/RNTester/js/SwipeableListViewExample.js b/RNTester/js/SwipeableListViewExample.js
index d8d82306e47b..cb54b86d76ec 100644
--- a/RNTester/js/SwipeableListViewExample.js
+++ b/RNTester/js/SwipeableListViewExample.js
@@ -30,13 +30,7 @@ type State = {|
   dataSource: SwipeableListViewDataSource,
 |};
 
-class SwipeableListViewSimpleExample extends React.Component<
-  RNTesterProps,
-  State,
-> {
-  static title = '<SwipeableListView>';
-  static description = 'Performant, scrollable, swipeable list of data.';
-
+class SwipeableListViewExample extends React.Component<RNTesterProps, State> {
   state = {
     dataSource: SwipeableListView.getNewDataSource().cloneWithRowsAndSections(
       ...this._genDataSource({}),
@@ -203,4 +197,13 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = SwipeableListViewSimpleExample;
+exports.title = '<SwipeableListView>';
+exports.description = 'Performant, scrollable, swipeable list of data.';
+exports.examples = [
+  {
+    title: 'Simple swipable list',
+    render: function(): React.Element<typeof SwipeableListViewExample> {
+      return <SwipeableListViewExample />;
+    },
+  },
+];
diff --git a/RNTester/js/SwitchExample.js b/RNTester/js/SwitchExample.js
index 8c698e37058b..ca36372e3788 100644
--- a/RNTester/js/SwitchExample.js
+++ b/RNTester/js/SwitchExample.js
@@ -198,7 +198,10 @@ class EventSwitchExample extends React.Component<{}, $FlowFixMeState> {
   }
 }
 
-const examples = [
+exports.title = '<Switch>';
+exports.displayName = 'SwitchExample';
+exports.description = 'Native boolean input';
+exports.examples = [
   {
     title: 'Switches can be set to true or false',
     render(): React.Element<any> {
@@ -230,8 +233,3 @@ const examples = [
     },
   },
 ];
-
-exports.title = '<Switch>';
-exports.displayName = 'SwitchExample';
-exports.description = 'Native boolean input';
-exports.examples = examples;
diff --git a/RNTester/js/TVEventHandlerExample.js b/RNTester/js/TVEventHandlerExample.js
index 4a5dd7ea352d..f11d867fe737 100644
--- a/RNTester/js/TVEventHandlerExample.js
+++ b/RNTester/js/TVEventHandlerExample.js
@@ -15,18 +15,6 @@ const ReactNative = require('react-native');
 
 const {Platform, View, Text, TouchableOpacity, TVEventHandler} = ReactNative;
 
-exports.framework = 'React';
-exports.title = 'TVEventHandler example';
-exports.description = 'iOS alerts and action sheets';
-exports.examples = [
-  {
-    title: 'TVEventHandler',
-    render() {
-      return <TVEventHandlerView />;
-    },
-  },
-];
-
 class TVEventHandlerView extends React.Component<
   $FlowFixMeProps,
   {
@@ -92,3 +80,15 @@ class TVEventHandlerView extends React.Component<
     }
   }
 }
+
+exports.framework = 'React';
+exports.title = 'TVEventHandler example';
+exports.description = 'iOS alerts and action sheets';
+exports.examples = [
+  {
+    title: 'TVEventHandler',
+    render() {
+      return <TVEventHandlerView />;
+    },
+  },
+];
diff --git a/RNTester/js/TabBarIOSBarStyleExample.js b/RNTester/js/TabBarIOSBarStyleExample.js
index a8dfd135c4ec..3456cd42d1d9 100644
--- a/RNTester/js/TabBarIOSBarStyleExample.js
+++ b/RNTester/js/TabBarIOSBarStyleExample.js
@@ -30,10 +30,6 @@ const base64Icon =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';
 
 class TabBarIOSBarStyleExample extends React.Component<{}> {
-  static title = '<TabBarIOS> - Custom Bar Style';
-  static description = 'Tab-based navigation.';
-  static displayName = 'TabBarIOSBarStyleExample';
-
   render() {
     return (
       <TabBarIOS barStyle="black">
@@ -58,4 +54,14 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = TabBarIOSBarStyleExample;
+exports.title = '<TabBarIOS> - Custom Bar Style';
+exports.description = 'Tab-based navigation.';
+exports.displayName = 'TabBarIOSBarStyleExample';
+exports.examples = [
+  {
+    title: 'Custom tab bar navigation',
+    render: function(): React.Element<typeof TabBarIOSBarStyleExample> {
+      return <TabBarIOSBarStyleExample />;
+    },
+  },
+];
diff --git a/RNTester/js/TabBarIOSExample.js b/RNTester/js/TabBarIOSExample.js
index 6fc9015ce2ed..e45b34184302 100644
--- a/RNTester/js/TabBarIOSExample.js
+++ b/RNTester/js/TabBarIOSExample.js
@@ -18,10 +18,6 @@ const base64Icon =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';
 
 class TabBarExample extends React.Component<{}, $FlowFixMeState> {
-  static title = '<TabBarIOS>';
-  static description = 'Tab-based navigation.';
-  static displayName = 'TabBarExample';
-
   state = {
     selectedTab: 'redTab',
     notifCount: 0,
@@ -100,4 +96,14 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = TabBarExample;
+exports.title = '<TabBarIOS>';
+exports.description = 'Tab-based navigation.';
+exports.displayName = 'TabBarExample';
+exports.examples = [
+  {
+    title: 'Simple tab navigation',
+    render: function(): React.Element<typeof TabBarExample> {
+      return <TabBarExample />;
+    },
+  },
+];
diff --git a/RNTester/js/TextExample.android.js b/RNTester/js/TextExample.android.js
index a8b23ad87b2c..580ef8c63e4f 100644
--- a/RNTester/js/TextExample.android.js
+++ b/RNTester/js/TextExample.android.js
@@ -71,9 +71,6 @@ class AttributeToggler extends React.Component<{}, $FlowFixMeState> {
 }
 
 class TextExample extends React.Component<{}> {
-  static title = '<Text>';
-  static description = 'Base component for rendering styled text.';
-
   render() {
     return (
       <RNTesterPage title="<Text>">
@@ -605,4 +602,13 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = TextExample;
+exports.title = '<Text>';
+exports.description = 'Base component for rendering styled text.';
+exports.examples = [
+  {
+    title: 'Basic text',
+    render: function(): React.Element<typeof TextExample> {
+      return <TextExample />;
+    },
+  },
+];
diff --git a/RNTester/js/TimePickerAndroidExample.js b/RNTester/js/TimePickerAndroidExample.js
index e2b56d9dcc6c..c14329e10eb0 100644
--- a/RNTester/js/TimePickerAndroidExample.js
+++ b/RNTester/js/TimePickerAndroidExample.js
@@ -22,9 +22,6 @@ const RNTesterBlock = require('./RNTesterBlock');
 const RNTesterPage = require('./RNTesterPage');
 
 class TimePickerAndroidExample extends React.Component {
-  static title = 'TimePickerAndroid';
-  static description = 'Standard Android time picker dialog';
-
   state = {
     isoFormatText: 'pick a time (24-hour format)',
     presetHour: 4,
@@ -117,4 +114,13 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = TimePickerAndroidExample;
+exports.title = 'TimePickerAndroid';
+exports.description = 'Standard Android time picker dialog';
+exports.examples = [
+  {
+    title: 'Simple time picker',
+    render: function(): React.Element<typeof TimePickerAndroidExample> {
+      return <TimePickerAndroidExample />;
+    },
+  },
+];
diff --git a/RNTester/js/ToastAndroidExample.android.js b/RNTester/js/ToastAndroidExample.android.js
index 7894ba0c3d31..ed01241b1144 100644
--- a/RNTester/js/ToastAndroidExample.android.js
+++ b/RNTester/js/ToastAndroidExample.android.js
@@ -18,9 +18,6 @@ const RNTesterBlock = require('RNTesterBlock');
 const RNTesterPage = require('RNTesterPage');
 
 class ToastExample extends React.Component<{}, $FlowFixMeState> {
-  static title = 'Toast Example';
-  static description =
-    'Example that demonstrates the use of an Android Toast to provide feedback.';
   state = {};
 
   render() {
@@ -123,4 +120,14 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = ToastExample;
+exports.title = 'Toast Example';
+exports.description =
+  'Example that demonstrates the use of an Android Toast to provide feedback.';
+exports.examples = [
+  {
+    title: 'Basic toast',
+    render: function(): React.Element<typeof ToastExample> {
+      return <ToastExample />;
+    },
+  },
+];
diff --git a/RNTester/js/ToolbarAndroidExample.android.js b/RNTester/js/ToolbarAndroidExample.android.js
index 84144fa5e901..3abb48a36c01 100644
--- a/RNTester/js/ToolbarAndroidExample.android.js
+++ b/RNTester/js/ToolbarAndroidExample.android.js
@@ -22,9 +22,6 @@ const Switch = require('Switch');
 const ToolbarAndroid = require('ToolbarAndroid');
 
 class ToolbarAndroidExample extends React.Component<{}, $FlowFixMeState> {
-  static title = '<ToolbarAndroid>';
-  static description = 'Examples of using the Android toolbar.';
-
   state = {
     actionText: 'Example app with toolbar component',
     toolbarSwitch: false,
@@ -174,4 +171,13 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = ToolbarAndroidExample;
+exports.title = '<ToolbarAndroid>';
+exports.description = 'Examples of using the Android toolbar.';
+exports.examples = [
+  {
+    title: 'Basic toolbar',
+    render: function(): React.Element<typeof ToolbarAndroidExample> {
+      return <ToolbarAndroidExample />;
+    },
+  },
+];
diff --git a/RNTester/js/TouchableExample.js b/RNTester/js/TouchableExample.js
index 5fa16ff05913..8ec4aa3f9431 100644
--- a/RNTester/js/TouchableExample.js
+++ b/RNTester/js/TouchableExample.js
@@ -32,108 +32,6 @@ const forceTouchAvailable =
     NativeModules.PlatformConstants.forceTouchAvailable) ||
   false;
 
-exports.displayName = (undefined: ?string);
-exports.description = 'Touchable and onPress examples.';
-exports.title = '<Touchable*> and onPress';
-exports.examples = [
-  {
-    title: '<TouchableHighlight>',
-    description:
-      'TouchableHighlight works by adding an extra view with a ' +
-      'black background under the single child view.  This works best when the ' +
-      'child view is fully opaque, although it can be made to work as a simple ' +
-      'background color change as well with the activeOpacity and ' +
-      'underlayColor props.',
-    render: function() {
-      return <TouchableHighlightBox />;
-    },
-  },
-  {
-    title: '<TouchableWithoutFeedback>',
-    render: function() {
-      return <TouchableWithoutFeedbackBox />;
-    },
-  },
-  {
-    title: 'TouchableNativeFeedback with Animated child',
-    description:
-      'TouchableNativeFeedback can have an AnimatedComponent as a' +
-      'direct child.',
-    platform: 'android',
-    render: function() {
-      const mScale = new Animated.Value(1);
-      Animated.timing(mScale, {toValue: 0.3, duration: 1000}).start();
-      const style = {
-        backgroundColor: 'rgb(180, 64, 119)',
-        width: 200,
-        height: 100,
-        transform: [{scale: mScale}],
-      };
-      return (
-        <View>
-          <View style={styles.row}>
-            <TouchableNativeFeedback>
-              <Animated.View style={style} />
-            </TouchableNativeFeedback>
-          </View>
-        </View>
-      );
-    },
-  },
-  {
-    title: '<Text onPress={fn}> with highlight',
-    render: function(): React.Element<any> {
-      return <TextOnPressBox />;
-    },
-  },
-  {
-    title: 'Touchable feedback events',
-    description:
-      '<Touchable*> components accept onPress, onPressIn, ' +
-      'onPressOut, and onLongPress as props.',
-    render: function(): React.Element<any> {
-      return <TouchableFeedbackEvents />;
-    },
-  },
-  {
-    title: 'Touchable delay for events',
-    description:
-      '<Touchable*> components also accept delayPressIn, ' +
-      'delayPressOut, and delayLongPress as props. These props impact the ' +
-      'timing of feedback events.',
-    render: function(): React.Element<any> {
-      return <TouchableDelayEvents />;
-    },
-  },
-  {
-    title: '3D Touch / Force Touch',
-    description:
-      'iPhone 6s and 6s plus support 3D touch, which adds a force property to touches',
-    render: function(): React.Element<any> {
-      return <ForceTouchExample />;
-    },
-    platform: 'ios',
-  },
-  {
-    title: 'Touchable Hit Slop',
-    description:
-      '<Touchable*> components accept hitSlop prop which extends the touch area ' +
-      'without changing the view bounds.',
-    render: function(): React.Element<any> {
-      return <TouchableHitSlop />;
-    },
-  },
-  {
-    title: 'Disabled Touchable*',
-    description:
-      '<Touchable*> components accept disabled prop which prevents ' +
-      'any interaction with component',
-    render: function(): React.Element<any> {
-      return <TouchableDisabled />;
-    },
-  },
-];
-
 class TouchableHighlightBox extends React.Component<{}, $FlowFixMeState> {
   state = {
     timesPressed: 0,
@@ -566,3 +464,105 @@ const styles = StyleSheet.create({
     color: 'blue',
   },
 });
+
+exports.displayName = (undefined: ?string);
+exports.description = 'Touchable and onPress examples.';
+exports.title = '<Touchable*> and onPress';
+exports.examples = [
+  {
+    title: '<TouchableHighlight>',
+    description:
+      'TouchableHighlight works by adding an extra view with a ' +
+      'black background under the single child view.  This works best when the ' +
+      'child view is fully opaque, although it can be made to work as a simple ' +
+      'background color change as well with the activeOpacity and ' +
+      'underlayColor props.',
+    render: function() {
+      return <TouchableHighlightBox />;
+    },
+  },
+  {
+    title: '<TouchableWithoutFeedback>',
+    render: function() {
+      return <TouchableWithoutFeedbackBox />;
+    },
+  },
+  {
+    title: 'TouchableNativeFeedback with Animated child',
+    description:
+      'TouchableNativeFeedback can have an AnimatedComponent as a' +
+      'direct child.',
+    platform: 'android',
+    render: function() {
+      const mScale = new Animated.Value(1);
+      Animated.timing(mScale, {toValue: 0.3, duration: 1000}).start();
+      const style = {
+        backgroundColor: 'rgb(180, 64, 119)',
+        width: 200,
+        height: 100,
+        transform: [{scale: mScale}],
+      };
+      return (
+        <View>
+          <View style={styles.row}>
+            <TouchableNativeFeedback>
+              <Animated.View style={style} />
+            </TouchableNativeFeedback>
+          </View>
+        </View>
+      );
+    },
+  },
+  {
+    title: '<Text onPress={fn}> with highlight',
+    render: function(): React.Element<any> {
+      return <TextOnPressBox />;
+    },
+  },
+  {
+    title: 'Touchable feedback events',
+    description:
+      '<Touchable*> components accept onPress, onPressIn, ' +
+      'onPressOut, and onLongPress as props.',
+    render: function(): React.Element<any> {
+      return <TouchableFeedbackEvents />;
+    },
+  },
+  {
+    title: 'Touchable delay for events',
+    description:
+      '<Touchable*> components also accept delayPressIn, ' +
+      'delayPressOut, and delayLongPress as props. These props impact the ' +
+      'timing of feedback events.',
+    render: function(): React.Element<any> {
+      return <TouchableDelayEvents />;
+    },
+  },
+  {
+    title: '3D Touch / Force Touch',
+    description:
+      'iPhone 6s and 6s plus support 3D touch, which adds a force property to touches',
+    render: function(): React.Element<any> {
+      return <ForceTouchExample />;
+    },
+    platform: 'ios',
+  },
+  {
+    title: 'Touchable Hit Slop',
+    description:
+      '<Touchable*> components accept hitSlop prop which extends the touch area ' +
+      'without changing the view bounds.',
+    render: function(): React.Element<any> {
+      return <TouchableHitSlop />;
+    },
+  },
+  {
+    title: 'Disabled Touchable*',
+    description:
+      '<Touchable*> components accept disabled prop which prevents ' +
+      'any interaction with component',
+    render: function(): React.Element<any> {
+      return <TouchableDisabled />;
+    },
+  },
+];
diff --git a/RNTester/js/ViewPagerAndroidExample.android.js b/RNTester/js/ViewPagerAndroidExample.android.js
index e90466160726..ebd6c104400b 100644
--- a/RNTester/js/ViewPagerAndroidExample.android.js
+++ b/RNTester/js/ViewPagerAndroidExample.android.js
@@ -92,10 +92,6 @@ class ProgressBar extends React.Component {
 }
 
 class ViewPagerAndroidExample extends React.Component {
-  static title = '<ViewPagerAndroid>';
-  static description =
-    'Container that allows to flip left and right between child views.';
-
   state = {
     page: 0,
     animationsAreEnabled: true,
@@ -291,4 +287,15 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = ViewPagerAndroidExample;
+exports.title = '<ViewPagerAndroid>';
+exports.description =
+  'Container that allows to flip left and right between child views.';
+
+exports.examples = [
+  {
+    title: 'Basic pager',
+    render(): React.Element<typeof ViewPagerAndroidExample> {
+      return <ViewPagerAndroidExample />;
+    },
+  },
+];
diff --git a/RNTester/js/WebSocketExample.js b/RNTester/js/WebSocketExample.js
index fdb35ca69adb..82ee4dbc53a9 100644
--- a/RNTester/js/WebSocketExample.js
+++ b/RNTester/js/WebSocketExample.js
@@ -125,9 +125,6 @@ type State = {
 };
 
 class WebSocketExample extends React.Component<any, any, State> {
-  static title = 'WebSocket';
-  static description = 'WebSocket API';
-
   state: State = {
     url: DEFAULT_WS_URL,
     httpUrl: DEFAULT_HTTP_URL,
@@ -347,4 +344,13 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = WebSocketExample;
+exports.title = 'WebSocket';
+exports.description = 'WebSocket API';
+exports.examples = [
+  {
+    title: 'Basic websocket',
+    render(): React.Element<typeof WebSocketExample> {
+      return <WebSocketExample />;
+    },
+  },
+];
diff --git a/RNTester/js/createExamplePage.js b/RNTester/js/createExamplePage.js
index 271057c3fb66..1b70fe5a91e9 100644
--- a/RNTester/js/createExamplePage.js
+++ b/RNTester/js/createExamplePage.js
@@ -13,12 +13,11 @@
 const React = require('react');
 
 const RNTesterExampleContainer = require('./RNTesterExampleContainer');
-
-import type {ExampleModule} from 'ExampleTypes';
+import type {RNTesterExample} from './Shared/RNTesterTypes';
 
 const createExamplePage = function(
   title: ?string,
-  exampleModule: ExampleModule,
+  exampleModule: RNTesterExample,
 ): React.ComponentType<any> {
   class ExamplePage extends React.Component<{}> {
     render() {