Merge pull request #2 from bamlab/fix/setFormikInitialValue

fix: set input initial value by default

Author: Almouro

README.md

@@ -18,6 +18,7 @@ This repository is a set of high order components designed to help you take cont
 - [Advanced Example](#advanced-example)
 - [API](#api)
   - [makeReactNativeField](#makereactnativefield)
+  - [setFormikInitialValue](#setFormikInitialValue)
   - [withError](#witherror)
   - [withFocus](#withfocus)
   - [withFormik](#withformik)
@@ -83,7 +84,7 @@ export default class MaterialTextInput extends React.PureComponent {
 ### Create our form logic
 
 Compose our input with high order components to make it awesome.
-`react-native-formik` exports as default `compose(withInputTypeProps, withError, withTouched, makeReactNativeField);`.
+`react-native-formik` exports as default `compose(withInputTypeProps, setFormikInitialValue, withError, withTouched, makeReactNativeField);`.
 
 Let's add in `withNextInputAutoFocusInput`:
 
@@ -254,6 +255,12 @@ export default props => {
 };
 ```
 
+### setFormikInitialValue
+
+Set Input initial value to `""` to Formik without having to use `initialValues` prop.
+
+Especially it allows validation of untouched inputs when pressing submit.
+
 ### withError
 
 Pass in the Formik error for the input as a prop.

index.js

@@ -1,4 +1,5 @@
 import { compose } from "recompose";
+import setFormikInitialValue from "./src/setFormikInitialValue";
 import withError from "./src/withError";
 import withFocus from "./src/withFocus";
 import withFormik from "./src/withFormik";
@@ -7,13 +8,14 @@ import withTouched from "./src/withTouched";
 import makeReactNativeField from "./src/makeReactNativeField";
 import { withNextInputAutoFocusForm, withNextInputAutoFocusInput } from "./src/withNextInputAutoFocus";
 
-const makeInputsGreatAgain = compose(withInputTypeProps, withError, withTouched, makeReactNativeField);
+const makeInputsGreatAgain = compose(withInputTypeProps, setFormikInitialValue, withError, withTouched, makeReactNativeField);
 
 export default makeInputsGreatAgain;
 
 export {
   makeInputsGreatAgain,
   makeReactNativeField,
+  setFormikInitialValue,
   withError,
   withFocus,
   withFormik,

src/__tests__/setFormikInitialValue.js

@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { compose, withContext } from "recompose";
+import { TextInput } from "react-native";
+import { mount } from "enzyme";
+
+import { setFormikInitialValue } from "../..";
+
+console.error = jest.fn();
+
+const setFieldValue = jest.fn();
+
+const withFormikMock = withContext({ formik: PropTypes.object }, () => ({
+  formik: {
+    setFieldValue
+  }
+}));
+const Input = compose(withFormikMock, setFormikInitialValue)(TextInput);
+
+describe("setFormikInitialValue", () => {
+  it("sets the initial value to ''", () => {
+    const touchedInput = mount(<Input name="inputName" />);
+    expect(setFieldValue).toBeCalledWith("inputName", "");
+  });
+
+  it("keeps other props", () => {
+    const wrapper = mount(<Input name="inputName" someProp="someValue" />);
+    expect(wrapper.find(TextInput).props().someProp).toEqual("someValue");
+  });
+});

src/setFormikInitialValue.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { compose, mapProps } from "recompose";
+import withFormik from "./withFormik";
+
+const setFormikInitialValue = WrappedInput => {
+  return class WithFocusProp extends React.PureComponent {
+    constructor(props) {
+      super(props);
+      props.formik.setFieldValue(props.name, "");
+    }
+
+    render() {
+      return <WrappedInput {...this.props} />;
+    }
+  };
+};
+
+export default compose(withFormik, setFormikInitialValue);