Upgraded to new React Context API

package.json

@@ -67,7 +67,7 @@
     "raf": "^3.4.0",
     "react": "^16.5.2",
     "react-dom": "^16.5.2",
-    "react-final-form": "^3.6.7",
+    "react-final-form": "^4.0.0",
     "rollup": "^0.66.6",
     "rollup-plugin-babel": "^4.0.1",
     "rollup-plugin-commonjs": "^9.2.0",
@@ -81,8 +81,9 @@
   "peerDependencies": {
     "final-form": ">=4.0.0",
     "final-form-arrays": ">=1.0.4",
+    "react-final-form": "^4.0.0",
     "prop-types": "^15.6.0",
-    "react": "^15.3.0 || ^16.0.0-0"
+    "react": "^16.3.0"
   },
   "jest": {
     "watchPlugins": [

src/FieldArray.js

@@ -1,19 +1,18 @@
 // @flow
 import * as React from 'react'
 import { polyfill } from 'react-lifecycles-compat'
-import PropTypes from 'prop-types'
 import {
   fieldSubscriptionItems,
   version as ffVersion,
   ARRAY_ERROR
 } from 'final-form'
 import { version as rffVersion } from 'react-final-form'
-import type { ReactContext } from 'react-final-form'
 import diffSubscription from './diffSubscription'
 import type { FieldSubscription, FieldState, FieldValidator } from 'final-form'
 import type { Mutators } from 'final-form-arrays'
 import type { FieldArrayProps as Props } from './types'
 import renderComponent from './renderComponent'
+import { withReactFinalForm } from 'react-final-form'
 export const version = '1.0.6'
 
 const versions = {
@@ -32,7 +31,6 @@ type State = {
 }
 
 class FieldArray extends React.Component<Props, State> {
-  context: ReactContext
   props: Props
   state: State
   mutators: Mutators
@@ -41,16 +39,16 @@ class FieldArray extends React.Component<Props, State> {
 
   static displayName = `ReactFinalFormFieldArray(${ffVersion})(${version})`
 
-  constructor(props: Props, context: ReactContext) {
-    super(props, context)
+  constructor(props: Props) {
+    super(props)
     let initialState
     // istanbul ignore next
-    if (process.env.NODE_ENV !== 'production' && !context.reactFinalForm) {
+    if (process.env.NODE_ENV !== 'production' && !props.reactFinalForm) {
       console.error(
         'Warning: FieldArray must be used inside of a ReactFinalForm component'
       )
     }
-    const { reactFinalForm } = this.context
+    const { reactFinalForm } = props
     if (reactFinalForm) {
       // avoid error, warning will alert developer to their mistake
       this.subscribe(props, (state: FieldState) => {
@@ -78,7 +76,7 @@ class FieldArray extends React.Component<Props, State> {
     { name, subscription }: Props,
     listener: (state: FieldState) => void
   ) => {
-    this.unsubscribe = this.context.reactFinalForm.registerField(
+    this.unsubscribe = this.props.reactFinalForm.registerField(
       name,
       listener,
       subscription ? { ...subscription, length: true } : all,
@@ -104,7 +102,7 @@ class FieldArray extends React.Component<Props, State> {
   }
 
   bindMutators = ({ name }: Props) => {
-    const { reactFinalForm } = this.context
+    const { reactFinalForm } = this.props
     if (reactFinalForm) {
       const { mutators } = reactFinalForm
       const hasMutators = !!(mutators && mutators.push && mutators.pop)
@@ -163,7 +161,7 @@ class FieldArray extends React.Component<Props, State> {
         fieldSubscriptionItems
       )
     ) {
-      if (this.context.reactFinalForm) {
+      if (this.props.reactFinalForm) {
         // avoid error, warning will alert developer to their mistake
         this.unsubscribe()
         this.subscribe(nextProps, this.notify)
@@ -201,8 +199,7 @@ class FieldArray extends React.Component<Props, State> {
       valid,
       visited,
       ...fieldStateFunctions
-    } =
-      this.state.state || {}
+    } = this.state.state || {}
     const meta = {
       active,
       dirty,
@@ -241,10 +238,6 @@ class FieldArray extends React.Component<Props, State> {
   }
 }
 
-FieldArray.contextTypes = {
-  reactFinalForm: PropTypes.object
-}
-
 polyfill(FieldArray)
 
-export default FieldArray
+export default withReactFinalForm(FieldArray)

src/types.js.flow

@@ -1,6 +1,6 @@
 // @flow
 import * as React from 'react'
-import type { FieldSubscription, FieldState } from 'final-form'
+import type { FieldSubscription, FieldState, FormApi } from 'final-form'
 
 export type FieldArrayRenderProps = {
   fields: {
@@ -44,5 +44,6 @@ export type FieldArrayProps = {
   name: string,
   subscription?: FieldSubscription,
   isEqual?: (any, any) => boolean,
-  validate?: (value: ?(any[]), allValues: Object) => ?any
+  validate?: (value: ?(any[]), allValues: Object) => ?any,
+  reactFinalForm: FormApi
 } & RenderableProps<FieldArrayRenderProps>