Redux-form-ui NPM

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.

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);