Hey guys, have you heard about abortController before? It’s an experimental technology, but it’s already supported for almost all modern browsers.

https://dom.spec.whatwg.org/#interface-abortcontroller

Basically, when we create an abortController we have access to the AbortSignal object that we can pass it as an option inside the request object. This associates the signal and controller with the fetch request and allows us to abort it calling the abort method.

Let’s create a simple method that receives an URL and a timeout parameter.

In the method above, we simply created an abortController and grabbed the signal object and passed it to the request. Finally, we used a setTimeout to abort the request. We can try to call this method passing a low timeout value like 50 and increase to 200 and check the result. Very simple isn’t it?

Just remember that the request is aborted only at the client, the server is still processing the operation although the client won’t receive it anymore.

Thanks for reading,

AbortController - Web APIs | MDN

https://dom.spec.whatwg.org/#interface-abortcontroller

This post is just a small tip about ES6+ properties. We can find in many languages instance and class (static) fields. Let’s see an example:

1 — Instance property

class Employee {
   constructor() {
      this.Name = "Leonardo Lima";
   }
}

const emp = new Employee();

console.log(emp.Name); //output Leonardo Lima
console.log(Employee.Name); //output undefined

This code above we just create a class and defined a instance field called Name and this field is accessible only via instance, emp variable. We can rewrite this code removing the constructor:

class Employee {
   Name = "Leonardo Lima";
}

const emp = new Employee();

console.log(emp.Name); //output Leonardo Lima
console.log(Employee.Name); //output undefined

2 — Class property

In order to create a class property, we need to create the field using static keyword:

class Employee {
   static Name = "Leonardo Lima";
}

const emp = new Employee();

console.log(emp.Name); //output undefined
console.log(Employee.Name); //output Leonardo Lima

As you can see in the code above, now the Name field is accessible directly via class and you cannot access it using the instance emp.

Thanks for reading!

static - JavaScript | MDN

Hi guys, in this post I will show you how to create a simple swipe effect with cards, Tinder like. I am going to use basically React Native components except the react-native-elements to create the Cards.

You can see how to setup the dev environment here: https://medium.com/@leonardobrunolima/react-native-tips-setting-up-your-development-environment-for-windows-d326635604ea?source=linkShare-42ccfccbb437-1535561576

TL;DR

You can clone the project and use this post as reference, but if you want read the full post go ahead!

Let’s get started creating a new project using react-native cli:

$ react-native init SwipeIt --version 0.55.4

Add react-native-elements package:

$ npm i react-native-elements

As we are not using EXPO, we have to install react-native-vector-icons and link it:

$ npm i --save react-native-vector-icons

Link it:

$ react-native link react-native-vector-icons

You can check the documentation here: https://react-native-training.github.io/react-native-elements/docs/0.19.0/getting_started.html

Let’s separate development in steps:

1 — Create the folder src and the basic card container component:

//import liraries
import React, { Component } from 'react';
import { View } from 'react-native';

// create a component
class CardsContainer extends Component {
   renderCards() {
      return this.props.data.map((item, index) => {
         return (
            <View key={item.id}>
               {this.props.renderCard(item)}
            </View>
         )
      });
   }

   render() {
      return (
         <View>
            {this.renderCards()}
         </View>
      );
   }
}

//make this component available to the app
export default CardsContainer;

Ok, this is the basic cards container, as you can see we have two props: this.props.data and this.props.renderCard. The render method just call the renderCards method and we call the renderCard for each item in data prop. These props we are going to pass from App.js component.

2 — Configure App.js to create and pass the props to CardsContainer component:

We are going to use react-native-elements to create the cards, you can check the documentation here: https://react-native-training.github.io/react-native-elements/docs/0.19.0/card.html

On cards we need to show some images, so I will get those images from unsplash.com and create a const DATA to hold this images. You can get it from anywhere you want. Let’s see the App.js code:

import React, { Component } from 'react';
import {
   StyleSheet,
   Text,
   View
  } from 'react-native';

import { Card, Button } from 'react-native-elements';
import CardsContainer from './src/CardsContainer';

