diff --git a/Libraries/Experimental/IncrementalExample.js b/Libraries/Experimental/IncrementalExample.js
deleted file mode 100644
index cf94088afac..00000000000
--- a/Libraries/Experimental/IncrementalExample.js
+++ /dev/null
@@ -1,202 +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';
-
-const React = require('react');
-const ReactNative = require('react-native');
-const {
- InteractionManager,
- ScrollView,
- StyleSheet,
- Text,
- TouchableOpacity,
- View,
-} = ReactNative;
-
-const Incremental = require('./Incremental');
-const IncrementalGroup = require('./IncrementalGroup');
-const IncrementalPresenter = require('./IncrementalPresenter');
-
-const JSEventLoopWatchdog = require('../Interaction/JSEventLoopWatchdog');
-
-const performanceNow = require('fbjs/lib/performanceNow');
-
-InteractionManager.setDeadline(1000);
-JSEventLoopWatchdog.install({thresholdMS: 200});
-
-let totalWidgets = 0;
-
-class SlowWidget extends React.Component<
- $FlowFixMeProps,
- {
- ctorTimestamp: number,
- timeToMount: number,
- ...
- },
-> {
- constructor(props, context) {
- super(props, context);
- this.state = {
- ctorTimestamp: performanceNow(),
- timeToMount: 0,
- };
- }
- render() {
- this.state.timeToMount === 0 && burnCPU(20);
- return (
-
-
- {`${this.state.timeToMount || '?'} ms`}
-
-
- );
- }
- componentDidMount() {
- const timeToMount = performanceNow() - this.state.ctorTimestamp;
- this.setState({timeToMount});
- totalWidgets++;
- }
-}
-
-let imHandle;
-function startInteraction() {
- imHandle = InteractionManager.createInteractionHandle();
-}
-function stopInteraction() {
- InteractionManager.clearInteractionHandle(imHandle);
-}
-
-function Block(props: Object) {
- const IncrementalContainer = props.stream
- ? IncrementalGroup
- : IncrementalPresenter;
- return (
-
-
-
-
- {props.idx + ': ' + (props.stream ? 'Streaming' : 'Presented')}
-
- {props.children}
-
-
-
- );
-}
-
-const Row = (props: Object) => ;
-
-class IncrementalExample extends React.Component {
- static title: string = '';
- static description: string =
- 'Enables incremental rendering of complex components.';
- start: number;
- constructor(props: mixed, context: mixed) {
- super(props, context);
- this.start = performanceNow();
- this.state = {
- stats: null,
- };
- (this: any)._onDone = this._onDone.bind(this);
- }
- _onDone() {
- const onDoneElapsed = performanceNow() - this.start;
- setTimeout(() => {
- const stats = {
- onDoneElapsed,
- totalWidgets,
- ...JSEventLoopWatchdog.getStats(),
- setTimeoutElapsed: performanceNow() - this.start,
- };
- stats.avgStall = stats.totalStallTime / stats.stallCount;
- this.setState({stats});
- console.log('onDone:', stats);
- }, 0);
- }
- render(): React.Node {
- return (
-
-
-
- Press and hold on a row to pause rendering.
-
- {this.state.stats && (
- Finished: {JSON.stringify(this.state.stats, null, 2)}
- )}
- {Array(8)
- .fill()
- .map((_, blockIdx) => {
- return (
-
- {Array(4)
- .fill()
- .map((_b, rowIdx) => (
-
- {Array(14)
- .fill()
- .map((_c, widgetIdx) => (
-
-
-
- ))}
-
- ))}
-
- );
- })}
-
-
- );
- }
-}
-
-function burnCPU(milliseconds) {
- const start = performanceNow();
- while (performanceNow() < start + milliseconds) {}
-}
-
-const styles = StyleSheet.create({
- scrollView: {
- margin: 10,
- backgroundColor: 'white',
- flex: 1,
- },
- headerText: {
- fontSize: 20,
- margin: 10,
- },
- block: {
- borderRadius: 6,
- borderWidth: 2,
- borderColor: '#a52a2a',
- padding: 14,
- margin: 5,
- backgroundColor: 'white',
- },
- row: {
- flexDirection: 'row',
- },
- widgetContainer: {
- backgroundColor: '#dddddd',
- padding: 2,
- margin: 2,
- },
- widgetText: {
- color: 'black',
- fontSize: 4,
- },
-});
-
-module.exports = IncrementalExample;
diff --git a/Libraries/Experimental/IncrementalGroup.js b/Libraries/Experimental/IncrementalGroup.js
deleted file mode 100644
index 53f11d8d06f..00000000000
--- a/Libraries/Experimental/IncrementalGroup.js
+++ /dev/null
@@ -1,80 +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';
-
-const Incremental = require('./Incremental');
-const React = require('react');
-
-const PropTypes = require('prop-types');
-
-const infoLog = require('../Utilities/infoLog');
-
-let _groupCounter = -1;
-const DEBUG = false;
-
-import type {Props, Context} from './Incremental';
-
-/**
- * WARNING: EXPERIMENTAL. Breaking changes will probably happen a lot and will
- * not be reliably announced. The whole thing might be deleted, who knows? Use
- * at your own risk.
- *
- * `` components must be wrapped in an `` (e.g.
- * via ``) in order to provide the incremental group
- * context, otherwise they will do nothing.
- *
- * See Incremental.js for more info.
- */
-class IncrementalGroup extends React.Component<
- Props & {disabled?: boolean, ...},
-> {
- context: Context;
- _groupInc: string;
- UNSAFE_componentWillMount() {
- this._groupInc = `g${++_groupCounter}-`;
- DEBUG && infoLog('create IncrementalGroup with id ' + this.getGroupId());
- }
-
- getGroupId(): string {
- const ctx = this.context.incrementalGroup;
- const prefix = ctx ? ctx.groupId + ':' : '';
- return prefix + this._groupInc + this.props.name;
- }
-
- getChildContext(): Context {
- if (this.props.disabled || this.context.incrementalGroupEnabled === false) {
- return {
- incrementalGroupEnabled: false,
- incrementalGroup: null,
- };
- }
- return {
- incrementalGroupEnabled: true,
- incrementalGroup: {
- groupId: this.getGroupId(),
- incrementalCount: -1,
- },
- };
- }
-
- render(): React.Node {
- return (
-
- );
- }
-}
-IncrementalGroup.contextTypes = {
- incrementalGroup: PropTypes.object,
- incrementalGroupEnabled: PropTypes.bool,
-};
-IncrementalGroup.childContextTypes = IncrementalGroup.contextTypes;
-
-module.exports = IncrementalGroup;
diff --git a/Libraries/Experimental/IncrementalPresenter.js b/Libraries/Experimental/IncrementalPresenter.js
deleted file mode 100644
index 74e147e998b..00000000000
--- a/Libraries/Experimental/IncrementalPresenter.js
+++ /dev/null
@@ -1,102 +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';
-
-const IncrementalGroup = require('./IncrementalGroup');
-const PropTypes = require('prop-types');
-const React = require('react');
-const View = require('../Components/View/View');
-
-import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
-import type {LayoutEvent} from '../Types/CoreEventTypes';
-import type {Context} from './Incremental';
-
-/**
- * WARNING: EXPERIMENTAL. Breaking changes will probably happen a lot and will
- * not be reliably announced. The whole thing might be deleted, who knows? Use
- * at your own risk.
- *
- * `` can be used to group sets of `` renders
- * such that they are initially invisible and removed from layout until all
- * descendants have finished rendering, at which point they are drawn all at once
- * so the UI doesn't jump around during the incremental rendering process.
- *
- * See Incremental.js for more info.
- */
-type Props = $ReadOnly<{|
- name: string,
- disabled?: boolean,
- onDone?: () => mixed,
- onLayout?: (event: LayoutEvent) => mixed,
- style?: ViewStyleProp,
- children?: React.Node,
-|}>;
-
-class IncrementalPresenter extends React.Component {
- context: Context;
- _isDone: boolean;
-
- static contextTypes:
- | any
- | {|
- incrementalGroup: React$PropType$Primitive,
- incrementalGroupEnabled: React$PropType$Primitive,
- |} = {
- incrementalGroup: PropTypes.object,
- incrementalGroupEnabled: PropTypes.bool,
- };
-
- constructor(props: Props, context: Context) {
- super(props, context);
- this._isDone = false;
- (this: any).onDone = this.onDone.bind(this);
- }
- onDone() {
- this._isDone = true;
- if (
- this.props.disabled !== true &&
- this.context.incrementalGroupEnabled !== false
- ) {
- // Avoid expensive re-renders and use setNativeProps
- this.refs.view.setNativeProps({
- style: [this.props.style, {opacity: 1, position: 'relative'}],
- });
- }
- this.props.onDone && this.props.onDone();
- }
- render(): React.Node {
- let style: ViewStyleProp;
- if (
- this.props.disabled !== true &&
- this.context.incrementalGroupEnabled !== false &&
- !this._isDone
- ) {
- style = [this.props.style, {opacity: 0, position: 'absolute'}];
- } else {
- style = this.props.style;
- }
- return (
-
-
-
- );
- }
-}
-
-module.exports = IncrementalPresenter;