Sample of react native + redux + react-navigation... how all fits together.

App.js

import React, { Component } from "react";
import { View, Text, Button } from "react-native";
import {
    createStackNavigator,
    NavigationActions,
    createDrawerNavigator
} from "react-navigation";
import {
    createNavigationReducer,
    createReactNavigationReduxMiddleware,
    reduxifyNavigator
} from "react-navigation-redux-helpers";
import { Provider, connect } from "react-redux";
import { createStore, applyMiddleware, combineReducers } from "redux";
import thunk from "redux-thunk";

function navigateToOne() {
    return dispatch =>
        dispatch(NavigationActions.navigate({ routeName: "one" }));
}

function navigateToTwo() {
    return dispatch =>
        dispatch(NavigationActions.navigate({ routeName: "two" }));
}

const actions = {
    navigateToOne,
    navigateToTwo
};

class Screen1 extends Component {
    render() {
        return (
            <View
                style={{
                    flex: 1,
                    alignItems: "center",
                    justifyContent: "center",
                    backgroundColor: "pink"
                }}
            >
                <Text>{this.props.foo}</Text>
                <Button title="tap me 1" onPress={this.props.navigateToTwo} />
            </View>
        );
    }
}

const Screen1Container = connect(
    s => s,
    actions
)(Screen1);

class Screen2 extends Component {
    render() {
        return (
            <View
                style={{
                    flex: 1,
                    alignItems: "center",
                    justifyContent: "center"
                }}
            >
                <Text>{this.props.foo}</Text>
                <Button title="tap me 2" onPress={this.props.navigateToOne} />
            </View>
        );
    }
}

const Screen2Container = connect(
    s => s,
    actions
)(Screen2);

class Screen3 extends Component {
    render() {
        return (
            <View
                style={{
                    flex: 1,
                    alignItems: "center",
                    justifyContent: "center", backgroundColor: "blue"
                }}
            >
                <Text>{this.props.foo}</Text>
                <Button title="tap me 3" onPress={this.props.navigateToOne} />
            </View>
        );
    }
}

const Screen3Container = connect(
    s => s,
    actions
)(Screen3);

const routeConfig = {
    one: { path: "/1", screen: Screen1Container },
    two: { path: "/2", screen: Screen2Container }
};

const stackConfig = {
    initialRouteName: "one"
};

const AppNavigator = createStackNavigator(routeConfig, stackConfig);

const drawRouteConfig = {
    root: { path: "/app/root", screen: AppNavigator },
    three:{ path: "/app/3", screen: Screen3Container }
};

const drawConfig = {
    initialRouteName: "root"
};

const AppDrawer = createDrawerNavigator(drawRouteConfig, drawConfig);

function fooReducer(state = "hello") {
    return state;
}

const navReducer = createNavigationReducer(AppDrawer);

const reducers = combineReducers({
    foo: fooReducer,
    nav: navReducer
});

// Note: createReactNavigationReduxMiddleware must be run before reduxifyNavigator
const middleware = createReactNavigationReduxMiddleware(
    "root",
    state => state.nav
);

const reduxNav = reduxifyNavigator(AppDrawer, "root");
const AppNavigatorContainer = connect(s => ({ state: s.nav }))(reduxNav);
const store = createStore(reducers, applyMiddleware(middleware, thunk));

export default class App extends Component {
    render() {
        return (
            <Provider store={store}>
                <View style={{ flex: 1 }}>
                    <AppNavigatorContainer />
                </View>
            </Provider>
        );
    }
}