const DATA = [
{ id: 1, text: 'Card #1', uri: 'https://images.unsplash.com/photo-1535591273668-578e31182c4f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f28261f0564880c9086a57ee87a68887&auto=format&fit=crop&w=500&q=60' },

{ id: 2, text: 'Card #2', uri: 'https://images.unsplash.com/photo-1535576434247-e0f50b766399?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=232f6dbab45b3f3a6f97e638c27fded2&auto=format&fit=crop&w=500&q=60' },

{ id: 3, text: 'Card #3', uri: 'https://images.unsplash.com/photo-1535565454739-863432ea3c0e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=7edfb9bc7d214dbf2c920723cb0ffce2&auto=format&fit=crop&w=500&q=60' },

{ id: 4, text: 'Card #4', uri: 'https://images.unsplash.com/photo-1535546204504-586398ee6677?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=7320b162b147a94d4c41377d9035e665&auto=format&fit=crop&w=500&q=60' },

{ id: 5, text: 'Card #5', uri: 'https://images.unsplash.com/photo-1535531298052-7457bcdae809?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f15acb2aedb30131bb287589399185a2&auto=format&fit=crop&w=500&q=60' },

{ id: 6, text: 'Card #6', uri: 'https://images.unsplash.com/photo-1535463731090-e34f4b5098c5?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ebe64b284c0ccffbac6a0d7ce2c8d15a&auto=format&fit=crop&w=500&q=60' },

{ id: 7, text: 'Card #7', uri: 'https://images.unsplash.com/photo-1535540707939-6b4813adb681?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ce3177d04728f7d1811e342b47d1e391&auto=format&fit=crop&w=500&q=60' },

{ id: 8, text: 'Card #8', uri: 'https://images.unsplash.com/photo-1535486509975-18366f9825df?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ea59f63a657824d02872bb907fe85e76&auto=format&fit=crop&w=500&q=60' }
];

export default class App extends Component {
   renderCard(item) {
      return (
         <Card
            key={item.id}
            title={item.text}
            image={{ uri: item.uri }}
         >
            <Text style={{ marginBottom: 10 }}>
               Testing....
            </Text>
            <Button
               backgroundColor='#03A9F4'
               title="More details"
            />
         </Card>
      );
   }

   render() {
      return (
         <View style={styles.container}>
            <CardsContainer
               data={DATA}
               renderCard={this.renderCard}
            />
         </View>
      );
   }
}

const styles = StyleSheet.create({
   container: {
      flex: 1,
   }
});

We basically have the the DATA and renderCard method to pass to CardsContainer component. Now let’s see how it looks like on emulator:

$ react-native run-android

Cool, now we can go to CardsContainer component and do the magic:

3 — Adjust on Cards position and add basic animation:

First, let’s make the cards aligned and create a basic translation animation. Add the Style and set the position to absolute, so all cards will be fixed on top. Once you do that, the width will follow lowest size inside the container, so we need to add the width manually using the screen width using Dimensions component:

//import liraries
import React, { Component } from 'react';
import {
   View,
   StyleSheet,
   Dimensions
  } from 'react-native';

const SCREEN_WIDTH = Dimensions.get('window').width;

// create a component
class CardsContainer extends Component {
   renderCards() {
      return this.props.data.map((item, index) => {
         return (
            <View
               style={styles.cardStyle}
               key={item.id}
            >
               {this.props.renderCard(item)}
            </View>
         )
      }).reverse();
   }

   render() {
      return (
         <View>
            {this.renderCards()}
         </View>
      );
   }
}

// define your styles
const styles = StyleSheet.create({
   cardStyle: {
      position: 'absolute',
      width: SCREEN_WIDTH
   },
});

//make this component available to the app
export default CardsContainer;

As you can see I called the reverse() method on renderCards otherwise the last image will be on top.

Now we must have something like this:

Animations!! Let’s go!

I am going to use Animated and PanResponder, the same components I’ve used in the post below, take some time, read it and come back:

React Native tips — Using Animated and PanResponder components to interact with user gestures

The code is becoming big, don’t worry, you can clone it on GitHub: https://github.com/lblima/react-native-swipeit

//import liraries
import React, { Component } from 'react';
import {
   View,
   StyleSheet,
   Dimensions,
   Animated,
   PanResponder
} from 'react-native';

const SCREEN_WIDTH = Dimensions.get('window').width;

// create a component
class CardsContainer extends Component {
   constructor(props) {
      super(props);

      const position = new Animated.ValueXY();
      const panResponder = PanResponder.create({
         onStartShouldSetPanResponder: () => true,
         onPanResponderMove: (event, gesture) => {
            position.setValue({ x: gesture.dx, y: gesture.dy });
         },
         onPanResponderRelease: (event, gesture) => {}
      });

      this.state = { panResponder, position, index: 0 };
   }

