Book Image

Mastering React Native

Book Image

Mastering React Native

Overview of this book

React Native has completely revolutionized mobile development by empowering JavaScript developers to build world-class mobile apps that run natively on mobile platforms. This book will show you how to apply JavaScript and other front-end skills to build cross-platform React Native applications for iOS and Android using a single codebase. This book will provide you with all the React Native building blocks necessary to become an expert. We’ll give you a brief explanation of the numerous native components and APIs that come bundled with React Native including Images, Views, ListViews, WebViews, and much more. You will learn to utilize form inputs in React Native. You’ll get an overview of Facebook’s Flux data architecture and then apply Redux to manage data with a remote API. You will also learn to animate different parts of your application, as well as routing using React Native’s navigation APIs. By the end of the book, you will be able to build cutting-edge applications using the React Native framework.
Table of Contents (20 chapters)
Mastering React Native
About the Authors
About the Reviewer
Customer Feedback

Event handlers

In JavaScript development, we often think of our application as reacting to user events on the page. For instance, we may listen for a submit button on the page to be clicked, and when it is, validate a form. Functions that respond to these user events are sometimes dubbed event handlers or event listeners.

In a simple JavaScript application, we register these event handlers by querying the DOM for some element and adding an event listener function to run when the event of interest occurs. Here is how we might do this:

document.querySelector('form').addEventListener('click', validateForm); 
function validateForm() { 
  alert('The form is valid!'); 

In the early days of JavaScript, we probably would have used HTML event attributes in order to respond to user events on some element. The equivalent code for this inline approach to event handling might look something like this:

<form onsubmit="validateForm()"> 

In React, the way we do event handling is more like the inline JavaScript of yesteryear. Elements in React can optionally take event handler properties in order to respond to user inputs. A React element is the portion of a component that is returned from the render function. In other words, it is a description of what we want rendered on the screen, generally written in JSX. Our form from the previous example written in JSX would only have a couple of subtle differences:

<form onSubmit={validateForm}> 

To show an example of event handling in context, let's return to our NewsItem example. Let's imagine that we want our application to respond to a user clicking on the news item. We can do this by creating an event listener function in the component and adding it to the outer element in JSX:

import React, { Component, PropTypes } from 'react'; 
import Title from './Title'; 
export default class NewsItem extends Component { 
  onClick() { 
    alert(`You've clicked on ${this.props.titleText}`); 
  render() { 
    return ( 
        <Image /> 
        <Byline /> 
        <Description /> 
NewsItem.propTypes = { 
  titleText: PropTypes.string.isRequired 

Take note that we are binding the render method's this context to the onClick method when adding it as a click handler:


We need to do this in order to ensure this has the same meaning in the onClick method as it does in other component methods. This way, we can still access props and call other component methods. However, the better way to bind the this context to the event handler method is to do so within the component's constructor:

constructor(props) { 
  this.onClick = this.onClick.bind(this); 

Then there is no need to re-bind the event handler in the JSX, which can be simplified:


This method is preferred not only because it reduces the amount of typing, but also because React internally optimizes to make it more efficient.

Event listeners in React, much as they do without React, receive an optional argument that is an object representing the user event. We can access this event object in order to suppress default behavior, for instance, in a form submission, by using event.preventDefault(). We can also use the event object to, for example, see what document element was targeted by the action or, in the case of a key press event, see which specific key was pressed by the user. To get access to the event, we just need to add it as a parameter to our event listener method:

onClick(event) { 
  console.log('User event', event); 
  alert(`You've clicked on${this.props.titleText}`);