bvaughn

function createLittleKeyPool() {
  const availableKeys = [];
  const inUseKeys = [];

  let previousCycle = null;
  let keyCounter = 0;

  function releaseKeys({ startIndex, stopIndex }) {
    if (previousCycle !== null) {
      const {

bvaughn

/**
 * Copyright (c) 2013-present, Facebook, Inc.
 *
 * @emails react-core
 */

'use strict';

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

bvaughn

import now from 'performance-now';
import raf from 'raf';
import { Component, PropTypes } from 'react';

export default class Transition extends Component {
  static propTypes = {
    active: PropTypes.bool.isRequired,
    children: PropTypes.func.isRequired,
    duration: PropTypes.number.isRequired,
    fromValue: PropTypes.number.isRequired,

bvaughn

function createHOC(SomeComponent) {
  class WrapperClass extends React.Component {
    render() {
      return <SomeComponent {...this.props} ref={this.props.forwardedRef} />;
    }
  }

  return Ref.forward((props, ref) => (
    <WrapperClass {...props} forwardedRef={ref} />
  ));

bvaughn

class Example extends React.Component {
  // Store the has-been-requested flag in state, since side-effects are tied to a particular render.
  // Since this value is managed by React, this will make sure it gets set/reset correctly.
  state = {
    sideEffectData: {
      hasBeenRequested: false,
    }
  };

  componentDidMount() {

bvaughn

I've gotten a couple of questions about how the RN sync process works, so I thought I'd write up a high level overview of the current process and some of its challenges.

Sources of truth

As far as JavaScript goes, there are a couple of things that live outside of the React Native GitHub repository that get auto-synced in:

• React (core)
• ReactNative renderer
• Other things (e.g. component types like View, Text, the Animated library, StyleSheet, etc.)

The source of truth for React core is GitHub (https://github.com/facebook/react). It gets published to NPM and React Native depends on it via an NPM dependency. e.g. the most recently release of RN (55) depends on React core 16.3.1

bvaughn

/** @license React v16.3.1
 * react-test-renderer.production.min.js
 *
 * Copyright (c) 2013-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
'use strict';(function(aa,h){"object"===typeof exports&&"undefined"!==typeof module?module.exports=h(require("react")):"function"===typeof define&&define.amd?define(["react"],h):aa.ReactTestRenderer=h(aa.React)})(this,function(aa){function h(a){for(var b=arguments.length-1,d="http://reactjs.org/docs/error-decoder.html?invariant\x3d"+a,c=0;c<b;c++)d+="\x26args[]\x3d"+encodeURIComponent(arguments[c+1]);bb(!1,"Minified React error #"+a+"; visit %s for the full message or use the non-minified dev environment for full errors and additional helpful warnings. ",
d)}function ba(a){if(null===a||"undefined"===typeof a)return null;a=cb&&a[cb]||a["@@iterator"];return"function"===typeof a?a:null}function ca(a){a=a.type;if("function"===typeof a)return a.displayName||a.name;if("

bvaughn

/** @license React v16.3.1
 * react-test-renderer.development.js
 *
 * Copyright (c) 2013-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

'use strict';

bvaughn

Replacing TestUtils.mockComponent()

TestUtils.mockComponent() has been confusing to React users because it relies on Jest-specific features, and only works when Jest module mocking is enabled. Additionally, it was broken for common patterns like functional components. For these reasons we are removing it from the React TestUtils package.

If you depend on it, you can copy and paste this drop-in replacement into your project:

function mockComponent(component, mockTagName) {
  mockTagName = mockTagName || component.mockTagName || 'div';

bvaughn

import React, { Component, Placeholder } from 'react';
import { unstable_deferredUpdates } from 'react-dom';
import logo from './logo.svg';
import {createCache, createResource} from 'simple-cache-provider';
import { track } from "interaction-tracking";

const fetchUserList = () =>
  fetch('https://jsonplaceholder.typicode.com/users')
    .then(data => data.json());