   renderCards() {
      return this.props.data.map((item, index) => {
         //Add animation only to the card on top
         if (index === this.state.index) {
            return (
               <Animated.View
                  style={[
                    styles.cardStyle,
                    this.state.position.getLayout()
                  ]}  
                  {...this.state.panResponder.panHandlers}
                  key={item.id}
               >
                  {this.props.renderCard(item)}
               </Animated.View>
            )
         }

      return (
         <Animated.View
            style={styles.cardStyle}
            key={item.id}
         >
            {this.props.renderCard(item)}
         </Animated.View>
         );
      }).reverse();
    }

   render() {
      return (
         <View>
            {this.renderCards()}
         </View>
      );
   }
}

...

export default CardsContainer;

This is the basic code to make an element move when you drag it on screen, now we must have this:

4 — Interpolation and rotation

The next step is rotate the card when you change the X axis, we can do it using interpolation. It is basically saying whenever you move some pixel on X axis do something (move Y axis, change color, rotate, etc). Let’s do that:

...

//Add animation only to the card on top
if (index === this.state.index) {
   return (
      <Animated.View
         style={[
            styles.cardStyle,
            this.state.position.getLayout()
         ]}
         {...this.state.panResponder.panHandlers}
         key={item.id}
      >
         {this.props.renderCard(item)}
      </Animated.View>
   )
}

...

In this part of the code, we have the position been passed to Animated.View using the line: this.state.position.getLayout() and the position is changed on onPanResponderMove event. What we have to do now is modify this behavior to not only pass the new position, but do some rotation on card. So let’s create a new method to do this called getCardStyle.

...

getCardStyle() {
   const { position } = this.state;
   const rotationX = SCREEN_WIDTH * 2;

   const rotate = position.x.interpolate({
      inputRange: [-rotationX, 0, rotationX],
      outputRange: ['-120deg', '0deg', '120deg']
   });

   return {
      ...position.getLayout(),
      transform: [{ rotate }]
   }
}

renderCards() {
   return this.props.data.map((item, index) => {
      if (index < this.state.index)
         return null;
      
      //Add animation only to the card on top
      if (index === this.state.index) {
         return (
            <Animated.View
               style={[
                  styles.cardStyle,
                  this.getCardStyle()
               ]}
               {...this.state.panResponder.panHandlers}
               key={item.id}
            >
               {this.props.renderCard(item)}
            </Animated.View>
         );
      }
 
      return (
         <Animated.View
            key={item.id}
            style={[
               styles.cardStyle, 
               {transform: [{ rotate: '0deg'}]}, 
               { top: 10 * (index - this.state.index) }
            ]}
         >
            {this.props.renderCard(item)}
         </Animated.View>
      );
   }).reverse();
}

...

Now we are getting the style for the first card calling this method getCardStyle that apply the interpolation to the element. Whenever you move on X axis e have a rotation o same direction.

To the other cards, I had to apply a {transform: [{ rotate: ‘0deg’}]} due a bug for Android.

To make the UX more rich, I’ve added a small space to other cards: { top: 10 * (index — this.state.index) }

Now we must have this:

5 — Response when user release the card

The next step is detect when user release the card and check if we make the current card go back to original position or bring the next card on top. To do this we need to add some code on onPanResponderRelease event.

Let’s create 3 new methods to deal with it:

completeSwipe(direction) {
   const x = (direction === 'right' ? 
                    SCREEN_WIDTH + 50 : -SCREEN_WIDTH - 50);

   Animated.timing(this.state.position, {
      toValue: { x, y: 0 },
      duration: 250
   }).start(() => this.onCompleteSwipe());
}

onCompleteSwipe() {
   this.setState({ index: this.state.index + 1 });
   this.state.position.setValue({ x: 0, y: 0 });
}

resetPosition() {
   this.state.position.setValue({ x: 0, y: 0 });
}

The completeSwipe method will be called when drag and release the card beyond a certain value on X axis. So we create a animation to remove it from screen and call the callback onCompleteSwipe. The onCompleteSwipe method just increment the index and set the default position to next card.

Now we can modify the constructor to use this methods:

//import liraries
import React, { Component } from 'react';
import {
   View,
   StyleSheet,
   Dimensions,
   Animated,
   PanResponder
}

const SCREEN_WIDTH = Dimensions.get('window').width;
const SWIPE_THRESHOLD = SCREEN_WIDTH * 0.40;

...

