RNTester UI Redesign (#29685)

Summary:
This Pull request adds the UI changes to the RNTester app as discussed in the MLH Fellowship.

This list is not exhaustive.

- The initial App screen is redesigned.
  - A bottom Navbar has been added.
   - Filter pills are added.
   - The list card UI is updated.

- The example page UI is updated.

- Recently Viewed Sections are added. It shows the last 5 recently viewed components/APIs.

- Bookmarking functionality is added.

- The documentation URL is added to the example page.

- RNTester doesn't lose its state on a hard refresh (even on iOS).

<img width="373" src="https://user-images.githubusercontent.com/22813027/90530113-20346180-e192-11ea-8ef6-789fa25b402b.png" />
<img width="373" src="https://user-images.githubusercontent.com/22813027/90530112-20346180-e192-11ea-9539-706b540fcc5f.png" />
<img width="373" src="https://user-images.githubusercontent.com/22813027/90530100-1d397100-e192-11ea-8836-b88070643233.png" />
<img width="373" src="https://user-images.githubusercontent.com/22813027/90530110-1f9bcb00-e192-11ea-936b-64ee75fa4289.png" />

Pull Request resolved: #29685

Test Plan:
Imported from GitHub, without a `Test Plan:` line.

{F302717939}

Note: this failed **before** this diff too:

{F302745716}

Reviewed By: mdvacca, cpojer

Differential Revision: D23240434

fbshipit-source-id: 65e2766a6a097eca0e0d0fda8dadf6871e9276c2

Co-authored-by: agarwalmanya <manya18ag@gmail.com>
Co-authored-by: chirag-singhal <csinghal208@gmail.com>
Co-authored-by: Ansh Godha <ag759@cornell.edu>
Co-authored-by: Yash Kumar Verma <yk.verma2000@gmail.com>
Co-authored-by: Sanskar Jethi <sansyrox@gmail.com>
Co-authored-by: Aniketh Saha <anik220798@gmail.com>
Co-authored-by: Xtremilicious <nilarjundas@outlook.com>
Co-authored-by: Jani Evakallio <jani.evakallio@gmail.com>

Author: 9 people

packages/rn-tester/e2e/__tests__/Button-test.js

@@ -18,8 +18,8 @@ describe('Button', () => {
   beforeAll(async () => {
     await device.reloadReactNative();
     await openComponentWithLabel(
-      '<Button>',
-      '<Button> Simple React Native button component.',
+      'Button',
+      'Button Simple React Native button component.',
     );
   });
 

packages/rn-tester/e2e/__tests__/DatePickerIOS-test.js

@@ -19,8 +19,8 @@ describe('DatePickerIOS', () => {
   beforeAll(async () => {
     await device.reloadReactNative();
     await openComponentWithLabel(
-      '<DatePickerIOS>',
-      '<DatePickerIOS> Select dates and times using the native UIDatePicker.',
+      'DatePickerIOS',
+      'DatePickerIOS Select dates and times using the native UIDatePicker.',
     );
   });
 

packages/rn-tester/e2e/__tests__/Picker-test.js

@@ -18,8 +18,8 @@ describe('Picker', () => {
   beforeAll(async () => {
     await device.reloadReactNative();
     await openComponentWithLabel(
-      '<Picker>',
-      '<Picker> Provides multiple options to choose from, using either a dropdown menu or a dialog.',
+      'Picker',
+      'Picker Provides multiple options to choose from, using either a dropdown menu or a dialog.',
     );
   });
 

packages/rn-tester/e2e/__tests__/TextInput-test.js

@@ -18,7 +18,7 @@ describe('TextInput', () => {
   beforeAll(async () => {
     await device.reloadReactNative();
     await openComponentWithLabel(
-      '<TextInput>',
+      'TextInput',
       'Single and multi-line text inputs.',
     );
   });

packages/rn-tester/e2e/__tests__/Touchable-test.js

@@ -18,8 +18,8 @@ describe('Touchable', () => {
   beforeAll(async () => {
     await device.reloadReactNative();
     await openComponentWithLabel(
-      '<Touchable*',
-      '<Touchable*> and onPress Touchable and onPress examples.',
+      'Touchable*',
+      'Touchable* and onPress Touchable and onPress examples.',
     );
   });
 

packages/rn-tester/e2e/test-init.js

@@ -11,7 +11,7 @@
 /* global device */
 
 const detox = require('detox');
-const config = require('../../package.json').detox;
+const config = require('../../../package.json').detox;
 const adapter = require('detox/runners/jest/adapter');
 jest.setTimeout(120000);
 jasmine.getEnv().addReporter(adapter);