Day 8 - July 7, 2022

Topics Covered

Handling touch
Scrolling with your fingers
Swipeable and Cancellable

Handling Touch

Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping, scrolling or zooming. React Native has a built in Gesture Responder System (GRS) that manages more complex touches in your application. Every time the user touches the screen, the touch can go through several phases as the app determines what the user's intention is. The app will attempt to determine if the user is tapping, scrolling, or sliding. As you can imagine, the duration of the touch and can change and the GRS will also need to handle multiple simultaneous touches.

Using the GRS can get complicated and may be hard to work with. When possible, you should aim to use and abstract Touchable implmenetation. You have already seen the <Button> component. Pressing the button will call the onPress event. If you like, you can customize the button by setting properties like the color prop. If a button doesn't look right for your application, you can build your own button by using the Touchable component. The Touchable component provides a mechanism to capture tapping gestures. They do not have any default styling so you will need to implement StyleSheets to make them look correct.

There are several Touchable components you may choose from depending on your use-case.

TouchableHighlight: Used when you want to simulate a button or a link on the web. The background will be darkened whent he user presses down on the component.
TouchableNativeFeedback: Can be used on Android to provide feedback by displaying ink surface reaction ripples that respond to the user's touch.
TouchableOpacity: Provides feedback by reducing the opacity of the button, turning the background translucent while the user is pressing down.
TouchableWithoutFeedback: Handles taps without any feedback.

Code Example

import React from "react";

import {
    Platform, StyleSheet, Text, View,
    TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback
} from "react-native";

const styles = StyleSheet.create({
    container: {
        paddingTop: 60,
        alignItems: 'center'
    },
    button: {
        marginBottom: 30,
        width: 260,
        alignItems: 'center',
        backgroundColor: '#2196F3'
    },
    buttonText: {
        textAlign: 'center',
        padding: 20,
        color: 'white'
    }
});

export default function App() {
    const onPressButton = function () {
        alert('You tapped the button!')
    };

const onLongPressButton = function () {
        alert('You long-pressed the button!')
    };

return (
        <View style={styles.container}>
            <TouchableHighlight onPress={onPressButton} underlayColor="white">
                <View style={styles.button}>
                    <Text style={styles.buttonText}>TouchableHighlight</Text>
                </View>
            </TouchableHighlight>
            <TouchableOpacity onPress={onPressButton}>
                <View style={styles.button}>
                    <Text style={styles.buttonText}>TouchableOpacity</Text>
                </View>
            </TouchableOpacity>
            <TouchableNativeFeedback onPress={onPressButton}
                    background={Platform.OS === 'android' ? TouchableNativeFeedback.SelectableBackground() : ''}>
                <View style={styles.button}>
                    <Text style={styles.buttonText}>
                        TouchableNativeFeedback {Platform.OS !== 'android' ? '(Android only)' : ''}
                    </Text>
                </View>
            </TouchableNativeFeedback>
            <TouchableWithoutFeedback onPress={onPressButton}>
                <View style={styles.button}>
                    <Text style={styles.buttonText}>TouchableWithoutFeedback</Text>
                </View>
            </TouchableWithoutFeedback>
            <TouchableHighlight onPress={onPressButton} onLongPress={onLongPressButton} underlayColor="white">
                <View style={styles.button}>
                    <Text style={styles.buttonText}>Touchable with Long Press</Text>
                </View>
            </TouchableHighlight>
        </View>
    );
};

Scrolling with your fingers

In addition to tapping, swipes and pans are also important gestures. They allow users to scroll through lists or swipe through pages of content and are typically implemented using the ScrollView component. It is important to note that the ScrollView component must have a bounded height in order to work, otherwise the component will grow to fit the children items.

A ScrollView is not always the best choice. In many situations, the FlatList makes more sense since it supports rendering items lazily when they are about to appear and removes them as they are removed from the screen. This saves memory and improves performance. The FlatList is also handy when you want to render separators between your items, multiple columns, and infinite scrolling lists.

In the example below, the text will automatically scroll if it extends beyond the bottom of the screen. You will notice the use of a component called SafeAreaView. This component only affects iOS devices running iOS 11 or later. The purpose is to render content within the safe area boundaries of the device. It automtaically applies padding to reflect the portion of the view that is not covered by navigation bars, tab bars or toolbars.

Code Example