constructor(props) {
   super(props);

   const position = new Animated.ValueXY();
   const panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderMove: (event, gesture) => {
         position.setValue({ x: gesture.dx, y: gesture.dy });
      },
      onPanResponderRelease: (event, gesture) => {
         if (gesture.dx > SWIPE_THRESHOLD)
            this.completeSwipe('right');
         else if (gesture.dx < -SWIPE_THRESHOLD)
            this.completeSwipe('left');
         else
            this.resetPosition();
      }
   });

   this.state = { panResponder, position, index: 0 };
}

...

The SWIPE_THRESHOLD is a constant to calculate how far user can drag the card without let it go and bring another card to top.

Almost done, we must have this:

6 — Final touching

Now let’s make the next card move up smoothly.

Add Animation on resetPosition method:

...

resetPosition() {
   Animated.spring(this.state.position, {
      toValue: { x: 0, y: 0 }
   }).start();
}

...

Import two components LayoutAnimation and UIManager

//import liraries

import React, { Component } from 'react';
import {
   View,
   StyleSheet,
   Dimensions,
   Animated,
   PanResponder,
   LayoutAnimation,
   UIManager
} from 'react-native';

And use on componentWillUpdate lifecycle method:

... 

componentWillUpdate() {
   UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);

   LayoutAnimation.spring();
}

...

Final version:

Well, I know it was a big post, but you can clone the project on GitHub and use this post to understand what I’ve done in each step. If you have any question let me know!

Thanks for reading!

• lblima/react-native-swipeit
• Getting Started · React Native Elements
• GitHub - react-native-training/react-native-elements: Stub repo of https://github.com/react-native-elements/react-native-elements to maintain google links

Hi guys! One of the most important thing in a mobile app is understand and interact with user gestures. In React Native we have many ways to do this, but I will show in this post a component call PanResponder that is responsible for track user gestures and once a gesture is detected I will move an element on screen using another component called Animated.

You can see how to setup the dev environment here: https://medium.com/@leonardobrunolima/react-native-tips-setting-up-your-development-environment-for-windows-d326635604ea?source=linkShare-42ccfccbb437-1535561576

Let’s get started creating a new project using react-native cli:

$ react-native init AnimatedBall --version 0.55.4

Now, add a new folder on root path called src and add a new file called Ball.js:

Change the Ball component to show a small black ball on screen:

//import liraries
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';

// create a component
class Ball extends Component {
   render() {
      return (
         <View style={styles.ball} />
      );
   }
}

// define your styles
const styles = StyleSheet.create({
   ball: {
      height: 80,
      width: 80,
      borderColor: 'black',
      borderRadius: 40,
      borderWidth: 40
   },
});

//make this component available to the app
export default Ball;

On App.js import and call the Ball component:

import React, { Component } from 'react';
import {
   StyleSheet,
   View
} from 'react-native';

import Ball from './src/Ball';

export default class App extends Component {
   render() {
      return (
         <View style={styles.container}>
            <Ball />
         </View>
      );
   }
}

const styles = StyleSheet.create({
   container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#F5FCFF',
   }
});

It should look like this:

Now let’s get the user gestures using PanResponder component. You can see the full documentation here: https://facebook.github.io/react-native/docs/0.56/panresponder

Import PanResponder component on Ball and create a new instance on constructor:

//import liraries
import React, { Component } from 'react';
import { View, StyleSheet, PanResponder } from 'react-native';

// create a component
class Ball extends Component {
   constructor(props) {
      super(props);

      const panResponder = PanResponder.create({
         onStartShouldSetPanResponder: () => true,
         onPanResponderMove: (event, gesture) => {
            console.log(gesture);
         }
      });

      this.state = { panResponder };
   }

   render() {
      return (
         <View 
            style={styles.ball}
            {...this.state.panResponder.panHandlers}
         />
      );
   }
}

...

export default Ball2;

The code above create a new instance of PanResponder and allows any component attached to it to track user gestures. On event onPanResponderMove you can see the result on console when you try to drag the boll on screen:

Now we have the gesture and we can grab the position X and Y from it to animate the ball. Import the Animated component and create a new instance of position. In order to animate a component we have to use the Animated.View, so every component inside it will be animated. In our case we just renamed the View to Animated.View.

//import liraries
import React, { Component } from 'react';
import { View, StyleSheet, PanResponder, Animated } from 'react-native';

// create a component
class Ball extends Component {
   constructor(props) {
      super(props);

      const position = new Animated.ValueXY();
      const panResponder = PanResponder.create({
         onStartShouldSetPanResponder: () => true,
         onPanResponderMove: (event, gesture) => {
            position.setValue({ x: gesture.dx, y: gesture.dy });
         }
      });
   
      this.state = { panResponder, position };
   }

