React Native Navigation with Redux

App.js

import React, { Component } from 'react';
import {
  View, Platform,
} from 'react-native';
import { Provider } from 'react-redux';
import { Navigation } from 'react-native-navigation';
import Splash from '../containers/Splash';
import Auth from '../containers/Auth';
import Profile from '../containers/Profile';
import Feed from '../containers/Feed';
import Stories from '../containers/Stories';
import configureStore from '../redux/store/store';

// Configured store
const store = configureStore();

const createScreen = (ScreenComponent, ...props) => (
        <View style={{ flex: 1, marginTop: Platform.OS === 'ios' ? 18 : 0 }}>
          <Provider store={store}>
            <ScreenComponent
              {...{
                ...props,
              }}
            />
          </Provider>
        </View>
      );

export default () => {
  Navigation.registerComponent('Splash', () => createScreen(Splash));
  Navigation.registerComponent('Auth', () => createScreen(Auth));
  Navigation.registerComponent('Profile', () => createScreen(Profile));
  Navigation.registerComponent('Feed', () => createScreen(Feed));
  Navigation.registerComponent('Stories', () => createScreen(Stories));
};

index.js

import { Navigation } from 'react-native-navigation';
import registeredApp from './src/screens/App';
import { Colors } from './src/styles/styles';

registeredApp();

Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setDefaultOptions({
    statusBar: {
      backgroundColor: Colors.primary,
    },
    topBar: {
      elevation: 0,
      visible: false,
      height: 0,
      title: {
        fontSize: 21,
        alignment: 'center',
        color: 'rgba(255,255,255,0.9)',
      },
      background: {
        color: Colors.primary,
      },
      backButton: {
        color: '#fff',
      },
      animate: false,
    },
    animations: {
      push: {
        waitForRender: true,
        content: {
          x: {
            from: 0,
            to: 1,
            duration: 10,
            interpolation: 'accelerate',
          },
        },
      },
      pop: {
        content: {
          x: {
            from: 0,
            to: 1,
            duration: 10,
            interpolation: 'decelerate',
          },
        },
      },
    },
  });

  Navigation.setRoot({
    root: {
      stack: {
        id: 'AppStack',
        children: [{
          component: {
            name: 'Splash',
            options: {
              topBar: {
                visible: false,
                height: 0,
              },
            },
          },
        },
        ],
      },
    },
  });
});

Profile.js

import React, { Component } from 'react';
import {
  Text, View, TouchableOpacity,
} from 'react-native';
import { connect } from 'react-redux';
import { Navigation } from 'react-native-navigation';
import { bindActionCreators } from 'redux';
import { fetchStories } from '../../redux/actions/StoriesActions';


export class Profile extends Component {
  constructor(props) {
    super(props);
    Navigation.events().bindComponent(this);
  }

  componentDidAppear() {
    this.mapStateToProps.fetchStories();
  }

  _goToStories = () => {
    const { componentId } = this.props;
    Navigation.push(componentId, {
      component: {
        name: 'profile',
        options: {
          topBar: { visible: false, height: 0 },
        },
      },
    });
  };


  render() {
    const { profile: { name }} = this.props;
    return (
      <View>
        <Text>Name: {name}</Text>
        <TouchableOpacity onPress={this._goToStories}>
          <View>
            <Text>Check stories</Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}

export const mapDispatchToProps = dispatch => bindActionCreators(
  {
    fetchStories,
  },
  dispatch,
);

export const mapStateToProps = state => ({
  profile: state.profile,
});

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