reduxifyNavigatorをcreateReduxContainerに置き換えたい

Question

実践EXPOという本の内容を実施しています。
Reduxの設定をするところでつまづいてしまいました。

reduxifyNavigatorを使っているところで、
以下のようにエラーが出ましたが、どのように変更をすれば良いでしょうか。

reduxifyNavigator is deprecated in react-navigation-redux-helpers@3.0.0! Please use createReduxContainer instead.

参考にした本とパッケージのバージョンが違いますが、
できるだけ新しいものを使ってやりたいです。

ソース

• githubにつまづいた今の状態をpushしています。
• 本のサンプルアプリ

app/src/navigation/RootNavigation.js

import React from 'react';
import { BackHandler } from 'react-native';
import { connect } from 'react-redux';
import { NavigationActions } from 'react-navigation';
import { reduxifyNavigator } from 'react-navigation-redux-helpers';

// from app
import AppNavigator from 'app/src/navigation/AppNavigator';

const App = reduxifyNavigator(AppNavigator, 'root');

@connect(state => ({
  nav: state.nav,
}))
export default class AppWithNavigationState extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: false,
    };
  }

  async componentDidMount() {
    // this.onBackPress が Android のバックボタンで呼び出されるようにする
    BackHandler.addEventListener('hardwareBackPress', this.onBackPress);
  }

  componentWillUnmount() {
    // this.onBackPress が Android のバックボタンで呼び出されないようにする
    BackHandler.removeEventListener('hardwareBackPress', this.onBackPress);
  }

  onBackPress = () => {
    const { nav, dispatch } = this.props;

    if (nav.routes[nav.index].index === 0) {
      return false;
    }

    // 前のスクリーンに戻る
    dispatch(NavigationActions.back());

    return true;
  };

  render() {
    const { loading } = this.state;
    const { nav, dispatch } = this.props;

    if (loading) {
      return null;
    }

    return <App dispatch={dispatch} state={nav} />;
  }
}

app/src/navigation/AppNavigator.js

import {
  createStackNavigator,
  createAppContainer,
  NavigationActions,
} from 'react-navigation';

// screen
import MainTabNavigator from 'app/src/navigation/MainTabNavigator';
import UserScreen from 'app/src/screens/UserScreen';
import TagScreen from 'app/src/screens/TagScreen';
import PostScreen from 'app/src/screens/PostScreen';
import TakeScreen from 'app/src/screens/TakeScreen';
import TakePublishScreen from 'app/src/screens/TakePublishScreen';

// from app
import IconButton from 'app/src/components/IconButton';

// 撮影・メディアの選択から投稿までのスクリーンをもつStackNavigator
const TakeStack = createStackNavigator(
  {
    Take: { screen: TakeScreen },
    TakePublish: { screen: TakePublishScreen },
  },
  {
    headerMode: 'screen',
  }
);

// メインのTabNavigatorとユーザー詳細・タグ検索画面・投稿詳細スクリーンをもつStackNavigator
const CardNavigator = createStackNavigator(
  {
    Main: { screen: MainTabNavigator, navigationOptions: { header: null } },
    User: { screen: UserScreen },
    Tag: { screen: TagScreen },
    Post: { screen: PostScreen },
  },
  {
    navigationOptions: () => ({
      headerTitleStyle: {
        color: '#333',
      },
      headerLeft: IconButton,
    }),
  }
);

// CardNavigatorとTakeStackをもつStackNavigator
const AppNavigator = createStackNavigator(
  {
    MainStack: {
      screen: CardNavigator,
      navigationOptions: {
        header: null,
      },
    },
    TakeModal: {
      screen: TakeStack,
    },
  },
  {
    // TakeStackへの遷移はモーダルモードで行う
    mode: 'modal',
    headerMode: 'none',
    navigationOptions: () => ({
      headerTitleStyle: {
        color: '#333',
      },
    }),
  }
);

// 同じスクリーンから同じスクリーンに移動することを避ける
const navigateOnce = getStateForAction => (action, state) => {
  const { type, routeName } = action;

  if (state && type === NavigationActions.NAVIGATE) {
    // 直前の routeName と遷移先の routeName が同じであれば遷移を無効化
    if (routeName === state.routes[state.routes.length - 1].routeName) {
      return null;
    }
  }

  return getStateForAction(action, state);
};

// アクティブになっている routeName を取得
export const getActiveRouteName = navigationState => {
  if (!navigationState) {
    return null;
  }

  // アクティブな子routeを取得
  const route = navigationState.routes[navigationState.index];

  // 子routesがあれば再帰的に呼び出す
  if (route.routes) {
    return getActiveRouteName(route);
  }

  // 子routeを持たなければrouteNameを返す
  return route.routeName;
};

AppNavigator.router.getStateForAction = navigateOnce(
  AppNavigator.router.getStateForAction
);

export default createAppContainer(AppNavigator);

app/src/index.js

import React from 'react';
import { Provider } from 'react-redux';
import { StatusBar, Platform, View } from 'react-native';

// from app
import store from 'app/src/store';
import AppWithNavigationState from 'app/src/navigation/RootNavigation';

const Navigation = () => (
  <View style={{ flex: 1 }}>
    {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
    <Provider store={store}>
      <AppWithNavigationState />
    </Provider>
  </View>
);

export default Navigation;