   render() {
      let handles = this.state.panResponder.panHandlers;
      return (
         <Animated.View
            style={[styles.ball, this.state.position.getLayout()]}
            {...handles}
         />
      );
   }
}

...

export default Ball;

Now you can drag the ball around the screen. This is a simple example, you can interesting things with PanResponder and Animated components.

That’s all folks,

Thanks for reading!

• lblima/react-native-animated-ball
• Animated · React Native
• PanResponder · React Native

Hi guys! In this article I will talk about how to set up your development environment on Windows to use React Native and Android Studio.

These are the tools we need on an development environment (Windows):

• Visual Studio Code (you can use any other editor or IDE)
• Android Studio
• Built-in emulator in Android Studio
• Node Package Manager (NPM)
• Node.js (Version 8 or newer)
• React Native command line interface (React Native CLI)
• Java Development Kit (JDK 8 or newer)

There are two ways to start a React Native Project: Using the React Native CLI or using Create React Native App. If you chose the second option, you don’t need to configure anything, just start coding and be happy. I will talk about the pros and cons of these two options.

Step 1: Install Node

• Download and install the latest version of Node.js from https://nodejs.org/en.

I recommend you install the LTS version.

Step 2: Install Java SDK

• Download and install the latest version of Java SDK from http://www.oracle.com/technetwork/pt/java/javase/downloads/jdk8-downloads-2133151.html.

Step 3: Install Python 2

• Download and install Python 2.7.15 from https://www.python.org/downloads/windows/

You can use Chocolatey to install Node, Python2 and Java SDK together, to do it install Chocolatey and just type:

$ choco install -y nodejs.install python2 jdk8

Step 4: Install Android Studio

• Download and install the latest version of Android Studio for Windows from https://developer.android.com/studio/

The Android Studio installs the latest Android SDK by default and React Native requires Android 6.0 (Marshmallow) SDK or higher.

Once installed you can go to Tools > SDK Manager and choose any version above 6.0.

If you didn’t have any project yet (our case), you should go to Configure > SDK Manager:

Now, go to SDK Tools tab and choose these options below:

You will need the Intel x86 Emulator Accelerator (HAXM installer) to run the emulator on Windows. For more information, please refer to the following link: https://github.com/intel/haxm/wiki/Installation-Instructions-on-Windows.

If you have Hyper-V feature enabled, you need to disable it (I know…)

Make sure if JDK location is selected. Go to File > Other Settings > Default Project Structure:

Step 5: Configure environment variables

• Add the ANDROID_HOME variable:

• Add JAVA_HOME variable:

• Make sure you add on Path variable the path for Java SDK and Android platform tools:

C:\Users\{your_user_name}\AppData\Local\Android\Sdk\platform-tools
C:\Program Files\Java\jdk1.8.0_181\bin

Step 6: Install React Native CLI and create the first project

$ npm install -g react-native-cli

Finally you can create your first React Native application by running the following command in your workspace location:

$ react-native init myFirstReactNativeApp --version 0.55.4

The latest version, 0.56, has some issues on Windows, so, use 0.55.4

This will create the following project structure:

Before run you project we have to configure the emulator. Take a look at the folder android. We have to open it on Android Studio:

Click on “Open an existing Android Studio project”, go to your project and select the folder android and click Ok.

If Gradle ask you to update, click on “Don’t remind me again for this project”

Now, go to Tools > ADV Manager:

On this screen, click on “Create Virtual Device”:

You can select any device on the list and click next:

On the next screen select the System Image. Click on download to download the selected image.

Follow the instructions and finish. After that you can see the created virtual device on the list.

Now, just click on play and you can see the emulator running:

It’s time to run your project and see it on emulator. Just type:

$ react-native run-android

And voilà!

Now you can edit you app and reload the emulator to see the changes, just type “ctrl + m” and click Reload:

That´s all folks, I hope you can enjoy your first React Native App. Let me know if you have any question or if these steps didn’t work for you.

Thanks for reading!

Getting Started · React Native

Deal with relative path is not a complex thing, but when we are creating an application using create-react-app sometimes it could be a tough work. To configure paths and other configurations we usually use Babel, but Babel is not available to edit when we create an app using create-react-app, unless you eject.

In this post I will show you how to change path configuration using Babel without eject your application. Let’s create an app using create-react-app called react-relative-path:

$ create-react-app react-relative-path

Now, I will create some folders, add some components and add references to each other.

First create a folder called Api and add a Item.js file.

And a folder called Components with subfolders ListItems and Item as we can see below:

