react-reform-native

index.ios.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput,
  Button
} from 'react-native';
import defaultValidations from './react-reform/opt/validations';
import { createTheme, ReformContext, Form, WrapInput } from './react-reform';

const defautTheme = createTheme({
  renderForm: (FormContainer, children, {submitForm, directProps, isValid}) => (
    <FormContainer>
      {children}

      <Button
        onPress={submitForm}
        title="Submit"
        color="#841584"
        accessibilityLabel="Submit"
      />
    </FormContainer>
  ),

  renderField: (Field, {directProps, name, isFocused, validations, id}) => {
    return (
      <Field style={{height: 40, width: 200, borderColor: 'gray', borderWidth: 1}} {...directProps} />
    )
  }
});


const validations = {
  ...defaultValidations,
};

const themes = { default: defautTheme };

const ControlText = (props) => {
  return (
    <WrapInput directProps={props}>
      {({value, themeProps: {onChange, ...remainingThemeProps}}) => (
        <TextInput
          onChangeText={(text) => onChange(text)}
          value={value || ''}
          {...remainingThemeProps}
        />
      )}
    </WrapInput>
  );
};

export default class FormTest extends Component {
  state = {
    text: 'Placeholder'
  }

  handleSubmit = ({ text }) => {
    this.setState({ text });
  }

  render() {
    return (
      <ReformContext themes={themes} validations={validations}>
        <View style={styles.container}>
          <Text>{this.state.text}</Text>
          <Form onSubmit={this.handleSubmit}>
            <ControlText name="text" />
          </Form>
        </View>
      </ReformContext>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

AppRegistry.registerComponent('FormTest', () => FormTest);

react-reform.diff

diff --git a/src/Form.js b/src/Form.js
index 505cd05..c2a74bf 100644
--- a/src/Form.js
+++ b/src/Form.js
@@ -1,11 +1,12 @@
 import React from 'react'
+import { View } from 'react-native';
 
 let nextFormId = 1 // used for id-generation
 
 // FormContainer is what is being passed as first arg to theme.renderForm(FormContainer, children, opts)
 
 const FormContainer = ({children, ...rest}, {reformForm}) => (
-  <form {...rest} onSubmit={reformForm.onSubmit}>{children}</form>
+  <View {...rest}>{children}</View>
 )
 
 FormContainer.contextTypes = {reformForm: React.PropTypes.object}
@@ -257,15 +258,15 @@ export default class Form extends React.Component {
     return {hasErrors, firstInvalidFieldName}
   }
 
-  handleSubmit = (e, ...args) => {
-    if (e && typeof e.preventDefault === 'function') e.preventDefault()
+  handleSubmit = (...args) => {
     const {hasErrors, firstInvalidFieldName} = this.checkForErrors()
+
     if (hasErrors) {
       this.setState({status: 'preSubmitFail'})
       this.focusField(firstInvalidFieldName)
     } else {
       this.setState({serverErrors: {$global: []}})
-      const result = this.props.onSubmit(this.getAllValues(), e, ...args)
+      const result = this.props.onSubmit(this.getAllValues(), ...args)
       if (result && typeof result.then === 'function') {
         this.setState({status: 'pending'})
         result.then(this.handleAsyncSuccess, this.handleAsyncError)