catActions.js

import { createAction } from 'redux-actions';
import createContants from 'namespace-constants';

export const ACTION_TYPES = createContants('cat', [
    'GET_CAT_INFO',
    'ADD_CAT',
    'EDIT_CAT',
    'DELETE_CAT'
]);

export const addCatInfo = createAction(ACTION_TYPES.GET_CAT_INFO);

export const addCat = createAction(ACTION_TYPES.ADD_CAT);

export const editCat = createAction(ACTION_TYPES.EDIT_CAT);

export const deleteCat = createAction(ACTION_TYPES.DELETE_CAT);

CatList.js

import React, { Component } from 'react';
import { FlatList } from 'react-native';
import styled from 'styled-components';

const Header = styled.Text`
    color: white;
    font-size: 24;
`;

const CatItem = styled.Text`
    color: white;
    font-size: 16;
    border-width: 1;
    border-color: #82b1ff;
    height: 30;
    width: 200;
`;

const ListViewWrapper = styled.View`
    color: #212121;
    justify-content: center;
    height: 300;
    width: 100%;
`;

class CatList extends Component {
    render() {
        const { allCats } = this.props;
        return (
            <ListViewWrapper>
                <FlatList
                    data={allCats}
                    ListHeaderComponent={<Header>List Of Cats</Header>}
                    ListEmptyComponent={<Header>You havent added any cats</Header>}
                    renderItem={({ item }) => <CatItem>{item.catName} {item.catBreed} {item.catAge} {item.catGender} {item.catColor}</CatItem>}
                    keyExtractor={(item, index) => `${item.catName}_${index}`}
                    />
            </ListViewWrapper>
        );
    }
}

export default CatList;

catReducer.js

import { ACTION_TYPES } from '../actions/catActions';
import { handleActions } from 'redux-actions';

export const BEG_STATE = {
    allCats: [],
    selectedCat: {},
};

const getCatInfo = (state) => ({
    ...state,
    allCats
});

const addCat = (state, { payload: { catName, catBreed, catAge, catGender, catColor } }) => ({
    ...state,
    allCats: [...state.allCats, { catName, catBreed, catAge, catGender, catColor }]
});

const catReducer = handleActions(
    {
        [ACTION_TYPES.GET_CAT_INFO]: getCatInfo,
        [ACTION_TYPES.ADD_CAT]: addCat
    },
    BEG_STATE
);

export default catReducer;

ManageCats.js

/* Containers/ManageCats.js */
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Modal } from 'react-native';
import styled from 'styled-components';
import { addCat } from '../actions/catActions';
import CatList from '../components/ManageCats/CatList';
import AddCatButton from '../components/ManageCats/AddCatButton';
import AddCatForm from '../components/ManageCats/AddCatForm';

const HomeContainer = styled.View`
    flex: 1;
    justify-content: center;
    align-items: center;
    background-color: #212121;
    padding-top: 60;
`;

const ListContainer = styled.View`
`;

const ModalView = styled.View`
    flex: 1;
    justify-content: center;
    align-items: center;
`;

const ButtonWrapper = styled.View`
    flex-direction: row;
`;

const CloseButtonWrapper = styled.TouchableOpacity`
    width: 100;
    height: 75;
    border-radius: 8;
    border-width: 1;
    border-color: #82b1ff;
`;

const CloseButtonText = styled.Text`
    color: white;
`;

const mapStateToProps = ({ cats }) => ({
    allCats: cats.allCats   
});

const mapDispatchToProps = {
    addCat
};

class ManageCats extends Component {
    
    state = {
        modalVisible: false
    }
    renderCatForm = () => {
        this.setState({
            modalVisible: true
        });
    };

    closeModal = () => {
        this.setState({
            modalVisible: false
        });
    }

    addCat = (cat) => {
        const { addCat } = this.props;
        addCat(cat);
        this.closeModal();
    }
    render() {
        const { allCats } = this.props;
        const { modalVisible } = this.state;

        return (
            <HomeContainer>
                {
                    modalVisible ?
                        <Modal
                            animationType="slide"
                            visible={modalVisible}
                            transparent={true}
                            onRequestClose={() => 'closed'}
                        >
                            <ModalView>
                                <AddCatForm addCat={this.addCat} closeModal={this.closeModal} />
                            </ModalView>
                        </Modal>
                        :
                        null
                }
                <ListContainer>
                    <CatList allCats={allCats} />
                </ListContainer>
                <AddCatButton renderCatForm={this.renderCatForm} />
            </HomeContainer>
        );
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(ManageCats);