Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
34 views

Lecture # 17 - React Native Form Handling: by Dr. Sidra Sultana

This document discusses setting up forms in a React Native application using Redux Form. It begins by scaffolding a new Expo project and installing dependencies. Components are created to manage each part of the form - an outer component handles submission, a middle component connects the form to Redux, and an inner component displays the form. Multiple forms are then supported by conditionally rendering different form components and adding buttons to toggle between them. Additional components like a reusable text input are created. Fields are added to the form using the Field component from Redux Form. Values are logged on submit to demonstrate it works.

Uploaded by

Danial Ahmad
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
34 views

Lecture # 17 - React Native Form Handling: by Dr. Sidra Sultana

This document discusses setting up forms in a React Native application using Redux Form. It begins by scaffolding a new Expo project and installing dependencies. Components are created to manage each part of the form - an outer component handles submission, a middle component connects the form to Redux, and an inner component displays the form. Multiple forms are then supported by conditionally rendering different form components and adding buttons to toggle between them. Additional components like a reusable text input are created. Fields are added to the form using the Field component from Redux Form. Values are logged on submit to demonstrate it works.

Uploaded by

Danial Ahmad
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 21

Lecture # 17 - React native Form

Handling
By Dr. Sidra Sultana
Scaffolding Project
 We start by creating an blank Expo project.
 expo init
 From within the new project folder, install the additional
dependencies.
 yarn add prop-types
yarn add redux
yarn add react-redux
yarn add redux-form
 At this point, we can start the application.
 expo start
App.js
import { Provider } from 'react-redux';
import { createStore, combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';

const rootReducer = combineReducers({


form: formReducer,
});
const store = createStore(rootReducer);

export default class App extends React.Component {


render() {
return (
<Provider store={store}>
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
</Provider>
);
}
}
...
Hello Form
 We start by creating the absolute minimum form
component, HelloForm, and add it to our application;
 the form component displays a button that, when clicked,
outputs a message to the console.
import { StyleSheet, View } from 'react-native';
...
import HelloForm from './components/HelloForm';
...
export default class App extends React.Component {
render() {
return (
<Provider store={store}>
<View style={styles.container}>
<HelloForm />
</View>
</Provider>
);
}
}
Hello Form cont’d
 The first thing that you will notice is that there are three
components that comprise this solution; each with its
specific responsibility.
 In some Redux Form examples, you will find these
components are all defined in a single file.
 On the other hand, I strictly adhere to the one-component-
per-file guidance (and nesting child components in
folders).
components / HelloForm / index.js
import React, { Component } from 'react';
import HelloFormRF from './HelloFormRF';

class HelloForm extends Component {


handleSubmit = () => {
console.log('SUBMITTED');
}

render() {
return <HelloFormRF onSubmit={this.handleSubmit} />;

}
}

export default HelloForm;


Observations:
 This outer-most component is responsible for supplying a
function (via an onSubmit property) to handle the
submission of the form
components / HelloForm / HelloFormRF /
index.js

import { reduxForm } from 'redux-form';


import HelloFormView from './HelloFormView';

const FORM = 'hello';

const HelloFormRF = reduxForm({


form: FORM,
})(HelloFormView);

export default HelloFormRF;


Observations:
 The middle component is responsible for supplying
the Redux Form form management features (via properties
supplied to HelloFormView); later we will define things
like validation rules here
 Each form requires an unique string identifier, e.g., hello
 Redux Form uses a higher order component
(HOC), reduxForm, to create
the HelloFormRF component
components / HelloForm / HelloFormRF /
HelloFormView / index.js
import { PropTypes } from 'prop-types';
import React from 'react';
import { Button, View } from 'react-native';

const HelloFormView = ({ handleSubmit }) => (

<View>
<Button
title="Submit Hello"
onPress={handleSubmit}
/>
</View>
);

HelloFormView.propTypes = {
handleSubmit: PropTypes.func.isRequired,

};

export default HelloFormView;


Observations:
 As the name suggests, this component is responsible for
the form’s view
 As this component is designed to be used with Redux
Form, it requires a handleSubmit function property (later,
we will make use of additional properties supplied
by Redux Form)
 This handleSubmit function is passed down from the
outmost component
Supporting Multiple Forms
 As we want to retain all the form examples (for
illustration purposes) in the application, we will be
making copies of the previous example as a starting point
for the next example, e.g., we
copy HelloForm to SimpleForm and rename all the
components (yes it is tedious).
App.js
 In order to toggle the forms, we add buttons and state
(old-school React).
import { Button, StyleSheet, View } from 'react-native';
import SimpleForm from './components/SimpleForm';
export default class App extends React.Component {
state = {
activeForm: 'hello',
};
render() {
const { activeForm } = this.state;
return (
<Provider store={store}>
<View style={styles.container}>
<Button title="Hello Form" onPress={this.handlePressHello} />
<Button title="Simple Form" onPress={this.handlePressSimple} />
{activeForm === 'hello' && <HelloForm />}
{activeForm === 'simple' && <SimpleForm />}
</View>
</Provider>
);
}
handlePressHello = () => this.setState({ activeForm: 'hello' });
handlePressSimple = () => this.setState({ activeForm: 'simple' });
}
Simple Form
 We now modify the SimpleForm component (and
children) to display two inputs (first and last name) and a
button that, when clicked, outputs a message to the
console (with the values of the first and last name).
components / RFTextInput / index.js
 We first create a general purpose component that provides
a view, using a React Native TextInput component, for
a Redux Form field.
import PropTypes from 'prop-types';
import React from 'react';
import { TextInput } from 'react-native';
import styles from './styles';
const RFTextInput = ({ input: { onChange, value }}) => (

<TextInput
onChangeText={onChange}
value={value}
style={styles.root}
/>
);
RFTextInput.propTypes = {
input: PropTypes.shape({
onChange: PropTypes.func.isRequired,

value: PropTypes.string.isRequired,
}).isRequired,
}
export default RFTextInput;
Observations:
 The RFTextInput component translates the supplied
(by Redux
Form) input.onChange and input.value properties to
the onChangeText and value properties used by the React
Native TextInput component
 In order to better see the TextInput component, we apply
minimal styling through an external style sheet; good
practice is to separate the styles (can be complex) from the
view component
components / RFTextInput / styles.js

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({


root: {
borderColor: 'gray',
borderWidth: 1,
height: 40,
padding: 10,
}
});

export default styles;


components / SimpleForm /
SimpleFormRF / SimpleFormView / index.js
import { Field } from 'redux-form';
import RFTextView from '../../../RFTextInput';

const SimpleFormView = ({ handleSubmit }) => (


<View>
<Field
name="firstName"
component={RFTextView}
/>
<Field
name="lastName"
component={RFTextView}
/>
<Button
title="Submit Simple"
onPress={handleSubmit}
/>
</View>
);

SimpleFormView.propTypes = {
handleSubmit: PropTypes.func.isRequired,
};

export default SimpleFormView;


Observations:
 The Field component requires two properties.
The name property uniquely identifies the field in the
form. The component property defines the component to
generate a view for the field.
 Finally, we update the submit handler function to accept
two properties, firstName and lastName, of the supplied
object; notice that these are the same as
the Field component names.
components / SimpleForm / index.js

class SimpleForm extends Component {


handleSubmit = ({ firstName, lastName }) => {
console.log(`firstname: ${firstName}`);
console.log(`lastName: ${lastName}`);
}
...
}
...
Any Question?
 Thanks

You might also like