React Native Text Input - React Native

What is React NativeText Input?

In this tutorial, we will explain on how to deal with TextInput elements in React Native.

We will use separation of concerns principle. Where as Container component will use logic, while presentational component will be handling view layer.

Logic

  • We will assign initial state in constructor.
  • Later we will be creating updateEmail and updatePassword functions. These functions are used for updating the state.
  • login function will just alert the current value of the state.
  • We need to pass these three functions to MyPresentationalComponent so we can use it as props.

src/components/myComponent/MyPresentationalComponent.js

Example

View

  • We will have access functions which are created in the above example as props.updateEmail, props.updatePassword and props.login.
  • We will have to adding some properties to text inputs as we want to disable auto capitalisation, and set a placeholder.
  • We can handle styling in this component.
src/components/myComponent/MyPresentationalComponent.js

Example

When we click on Submit button, text from inputs will be displayed within alert.

Output

React Native - Text Input

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

React Native Topics