Navigating just not doing anything

[Frexuz]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.22
• react-native v0.45.1

Expected behaviour

Navigation to work

Actual behaviour

Navigation is not navigating

Full video: https://youtu.be/wKrYXHO9BnI

Steps to reproduce

I copied over everything from your Example app (that's why i use /components2/).

import { AppRegistry } from 'react-native';
import flatelyNative from './app/screens';
AppRegistry.registerComponent('flatelyNative', () => flatelyNative);

app/screens/index.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Launch from '../components2/Launch';
import Register from '../components2/Register';
import Login from '../components2/Login';
import Login2 from '../components2/Login2';
import Login3 from '../components2/Login3';
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStackStyleInterpolator';
import {
  Scene,
  Router,
  Actions,
  Reducer,
  ActionConst,
  Overlay,
  Tabs,
  Modal,
  Drawer,
  Stack,
  Lightbox,
} from 'react-native-router-flux';
import Home from '../components2/Home';
import DrawerContent from '../components2/drawer/DrawerContent';
import TabView from '../components2/TabView';
import TabIcon from '../components2/TabIcon';
import EchoView from '../components2/EchoView';
// import MessageBar from '../components2/MessageBar';
import ErrorModal from '../components2/modal/ErrorModal';
import DemoLightbox from '../components2/lightbox/DemoLightbox';
// import MenuIcon from './images/menu_burger.png';
import CustomNavBarView from "../components2/CustomNavBarView";
import CustomNavBar from "../components2/CustomNavBar";
import CustomNavBar2 from "../components2/CustomNavBar2";

const styles = StyleSheet.create({
  container: {
    flex: 1, backgroundColor: 'transparent', justifyContent: 'center',
    alignItems: 'center',
  },
  tabBarStyle: {
    backgroundColor: '#eee',
  },
  tabBarSelectedItemStyle: {
    backgroundColor: '#ddd',
  },
});

const reducerCreate = params => {
  const defaultReducer = new Reducer(params);
  return (state, action) => {
    console.log('ACTION:', action);
    return defaultReducer(state, action);
  };
};

const getSceneStyle = () => ({
  backgroundColor: '#F5FCFF',
  shadowOpacity: 1,
  shadowRadius: 3,
});

const flatelyNative = () => (
  <Router
    createReducer={reducerCreate}
    getSceneStyle={getSceneStyle}
  >
    <Overlay>
      <Modal
        hideNavBar
        transitionConfig={() => ({ screenInterpolator: CardStackStyleInterpolator.forFadeFromBottomAndroid })}
      >
        <Lightbox>
          <Stack
            hideNavBar
            key="root"
            titleStyle={{ alignSelf: 'center' }}
          >
            <Scene key="echo" back clone component={EchoView} getTitle={({ navigation }) => navigation.state.key} />
            <Scene key="launch" component={Launch} title="Launch" initial />

            <Stack key="customNavBar" hideTabBar titleStyle={{alignSelf: 'center'}}>
              <Scene
                key="customNavBar1"
                title="CustomNavBar 1"
                navBar={CustomNavBar}
                component={CustomNavBarView}
                back
              />
              <Scene
                key="customNavBar2"
                title="CustomNavBar 2"
                navBar={CustomNavBar}
                component={CustomNavBarView}
                back
              />
              <Scene
                key="customNavBar3"
                title="Another CustomNavBar"
                navBar={CustomNavBar2}
                component={CustomNavBarView}
                back
              />
              <Scene
                key="hiddenNavBar"
                title="hiddenNavBar"
                component={CustomNavBarView}
                hideNavBar={true}
                back
              />
            </Stack>

            <Stack
              back
              backTitle="Back"
              key="register"
              duration={0}
            >
              <Scene key="_register" component={Register} title="Register" />
              <Scene key="register2" component={Register} title="Register2" />
              <Scene key="home" component={Home} title="Replace" type={ActionConst.REPLACE} />
            </Stack>

            <Drawer
              hideNavBar
              key="drawer"
              contentComponent={DrawerContent}
            >
              {/*
                Wrapper Scene needed to fix a bug where the tabs would
                reload as a modal ontop of itself
              */}
              <Scene hideNavBar>
                <Tabs
                  key="tabbar"
                  swipeEnabled
                  showLabel={false}
                  tabBarStyle={styles.tabBarStyle}
                  activeBackgroundColor="white"
                  inactiveBackgroundColor="rgba(255, 0, 0, 0.5)"
                >
                  <Stack
                    key="tab_1"
                    title="Tab #1"
                    tabBarLabel="TAB #1"
                    inactiveBackgroundColor="#FFF"
                    activeBackgroundColor="#DDD"
                    icon={TabIcon}
                    navigationBarStyle={{ backgroundColor: 'green' }}
                    titleStyle={{ color: 'white', alignSelf: 'center' }}
                  >
                    <Scene
                      key="tab1_1"
                      component={TabView}
                      title="Tab #1_1"
                      onRight={() => alert('Right button')}
                      rightTitle="Right"

                    />

                    <Scene
                      key="tab1_2"
                      component={TabView}
                      title="Tab #1_2"
                      back
                      titleStyle={{ color: 'black', alignSelf: 'center' }}
                    />
                  </Stack>

                  <Stack
                    key="tab_2"
                    title="Tab #2"
                    icon={TabIcon}
                    initial
                  >
                    <Scene
                      key="tab_2_1"
                      component={TabView}
                      title="Tab #2_1"
                      renderRightButton={() => <Text>Right</Text>}
                    />
                    <Scene
                      key="tab_2_2"
                      component={TabView}
                      title="Tab #2_2"
                      onBack={() => alert('onBack button!')}
                      backTitle="Back!"
                      panHandlers={null}
                    />
                  </Stack>

                  <Stack key="tab_3">
                    <Scene
                      key="tab_3_1"
                      component={TabView}
                      title="Tab #3"
                      icon={TabIcon}
                      rightTitle="Right3"
                      onRight={() => { }}
                    />
                  </Stack>
                  <Stack key="tab_4">
                    <Scene key="tab_4_1" component={TabView} title="Tab #4" hideNavBar icon={TabIcon} />
                  </Stack>
                  <Stack key="tab_5">
                    <Scene key="tab_5_1" component={TabView} title="Tab #5" icon={TabIcon} />
                  </Stack>
                </Tabs>
              </Scene>
            </Drawer>
          </Stack>

          <Scene key="demo_lightbox" component={DemoLightbox} />
        </Lightbox>
        <Scene key="error" component={ErrorModal} />
        <Stack key="login" titleStyle={{ alignSelf: 'center' }}>
          <Scene
            key="loginModal"
            component={Login}
            title="Login"
            onExit={() => console.log('onExit')}
            leftTitle="Cancel"
            onLeft={Actions.pop}
          />
          <Scene
            key="loginModal2"
            component={Login2}
            title="Login2"
            backTitle="Back"
            panHandlers={null}
            duration={1}
          />
          <Scene
            key="loginModal3"
            hideNavBar
            component={Login3}
            title="Login3"
            panHandlers={null}
            duration={1}
          />
        </Stack>
      </Modal>
    </Overlay>
  </Router>
);

export default flatelyNative;

yarn.lock
https://gist.github.com/Frexuz/837e54e84238c3c64d0ea91cf0fc4d26

[aksonov]

Sorry, I can't reproduce - just installed Example and it works well. Gist is not helpful here, just fork and modify this repo and give me the link.