Alerts, Animations, Gestures, and More!

In week 3 we will:

• Reveal buttons in response to a swipe gesture.
• Use the Alert API to show a dialog with options
• Use the Animated library, a flexible and powerful way to create animations built into React Native
• Also use a third party library called React Native Animatable to create basic animations quickly
• Use the built-in PanResponder API to create custom reactions to gestures
• Persist the Redux store through reloading of the application

Favorites

Notes about this step:

1. Access campsites data from Redux state
2. Use connect() function to connect to Redux store
3. Use mapStateToProps function to pass campsites state to component as props
4. No need for mapDispatchToProps object at this time
5. Create a StackNavigator to use in the Drawer Navigator
6. Set Stack Navigator header title using static navigationOptions
7. Route to corresponding CampsiteInfo component using navigate function from the navigation prop
8. Set up like Directory component, but with a filtered array of only favorited campsites instead of all campsites

• Add a new file named FavoritesComponent.js in the components folder and update its contents as follows:

import React, { Component } from 'react';
import { FlatList, View, Text } from 'react-native';
import { ListItem } from 'react-native-elements';
import { connect } from 'react-redux';
import { Loading } from './LoadingComponent';
import { baseUrl } from '../shared/baseUrl';

const mapStateToProps = state => {
    return {
        campsites: state.campsites,
        favorites: state.favorites
    };
};

class Favorites extends Component {

    static navigationOptions = {
        title: 'My Favorites'
    }

    render() {
        const { navigate } = this.props.navigation;
        const renderFavoriteItem = ({item}) => {
            return (
                <ListItem
                    title={item.name}
                    subtitle={item.description}
                    leftAvatar={{source: {uri: baseUrl + item.image}}}
                    onPress={() => navigate('CampsiteInfo', {campsiteId: item.id})}
                />
            );
        };

        if (this.props.campsites.isLoading) {
            return <Loading />;
        }
        if (this.props.campsites.errMess) {
            return (
                <View>
                    <Text>{this.props.campsites.errMess}</Text>
                </View>
            );
        }
        return (
            <FlatList
                data={this.props.campsites.campsites.filter(
                    campsite => this.props.favorites.includes(campsite.id)
                )}
                renderItem={renderFavoriteItem}
                keyExtractor={item => item.id.toString()}
            />
        );
    }
}

export default connect(mapStateToProps)(Favorites);

MainComponent.js

Swipe Option Buttons and Alerts

Swipe option buttons are commonly seen added to items on lists in mobile applications. Mobile devices have limited screen size and mobile apps often hide options in this and similar ways. When you swipe on an item in the configured direction, previously hidden option buttons are revealed. There are various ways to create swipe option buttons like this. We will use react-native-swipe-list-view library!

Alert is a way of popping up information in a dialog, usually to confirm some operation with the user – similar to a modal, but simpler. React Native has a built-in API we can use to easily create an Alert dialog with a title, text, and buttons that works both on Android and iOS. In the example show here, there are two buttons: one to cancel, and one to confirm (the OK button). Tapping on either button will dismiss the Alert. We can further attach event handlers to either or both buttons. We will configure the confirm button to dispatch an action to the Redux store to delete this campsite from the list of favorites

Swipe and Delete Favorites

• Install the react-native-swipe-list-view library to support a way to swipe to reveal option buttons:  expo install react-native-swipe-list-view

ActionTypes.js

ActionCreators.js

favorites.js

FavoritesComponent.js

Alerts

FavoritesComponent.js

Animations

Subtle animations added to your application can go a long way in enhancing the user experience. React Native includes a powerful, declarative library called Animated. The Animated library is designed to make animations fluid, powerful, and painless to build and maintain. The most basic workflow for creating an animation is to create an Animated.Value, hook it up to one or more style attributes of an animated component, and then drive updates via animations using Animated.timing()

Components must be configured to be able to use the animated library. There is a wrapper function called create animated component that can be used to make a component animatable. You can use this on any component. But six of the most common animated components are already exported for you to use with this wrapper function as:

• Animated.Image
• Animated.ScrollView
• Animated.Text
• and so on!

Add an animation to the Home component, using React Native’s Animated API.

HomeComponent.js

The Animated API provides a fairly comprehensive way of doing complex animations, and comes included with the React Native core. But it can be quite cumbersome – a lot of setup for a simple animation. There are many third party libraries built on top of the Animated library to more easily set up basic animations. One is react native animatable which we will be using.

Animatable

• First, install react-native-animatable in your nucampsite folder:  expo install react-native-animatable

AboutComponent.js 

CampsiteInfoComponent.js

ContactComponent.js

DirectoryComponent.js

FavoritesComponent.js

Additional Resources:

• React Native – FlatList
• React Native Elements – ListItem
• React Navigation – Stack Navigator, Drawer Navigator, navigation prop
• React-Redux – Connect
• react-native-swipe-list-view & SwipeRow
• react-native-gesture-handler – Touchables
• React Native – Alert
• React Native – Animations
• React Native – Animations
• React Native – Animated
• React Native – Transforms
• React Native – Animated.Value
• React Native Training – React Native Animations Using the Animated API
• Medium.com article – What the React Native Docs Forgot to Tell You About Animations
• Using Native Driver for Animated
• React-Native-Animatable