- Update folder structure of RNTester's JS directory. (#25013)

Summary:
Changes RNTester, first attempt in the direction of improving the RNTester overall. Related ticket: #24647

Changed the `js` directory of the RNTester to have the following structure:
```
- js
    - assets
    - components
    - examples
    - types
    - utils
```
* **assets**
_Any images, gifs, and media content_

* **components**
_All shared components_

* **examples**
_Example View/Components to be rendered by the App_

 * **types**
_Shared flow types_

 * **utils**
_Shared utilities_

## Changelog

[General] [Changed] - Update folder structure of RNTester's JS directory.
Pull Request resolved: #25013

Differential Revision: D15515773

Pulled By: cpojer

fbshipit-source-id: 0e4b6386127f338dca0ffe8c237073be53a9e221

.gitignore

@@ -73,3 +73,4 @@ RNTester/build
 # CocoaPods
 /template/ios/Pods/
 /template/ios/Podfile.lock
+RNTester/RNTesterPods.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

RNTester/js/RNTesterApp.android.js

@@ -26,18 +26,18 @@ const {
   UIManager,
   View,
 } = require('react-native');
-const RNTesterActions = require('./RNTesterActions');
-const RNTesterExampleContainer = require('./RNTesterExampleContainer');
-const RNTesterExampleList = require('./RNTesterExampleList');
+const RNTesterActions = require('./utils/RNTesterActions');
+const RNTesterExampleContainer = require('./components/RNTesterExampleContainer');
+const RNTesterExampleList = require('./components/RNTesterExampleList');
 /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found when
  * making Flow check .android.js files. */
-const RNTesterList = require('./RNTesterList');
-const RNTesterNavigationReducer = require('./RNTesterNavigationReducer');
-const URIActionMap = require('./URIActionMap');
+const RNTesterList = require('./utils/RNTesterList');
+const RNTesterNavigationReducer = require('./utils/RNTesterNavigationReducer');
+const URIActionMap = require('./utils/URIActionMap');
 
 const nativeImageSource = require('../../Libraries/Image/nativeImageSource');
 
-import type {RNTesterNavigationState} from './RNTesterNavigationReducer';
+import type {RNTesterNavigationState} from './utils/RNTesterNavigationReducer';
 
 UIManager.setLayoutAnimationEnabledExperimental(true);
 

RNTester/js/RNTesterApp.ios.js

@@ -23,17 +23,17 @@ const {
   View,
   YellowBox,
 } = require('react-native');
