footer_button.js

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

import PropTypes from 'prop-types';

import Style from '../services/styles';

class FooterButton extends Component {

    constructor(props) {
        super(props);

        this.icons = {
            profile: require('../assets/img/profile-icon.png'),
            notifications: require('../assets/img/notifications-icon.png'),
            home: require('../assets/img/home-icon.png'),
            search: require('../assets/img/search-icon.png'),
            plus: require('../assets/img/plus-rainbow-button.png')
        }

    }

    render() {
        return (
            <TouchableOpacity
                style={Style.get('tabNavigator.button')}
                onPress={this.props.onPress}>
                <Image source={this.icons[this.props.icon]} />
            </TouchableOpacity>
        );
    }
}

FooterButton.defaultProps = {
    icon: "search",
    onPress: () => { console.warn('tick') }
};

FooterButton.propTypes = {
    icon: PropTypes.string.isRequired
}

export default FooterButton;