On App.js we just import and use the component Item:

The result should be like this:

Alright, everything is working well, but if you decide to change the folder structure? Remember the path inside Item component:

import item from '../../../Api/Item';

If you decide to remove the folder ListItems and let only the folder Item:

Now we have an error:

We have to change all paths inside all components inside Item folder, of course in this case is easy, but imagine you have many components, I could be hard to maintain.

In order to deal with this situation, we can use some third-part components. This first we need to install is the react-app-rewired. This component allow us to change webpack configuration without using ‘eject’ and without creating a fork of the react-scripts:

npm i --dev react-app-rewired

The second component the babel-plugin-root-import, that allow us to import components using root based paths.

npm i --dev babel-plugin-root-import

Alright, now we need create a file on root folder called config-overrides.js:

In this file we are going to configure basically two things: the root prefix and root sufix. The rootPathPrefix is the character we would like to use to refer the root folder and the rootPathSuffix is the name of the root folder.

Next step is change the package.json file to use the react-app-rewired (except the eject script):

Finally let’s change the Item component to use the new prefix “~”:

And now it’s working again:

If you are using VSCode, I have one more tip. After these changes we’ve made, you can see we lost the intellisense for paths. So, after you type ~/… the VSCode will not complete or suggest the available path. To fix this, we need to add a file called jsconfig.json and add some configs:

The most important part is the “paths” section. In this section we instruct the VSCode to map the path “~/” to “./src” and after that the intellisense will work again:

You can clone this project here: https://github.com/lblima/react-relative-path

That’s all folks,

Thanks for reading!

• timarney/react-app-rewired
• entwicklerstube/babel-plugin-root-import
• lblima/react-relative-path

The latest release (16.4.1) of React added support for a good feature: pointer events. But, it will only work in browsers that support the Pointer Events specification. If your want your application runs on all browser, I recommend using a third-party pointer events polyfill.

The event types available in React DOM are:

• onPointerDown
• onPointerMove
• onPointerUp
• onPointerCancel
• onGotPointerCapture
• onLostPointerCapture
• onPointerEnter
• onPointerLeave
• onPointerOver
• onPointerOut

Let’s do an example based on React blog. First thing to do is create a new app using create-react-app.

$ create-react-app react-drag-drop-pointevents

Feel free to change some texts, but the most important is create a new component called DragItem.

import React from 'react';

export default class DragItem extends React.Component {

}

And now call this component on App.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import DragItem from './DragItem';

class App extends Component {
   render() {
      return (
         <div className="App">
            <header className="App-header">
               <img src={logo} className="App-logo" alt="logo" />
               <h1 className="App-title">Welcome to React sample of Point Events</h1>
            </header>
            <div className="App-intro">
               <DragItem />
            </div>
         </div>);
   }
}

export default App;

Alright, now let’s work on DragItem component:

import React from 'react';

const CIRCLE_DIAMETER = 100;

export default class DragItem extends React.Component {
   state = {
      gotCapture: false,
      circleLeft: 500,
      circleTop: 100
   };

isDragging = false;
   previousLeft = 0;
   previousTop = 0;
 
   onDown = e => {
      this.isDragging = true;
      e.target.setPointerCapture(e.pointerId);
      this.getDelta(e);
   };

onMove = e => {
      if (!this.isDragging) {
         return;
      }
  
      const {left, top} = this.getDelta(e);
      this.setState(({circleLeft, circleTop}) => ({
         circleLeft: circleLeft + left,
         circleTop: circleTop + top
      }));
   };

   onUp = e => (this.isDragging = false);

   onGotCapture = e => this.setState({gotCapture: true});

   onLostCapture = e => this.setState({gotCapture: false});

   getDelta = e => {
      const left = e.pageX;
      const top = e.pageY;
      const delta = {
         left: left - this.previousLeft,
         top: top - this.previousTop,
      };
      this.previousLeft = left;
      this.previousTop = top;
   
      return delta;
   };

   render() {
      const {gotCapture, circleLeft, circleTop} = this.state;

      const boxStyle = {
         border: '2px solid #cccccc',
         margin: '10px 0 20px',
         minHeight: 400,
         width: '100%',
         position: 'relative',
      };

      const circleStyle = {
         width: CIRCLE_DIAMETER,
         height: CIRCLE_DIAMETER,
         borderRadius: CIRCLE_DIAMETER / 2,
         position: 'absolute',
         left: circleLeft,
         top: circleTop,
         backgroundColor: gotCapture ? 'red' : 'green',
         touchAction: 'none',
      };

      return (
         <div style={boxStyle}>
            <div
               style={circleStyle}
               onPointerDown={this.onDown}
               onPointerMove={this.onMove}
               onPointerUp={this.onUp}
               onPointerCancel={this.onUp}
               onGotPointerCapture={this.onGotCapture}
               onLostPointerCapture={this.onLostCapture}
            />
         </div>
      );
   }
}

