redux-form-ui

This is just on an early stage

What is on it?

Make your own UI with redux-form and react-native

• A clean way to set style to your components with redux-form

• Use redux-form transparently to instance layout components and set your own theme through the context efficiently.

• Use getRenderedComponent() to return reference to the UI component that has been rendered. This is useful for calling instance methods on the UI components. For example, if you wanted to focus any given field

A set of best practices included:

• Use errorMessage to display a message when it is due.

• Use a generic ruleRunner to eval some default rules included or your own ones.

Table of Contents

• Installation
• Usage
• Theme
• Rules
• Normalize
• Examples

installation

npm install --save redux-form-ui.

Usage

import * as React from "react";
import { rules, runner, ThemeProvider, UIField } from "redux-form-ui";
import { Field, reduxForm } from "redux-form";
import { TextInput } from "react-native";
import { reduxForm } from "redux-form";

const YourDefaultTheme = {
	TextInput: {
		borderColor: "red",
	},
	ErrorText: {
		color: "red",
	},
};
class MyApp extends React.PureComponent {
	render() {
		return (
			<ThemeProvider Theme={YourDefaultTheme}>
				<MyFieldWrapped />
			</ThemeProvider>
		);
	}
}

const MyTextField = UIField(SimpleInputTextField);
class MyFieldWrapped extends Component {
	render() {
		return (
			<Field
				name="name"
				component={MyTextField}
				hintText="Name"
				floatingLabelText="Name"
				placeholder="Name"
				autoCapitalize="none"
				autoCorrect={false}
			/>
		);
	}
}

const SimpleInputTextField = props => {
	const { theme, errorText, onChange, onBlur, onFocus, value } = props;

	// Injected theme to props
	return (
		<View>
			<TextInput
				style={[theme.TextInput]}
				underlineColorAndroid="transparent"
				onChangeText={onChange}
				onBlur={onBlur}
				onFocus={onFocus}
				value={value}
			/>
			{!!errorText && <Text theme={theme.ErrorText}>{errorText}</Text>}
		</View>
	);
};
// Use reduxForm transparently
export default reduxForm({
	form: "example",
	initialValues: {
		name: "Jane Doe",
	},
	validate: values =>
		runner.run(values, [runner.ruleRunner("name", "Name", rules.required)]),
})(MyForm);

Theme

Behind scenes it uses react-broadcast to emit a context change notification.

Themes uses React's context feature to provide available to children regardless of how deep they are in the tree of Component.

• <ThemeProvider Theme>

makes Theme available from context.Theme to children of the Provider via props using withTheme() HOC as in react-router.

While this is powerful it also can be abused and make it hard to manage.

Rules

A set of most used business rules using ruleRunner with default validation rules

• https://gist.github.com/JSchaenzle/3727f5bda08cd6a31e18c24e61c263ce

Available Rules

• Required
• MatchRegex
• MinLength
• MaxLength
• ...

Normalization

Available Rules

• toUpper
• toLower
• toPhone
• ...

Thanks!

@erikas for inspiring this API with the awesome redux-form

Some Examples

https://github.com/agrcrobles/redux-form-styled-for-react-native