- 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: https://github.com/facebook/react-native/pull/25013 Differential Revision: D15515773 Pulled By: cpojer fbshipit-source-id: 0e4b6386127f338dca0ffe8c237073be53a9e221
2025-11-01 09:14:26 +00:00 · 2019-05-28 08:39:18 -07:00
parent 54abe1f599
commit 3945f10561
148 changed files with 246 additions and 353 deletions
@@ -0,0 +1,100 @@
+/**
+ * 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';
+
+const React = require('react');
+const {ProgressBarAndroid: ProgressBar} = require('react-native');
+const RNTesterBlock = require('../../components/RNTesterBlock');
+const RNTesterPage = require('../../components/RNTesterPage');
+
+import type {ProgressBarAndroidProps} from '../../../../Libraries/Components/ProgressBarAndroid/ProgressBarAndroid';
+
+type MovingBarProps = $ReadOnly<{|
+  ...$Diff<
+    ProgressBarAndroidProps,
+    {
+      progress: ?number,
+    },
+  >,
+  indeterminate: false,
+|}>;
+
+type MovingBarState = {
+  progress: number,
+};
+
+class MovingBar extends React.Component<MovingBarProps, MovingBarState> {
+  _intervalID: ?IntervalID = null;
+
+  state = {
+    progress: 0,
+  };
+
+  componentDidMount() {
+    this._intervalID = setInterval(() => {
+      const progress = (this.state.progress + 0.02) % 1;
+      this.setState({progress});
+    }, 50);
+  }
+
+  componentWillUnmount() {
+    if (this._intervalID != null) {
+      clearInterval(this._intervalID);
+    }
+  }
+
+  render() {
+    return <ProgressBar progress={this.state.progress} {...this.props} />;
+  }
+}
+
+class ProgressBarAndroidExample extends React.Component<{}> {
+  render() {
+    return (
+      <RNTesterPage title="ProgressBar Examples">
+        <RNTesterBlock title="Horizontal Indeterminate ProgressBar">
+          {/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
+           * found when making Flow check .android.js files. */}
+          <ProgressBar styleAttr="Horizontal" />
+        </RNTesterBlock>
+
+        <RNTesterBlock title="Horizontal ProgressBar">
+          <MovingBar styleAttr="Horizontal" indeterminate={false} />
+        </RNTesterBlock>
+
+        <RNTesterBlock title="Horizontal Black Indeterminate ProgressBar">
+          {/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
+           * found when making Flow check .android.js files. */}
+          <ProgressBar styleAttr="Horizontal" color="black" />
+        </RNTesterBlock>
+
+        <RNTesterBlock title="Horizontal Blue ProgressBar">
+          <MovingBar
+            styleAttr="Horizontal"
+            indeterminate={false}
+            color="blue"
+          />
+        </RNTesterBlock>
+      </RNTesterPage>
+    );
+  }
+}
+
+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 />;
+    },
+  },
+];