It should look like this:

Now you can try to move the circle around the screen. Enjoy!

That’s all folks,

Thanks for reading!

• lblima/react-drag-drop-pointevents
• Pointer events

The first thing I would like to make clear is there’s no relation and comparison between them, they are two completely different things.

const

The const keyword applies to bindings and creates an immutable binding. In other words, you cannot assign a new value to the binding.

let person = {
   name: "Leonardo"
};

console.log(person); //output { name: 'Leonardo' }

Now add another object and assign to the person object:

let person = {
   name: "Leonardo"
};

let animal = {
   species: "snake"
};

person = animal;

console.log(person); //output { species: 'snake' }

Ok, if you change the person object declaration to be a constant the code above won’t work anymore:

const person = {
   name: "Leonardo"
};

let animal = {
   species: "snake"
};

person = animal; // ERROR "person" is read-only

console.log(person);

But you can change its values:

const person = {
   name: "Leonardo"
};

let animal = { 
   species: "snake"
};

person.name = "Lima";

console.log(person); //output { name: 'Lima' }

Make sense right?

Object.freeze

It works on values and it makes an object immutable, i.e. you cannot change, add or delete its properties, but you can assign another instance.

let person = {
   name: "Leonardo"
};

let animal = {
   species: "snake"
};

Object.freeze(person);

person = animal;

console.log(person); { species: 'snake' }

As you can see above, even using Object.freeze I could assign animal object to to person. Now, let’s try change some property of the person:

let person = {
   name: "Leonardo"
};

let animal = {
   species: "snake"
};

Object.freeze(person);

person.name = "Lima"; //TypeError: Cannot assign to read only property 'name' of object

console.log(person);

As you can see, we cannot change any value of the object once it’s frozen, it’s immutable. The only problem is it isn’t deep freeze.

let person = {
   name: "Leonardo",
   profession: {
      name: "developer"
   }
};

Object.freeze(person);

person.profession.name = "doctor";

console.log(person); //output { name: 'Leonardo', profession: { name: 'doctor' } }

If you want make sure the object is deep frozen you have to create a recursive function to freeze each property which is of type object:

function deepFreeze(object) {
   let propNames = Object.getOwnPropertyNames(object);

   for (let name of propNames) {
      let value = object[name];
      object[name] = value && typeof value === "object" ?  
                           deepFreeze(value) : value;
   }

   return Object.freeze(object);
}

let person = {
   name: "Leonardo",
   profession: {
      name: "developer"
   }
};

deepFreeze(person);

person.profession.name = "doctor"; // TypeError: Cannot assign to read only property 'name' of object

console.log(person);

That’s all folks,

Thanks for reading!

• Object.freeze() - JavaScript | MDN
• const - JavaScript | MDN
• Javascript tips — var, let, const and hoisting

React PropTypes are a very good way to help you catching bugs by validating data types of values passed through props. You can also flag props as required or set default values.

Picture the situation where you just picked up a component written by another developer and have to figure out which properties the component needs, which ones are required, what is the correct type for each one, etc. If he used Proptypes, he made your life easier in this situation.

React.PropTypes has moved into a different package since React v15.5. Use the prop-types library instead.

Let’s see a example creating a Customer component:

import React from 'react';
import PropTypes from 'prop-types';

const Customer = (props) => <div> 
  <h1>{props.firstName} {props.lastName}</h1>
  <p>Age: {props.age}</p>
</div>;

Customer.propTypes = {
  firstName:PropTypes.string,
  lastName:PropTypes.string,
  age:PropTypes.number
};

export default Customer;

Now let’s use this component:

...

<Customer 
   firstName='Leo'
   lastName='Lima'
   age=41
/>

...

Everything is fine here, but suppose you pass a string on age prop:

...

<Customer 
   firstName='Leo'
   lastName='Lima'
   age='41'
/>

...

As you can see, once I passed a string instead a number, I received a error. Now, suppose we didn’t pass the age prop, what will happen?

...

<Customer 
   firstName='Leo'
   lastName='Lima'
/>

...

Nothing happens here, because this prop isn’t required. So, let’s make it required:

import React from 'react';
import PropTypes from 'prop-types';const Customer = (props) => <div> 
  <h1>{props.firstName} {props.lastName}</h1>
  <p>Age: {props.age}</p>
</div>;

const Customer = (props) => <div> 
  <h1>{props.firstName} {props.lastName}</h1>
  <p>Age: {props.age}</p>
</div>;

Customer.propTypes = {
  firstName:PropTypes.string,
  lastName:PropTypes.string,
  age:PropTypes.number.isRequired
};

export default Customer;

Now, if run the app you will see an error:

Ok, let’s add another prop to our component called Gender and add a proptype OneOf:

import React from 'react';
import PropTypes from 'prop-types';

const Customer = (props) => <div> 
  <h1>{props.firstName} {props.lastName}</h1>
  <p>Age: {props.age}</p>
  <p>Gender: {props.gender}</p>
</div>;

Customer.propTypes = {
  firstName:PropTypes.string,
  lastName:PropTypes.string,
  age:PropTypes.number.isRequired,
  gender: PropTypes.oneOf(['female', 'male'])
};

export default Customer;

Using oneOf we can specify a range of valid Prop Values, in this case I will only accept male and female strings. If I pass anything different I will get an error:

...

<Customer 
   firstName='Leo'
   lastName='Lima'
   age={42}
   gender='other'
/>

...

As you can see we have many ways to ensure our component will be a valid “state” with PropTypes and there are many other type you can use. You can check here: https://github.com/facebook/prop-types

If you are moving from React 15.5 you may have a look in this link: https://reactjs.org/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes

That’s all folks,

Thanks for reading!

GitHub - facebook/prop-types: Runtime type checking for React props and similar objects

In my last post I wrote a introduction on testing react component with Jest and Enzyme. In this post I will evolve the last project to introduce more tests to check props and functions/events.

React tips — Testing React Component with Jest + Enzyme (basics)

I will assume you have already cloned the project we started in the last post. Now, let’s do some changes on it adding a new component called BasicInput:

It is a very simple functional component that receives some props in order to render a input html object.

Now let’s test it creating a new test file called basic-input.test.js:

Basically I’ve imported Enzyme and the component. After that I chose to test two very basic things: test if component renders without crashing and the two props: placeholder and type.

To test these props, we can use the prop method of Enzyme, it’s very straightforward:

const placeholder_text = 'type anything here';

const wrapper = shallow(<BasicInput placeholder={placeholder_text} />);

expect(wrapper.prop('placeholder')).toEqual(placeholder_text);

Now let’s go back to main component App and change it to use this new component:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import BasicInput from './components/basic-input';

class App extends Component {
   constructor() {
      super();
      this.state = {
         basicValue: ''
      };
      
      this.handleBasicInputChanges = this.handleBasicInputChanges.bind(this);
}

   handleBasicInputChanges(e) {
      this.setState({
         basicValue: e.target.value
      });
   }

   render() {
      return (
         <div className="App">
            <header className="App-header">
               <img src={logo} className="App-logo" alt="logo" />
               <h1 className="App-title">Welcome to React Basic Tests</h1>
            </header>
           <p className="App-intro">
              <BasicInput
                 type="text"
                 placeholder="type something"
                 handleChanges={this.handleBasicInputChanges}
               />
            </p>
         </div>
      );
   }
}

export default App;

Basically I’ve created a constructor and method to handle the input change. I’ve added the component BasicInput to and passed some props. It should look like this:

Ok, now let’s change our existing App.test.js to include a test for input changes.

In this part I had to include a new function called mount. As you can see, the goal here is to test if the BasicInput input changes modifies the state.

Always use mount if you want full rendering including child components and access to the DOM.

handleBasicInputChanges is passed to handleChanges props

it('should change the state after change the input value', () => {
   const newValue = 'testing component';
   const wrapper = mount(<App />);
   const input = wrapper.find('input');
   
   input.simulate('change', { target: { value: newValue }});
   expect(wrapper.state().basicValue).toEqual(newValue);
});

The only thing we need to do is mouting the App component and find the component we want simulate the event, in this case it will the the input. After that we just verify if the state was changed.

You can read the Enzyme documentation for more details about the api and how to use it.

You can clone this project on my GitHub: https://github.com/lblima/react-basic-tests-with-jest-enzyme

That’s all folks,

Thanks for reading!

• airbnb/enzyme
• API Reference · Enzyme
• Enzyme | Airbnb Engineering
• lblima/react-basic-tests-with-jest-enzyme