-const RNTesterActions = require('./RNTesterActions');
-const RNTesterExampleContainer = require('./RNTesterExampleContainer');
-const RNTesterExampleList = require('./RNTesterExampleList');
-const RNTesterList = require('./RNTesterList.ios');
-const RNTesterNavigationReducer = require('./RNTesterNavigationReducer');
-const SnapshotViewIOS = require('./SnapshotViewIOS.ios');
-const URIActionMap = require('./URIActionMap');
-
-import type {RNTesterExample} from './Shared/RNTesterTypes';
-import type {RNTesterAction} from './RNTesterActions';
-import type {RNTesterNavigationState} from './RNTesterNavigationReducer';
+const RNTesterActions = require('./utils/RNTesterActions');
+const RNTesterExampleContainer = require('./components/RNTesterExampleContainer');
+const RNTesterExampleList = require('./components/RNTesterExampleList');
+const RNTesterList = require('./utils/RNTesterList.ios');
+const RNTesterNavigationReducer = require('./utils/RNTesterNavigationReducer');
+const SnapshotViewIOS = require('./examples/Snapshot/SnapshotViewIOS.ios');
+const URIActionMap = require('./utils/URIActionMap');
+
+import type {RNTesterExample} from './types/RNTesterTypes';
+import type {RNTesterAction} from './utils/RNTesterActions';
+import type {RNTesterNavigationState} from './utils/RNTesterNavigationReducer';
 
 type Props = {
   exampleFromAppetizeParams: string,
@@ -168,10 +168,10 @@ const styles = StyleSheet.create({
 });
 
 AppRegistry.registerComponent('SetPropertiesExampleApp', () =>
-  require('./SetPropertiesExampleApp'),
+  require('./examples/SetPropertiesExample/SetPropertiesExampleApp'),
 );
 AppRegistry.registerComponent('RootViewSizeFlexibilityExampleApp', () =>
-  require('./RootViewSizeFlexibilityExampleApp'),
+  require('./examples/RootViewSizeFlexibilityExample/RootViewSizeFlexibilityExampleApp'),
 );
 AppRegistry.registerComponent('RNTesterApp', () => RNTesterApp);
 

RNTester/js/ListExampleShared.js → RNTester/js/components/ListExampleShared.js

@@ -181,18 +181,18 @@ class Spindicator extends React.PureComponent<$FlowFixMeProps> {
 }
 
 const THUMB_URLS = [
-  require('./Thumbnails/like.png'),
-  require('./Thumbnails/dislike.png'),
-  require('./Thumbnails/call.png'),
-  require('./Thumbnails/fist.png'),
-  require('./Thumbnails/bandaged.png'),
-  require('./Thumbnails/flowers.png'),
-  require('./Thumbnails/heart.png'),
-  require('./Thumbnails/liking.png'),
-  require('./Thumbnails/party.png'),
-  require('./Thumbnails/poke.png'),
-  require('./Thumbnails/superlike.png'),
-  require('./Thumbnails/victory.png'),
+  require('../assets/like.png'),
+  require('../assets/dislike.png'),
+  require('../assets/call.png'),
+  require('../assets/fist.png'),
+  require('../assets/bandaged.png'),
+  require('../assets/flowers.png'),
+  require('../assets/heart.png'),
+  require('../assets/liking.png'),
+  require('../assets/party.png'),
+  require('../assets/poke.png'),
+  require('../assets/superlike.png'),
+  require('../assets/victory.png'),
 ];
 
 const LOREM_IPSUM =

RNTester/js/RNTesterButton.js → RNTester/js/components/RNTesterButton.js

@@ -13,7 +13,7 @@
 const React = require('react');
 const {StyleSheet, Text, TouchableHighlight} = require('react-native');
 
-import type {PressEvent} from '../../Libraries/Types/CoreEventTypes';
+import type {PressEvent} from '../../../Libraries/Types/CoreEventTypes';
 
 type Props = $ReadOnly<{|
   children?: React.Node,

RNTester/js/RNTesterExampleList.js → RNTester/js/components/RNTesterExampleList.js

@@ -19,11 +19,11 @@ const {
   TouchableHighlight,
   View,
 } = require('react-native');
-const RNTesterActions = require('./RNTesterActions');
+const RNTesterActions = require('../utils/RNTesterActions');
 const RNTesterExampleFilter = require('./RNTesterExampleFilter');
 
-import type {RNTesterExample} from './Shared/RNTesterTypes';
-import type {ViewStyleProp} from '../../Libraries/StyleSheet/StyleSheet';
+import type {RNTesterExample} from '../types/RNTesterTypes';
+import type {ViewStyleProp} from '../../../Libraries/StyleSheet/StyleSheet';
 
 type Props = {
   onNavigate: Function,

RNTester/js/RNTesterSettingSwitchRow.js → RNTester/js/components/RNTesterSettingSwitchRow.js

@@ -12,7 +12,7 @@
 
 const React = require('react');
 const {StyleSheet, Switch, Text, View} = require('react-native');
-const RNTesterStatePersister = require('./RNTesterStatePersister');
+const RNTesterStatePersister = require('../utils/RNTesterStatePersister');
 
 class RNTesterSettingSwitchRow extends React.Component<
   $FlowFixMeProps,

RNTester/js/Shared/TextInlineView.js → RNTester/js/components/TextInlineView.js

@@ -18,7 +18,8 @@ function Basic() {
     <Text>
       This text contains an inline blue view{' '}
       <View style={{width: 25, height: 25, backgroundColor: 'steelblue'}} /> and
-      an inline image <Image source={require('../flux.png')} />. Neat, huh?
+      an inline image <Image source={require('../assets/flux.png')} />. Neat,
+      huh?
     </Text>
   );
 }

RNTester/js/createExamplePage.js → RNTester/js/components/createExamplePage.js

@@ -13,7 +13,7 @@
 const React = require('react');
 
 const RNTesterExampleContainer = require('./RNTesterExampleContainer');
-import type {RNTesterExample} from './Shared/RNTesterTypes';
+import type {RNTesterExample} from '../types/RNTesterTypes';
 
 const createExamplePage = function(
   title: ?string,

RNTester/js/AccessibilityAndroidExample.android.js → RNTester/js/examples/Accessibility/AccessibilityAndroidExample.android.js

@@ -17,8 +17,8 @@ const {
   TouchableWithoutFeedback,
 } = require('react-native');
 
-const RNTesterBlock = require('./RNTesterBlock');
-const RNTesterPage = require('./RNTesterPage');
+const RNTesterBlock = require('../../components/RNTesterBlock');
+const RNTesterPage = require('../../components/RNTesterPage');
 
 const importantForAccessibilityValues = [
   'auto',

RNTester/js/AccessibilityExample.js → RNTester/js/examples/Accessibility/AccessibilityExample.js

@@ -22,7 +22,7 @@ const {
   Platform,
 } = require('react-native');
 
-const RNTesterBlock = require('./RNTesterBlock');
+const RNTesterBlock = require('../../components/RNTesterBlock');
 
 class AccessibilityExample extends React.Component {
   render() {

RNTester/js/AccessibilityIOSExample.js → RNTester/js/examples/Accessibility/AccessibilityIOSExample.js

@@ -13,7 +13,7 @@
 const React = require('react');
 const {Text, View, Alert} = require('react-native');
 
-const RNTesterBlock = require('./RNTesterBlock');
+const RNTesterBlock = require('../../components/RNTesterBlock');
 
 type Props = $ReadOnly<{||}>;
 class AccessibilityIOSExample extends React.Component<Props> {

RNTester/js/AlertExample.js → RNTester/js/examples/Alert/AlertExample.js

@@ -18,7 +18,7 @@ const {
   View,
 } = require('react-native');
 
-const RNTesterBlock = require('./RNTesterBlock');
+const RNTesterBlock = require('../../components/RNTesterBlock');
 
 // corporate ipsum > lorem ipsum
 const alertMessage =

RNTester/js/AnimatedExample.js → RNTester/js/examples/Animated/AnimatedExample.js

@@ -12,7 +12,7 @@
 
 const React = require('react');
 const {Animated, Easing, StyleSheet, Text, View} = require('react-native');
-const RNTesterButton = require('./RNTesterButton');
+const RNTesterButton = require('../../components/RNTesterButton');
 
 const styles = StyleSheet.create({
   content: {
@@ -259,7 +259,7 @@ exports.examples = [
             Press to Spin it!
           </RNTesterButton>
           <Animated.Image
-            source={require('./bunny.png')}
+            source={require('../../assets/bunny.png')}
             style={[
               styles.rotatingImage,
               {

RNTester/js/AnimatedGratuitousApp/AnExChained.js → RNTester/js/examples/Animated/AnimatedGratuitousApp/AnExChained.js

@@ -99,11 +99,11 @@ const styles = StyleSheet.create({
 });
 
 const CHAIN_IMGS = [
-  require('../hawk.png'),
-  require('../bunny.png'),
-  require('../relay.png'),
-  require('../hawk.png'),
-  require('../bunny.png'),
+  require('../../../assets/hawk.png'),
+  require('../../../assets/bunny.png'),
+  require('../../../assets/relay.png'),
+  require('../../../assets/hawk.png'),
+  require('../../../assets/bunny.png'),
 ];
 
 module.exports = AnExChained;

RNTester/js/AnimatedGratuitousApp/AnExTilt.js → RNTester/js/examples/Animated/AnimatedGratuitousApp/AnExTilt.js

@@ -114,7 +114,7 @@ class AnExTilt extends React.Component<Object, any> {
               },
             ],
           }}
-          source={require('./trees.jpg')}
+          source={require('../../../assets/trees.jpg')}
         />
       </Animated.View>
     );

RNTester/js/BoxShadowExample.js → RNTester/js/examples/BoxShadow/BoxShadowExample.js

@@ -79,7 +79,7 @@ exports.examples = [
     render() {
       return (
         <Image
-          source={require('./hawk.png')}
+          source={require('../../assets/hawk.png')}
           style={[styles.box, styles.shadow1, styles.shadowImage]}
         />
       );

RNTester/js/DatePickerAndroidExample.js → RNTester/js/examples/DatePicker/DatePickerAndroidExample.js

@@ -17,8 +17,8 @@ const {
   TouchableWithoutFeedback,
 } = require('react-native');
 
-const RNTesterBlock = require('./RNTesterBlock');
-const RNTesterPage = require('./RNTesterPage');
+const RNTesterBlock = require('../../components/RNTesterBlock');
+const RNTesterPage = require('../../components/RNTesterPage');
 
 type Props = $ReadOnly<{||}>;
 type State = {|

RNTester/js/FlatListExample.js → RNTester/js/examples/FlatList/FlatListExample.js

@@ -10,14 +10,14 @@
 
 'use strict';
 
-import type {Item} from './ListExampleShared';
+import type {Item} from '../../components/ListExampleShared';
 
 const React = require('react');
 const {Alert, Animated, StyleSheet, View} = require('react-native');
 
-const RNTesterPage = require('./RNTesterPage');
+const RNTesterPage = require('../../components/RNTesterPage');
 
-const infoLog = require('../../Libraries/Utilities/infoLog');
+const infoLog = require('../../../../Libraries/Utilities/infoLog');
 
 const {
   FooterComponent,
@@ -32,7 +32,7 @@ const {
   getItemLayout,
   pressItem,
   renderSmallSwitchOption,
-} = require('./ListExampleShared');
+} = require('../../components/ListExampleShared');
 
 const VIEWABILITY_CONFIG = {
   minimumViewTime: 3000,