import React from "react";
import { StyleSheet, Text, SafeAreaView, ScrollView, StatusBar } from "react-native";

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: StatusBar.currentHeight,
    },
        scrollView: {
        backgroundColor: 'pink',
        marginHorizontal: 20,
    },
        text: {
        fontSize: 42,
    },
});

export default function App() {
    return (
    <SafeAreaView style={styles.container}>
        <ScrollView style={styles.scrollView}>
            <Text style={styles.text}>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                aliquip ex ea commodo consequat. Duis aute irure dolor in
                reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
                culpa qui officia deserunt mollit anim id est laborum.
            </Text>
        </ScrollView>
    </SafeAreaView>
    );
};

Swipeable and Cancellable

The Swipeable component allows implementation of swipeable rows. The children are rendered in a panable container, allowing the user to touch and slide the element off the screen. Additional props also allow action buttons to be rendered after swiping an element.

A great use of Swipeable can be found in email applications. Many email applications (such as GMail) will allow you to slide a message to the left to delete the message or to the right to archive the message.

In the code example below, we render several buttons to the screen. If you swipe the button a little, it will slide back to the original location (the action is cancelled). If you swipe even more, the button will slide off the screen and is removed from the list.

Code Example

import React, { useState } from "react";
import { View, ScrollView, Text, TouchableOpacity, StyleSheet } from "react-native";

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "space-between",
        alignItems: "center",
        backgroundColor: "ghostwhite"
    },

swipeContainer: {
        flex: 1,
        flexDirection: "row",
        width: 200,
        height: 30,
        marginTop: 50
    },

swipeItem: {
        width: 200,
        height: 30,
        backgroundColor: "azure",
        justifyContent: "center",
        borderWidth: 1,
        borderRadius: 4,
        borderColor: "slategrey"
    },

swipeItemText: {
        textAlign: "center",
        color: "slategrey"
    },

swipeBlank: {
        width: 200,
        height: 30
    }
});

function SwipeableButton({ onSwipe, name }) {
    function onScroll(e) {
        e.nativeEvent.contentOffset.x === 200 && onSwipe();
    }

return (
        <View style={styles.swipeContainer}>
            <ScrollView
                horizontal={true}
                pagingEnabled={true}
                showsHorizontalScrollIndicator={false}
                scrollEventThrottle={10}
                onScroll={onScroll}
            >
            <TouchableOpacity>
                <View style={styles.swipeItem}>
                    <Text style={styles.swipeItemText}>{name}</Text>
                </View>
            </TouchableOpacity>
            <View style={styles.swipeBlank} />
            </ScrollView>
        </View>
    );
}

export default function App() {
    // Create a state variable containing an array of objects.
    // These items will be used to render a bunch of swipeable
    // buttons to the UI.
    const [items, setItems] = useState(
        new Array(5)
            .fill(null)
            .map((v, id) => (
                {
                    id,
                    name: `Swipe Me (${id})`
                }
            ))
    );

// When a swipeable button is swiped, this event handler will
    // remove it from the items state variable.
    function onSwipe(id) {
        return () => {
            setItems(items.filter(item => item.id !== id));
        };
    }

return (
        <View style={styles.container}>
            {
                items.map(item => (
                    <SwipeableButton key={item.id} onSwipe={onSwipe(item.id)} name={item.name} />
                ))
            }
        </View>
    );
};

Output

Let's quickly review some moving parts in the code example. Our default App function acts as the entry point for our application and render the main UI. In this function, we create a state variable named items that is later used to render several SwipeableButton components to the UI. A SwipeableButton is a component that we define on line 41, we can discuss it in a moment.

When a SwipeableButton has detected a swipe, it will trigger the onSwipe event function. This is handled on line 83 in the App function. This function simply removes the JavaScript object associated to the button swiped from the items state variable. This will cause the UI to refresh itself excluding the button that triggered the swipe event.

Line 41 starts the configuration of the SwipeableButton. As mentioned earlier, this is not a React Native component, it is a component that we have defined. To easily incorporate the swipeable and cancellable behaviour, the component uses a ScrollView component to help. The ScrollView component has been set to horizontal scroll since we are swiping from right to left. You will also notice that pagingEnabled is set to true. When using horizontal scrolling, paging will allow us to snap our component in place and easily cancel an incomplete swipe. To make this work, a "blank" View component with the same dimensions as the swipe button is placed inside the ScrollView.

WEB530

Day 8 - July 7, 2022

Topics Covered

Handling Touch

Scrolling with your fingers

Swipeable and Cancellable