React-native-router-flux: [Question] How to *really* upgrade from V3 to V4?

[itinance]

react-native: 0.45.1
react: 16.0.0.-alpha12
react-native-router-flux: 4.0.0-beta11

We ran into issues with our previous setup based on V3 after upgrading to V4. Since V3 is not working any more on RN 0.45.1 due to missing dependencies based in react-native-navigator-experimental, we need a way to keep on running with V4.

These are our scenes:

<ReduxRouter >
        <Scene
          key='drawer'
          component={Drawer}
          open={false}
          >
          <Scene
            key='homeView'
            component={Modal}
            contentComponent={Drawer}
            >
            <Scene key='homeViewNormal'
              hideNavBar={false}
              drawerImage={require('./img/menu.png')}
              navigationBarStyle={{ backgroundColor: COLORS.HEADER_BACKGROUND, borderBottomWidth: 0 }}
              leftButtonIconStyle = {{ tintColor:'white'}}
              titleStyle={{color: 'white', fontSize: normalize(14), fontWeight: 'bold'}}
              >

              <Scene key='main' hideNavBar={false} title='Chats'
                type={ActionConst.REPLACE}
                renderRightButton={this.renderRightButtonForChat}
                component={ChatListViewScene} sceneStyle={getScreenContainerStyle()}
                initial={ currentUser !== null && currentUser.id }
              />

              <Scene key='newEvent' hideNavBar={false} title='New Event'
                component={EventEditViewScene} sceneStyle={getScreenContainerStyle()}
              />

              <Scene key='signin' hideNavBar={true} title='Sign in'
                type={ActionConst.REPLACE}
                component={SignInViewScene}
                initial={ ! currentUser }
              />
              <Scene key='signup' hideNavBar={false} title='Create Account'
                component={SignUpViewScene} sceneStyle={getScreenContainerStyle()}
              />

             // and many many more and so on ....

            </Scene>
          </Scene>
        </Scene>
</ReduxRouter>

In some scenes we push to another scenes with:

Actions.main()

or

Actions.main({type: ActionConst.REPLACE})

But both calls will raise exceptions called

actions[type] is not a function

I've already read https://github.com/aksonov/react-native-router-flux/issues/2017 and tried to flatten down our scenes. But this exception persists.

I'm also courious how to deal with Drawer in V4 according to your statement:

Built-in reactnavigation drawer support (use drawer attribute for Scene and contentComponent to use your own Drawer)

But this one i've already placed here and will mention it here also for the sake of completeness:
https://github.com/aksonov/react-native-router-flux/issues/1974#issuecomment-316026221

Is the new drawer-Attribute simply a boolean setting to true when a scene is managed by a drawer? I understood, that contentComponent will now be the attribute where to pass the final Drawer-Component (which was passed with "drawer"-Attribute in V3)

Can you or another contributor please update the docs or give any hints? Thank you :)

[aksonov]

1. Use 'replace' instead of ActionConst.REPLACE within Scene declaration (will add it to breaking change)
2. Scenes cannot have both 'component' and 'children' (will add assert for the next version)
3. Drawer syntax was changed (boolean drawer attribute + contentComponent for side menu component + Actions.drawerOpen/Actions.drawerClose to open/close drawer)

[itinance]

Thank you very much. WIll give it a new try tomorrow

[itinance]

@aksonov One more question please.

How can i exchange the Menu-Icon, that is used in the NavBar with drawer?

I looked around in NavBar.js and tried to pass a property "leftButtonImage" to the Scene. But this property isn't passed thru to the state, that will passed itself to renderBackButton()

[aksonov]

1. Try drawerImage
2. It is because of transpiled code. Change dist/index.js to src/index.js within node_modules/rnrf first

19 июля 2017 г., в 20:16, Hagen Hübel [e-mail] написал(а):

@aksonov One more question please.

How can i exchange the Menu-Icon, that is used in the NavBar with drawer?

I looked around in NavBar.js and tried to pass a property "backButtonImage". But it won't work.
I also tried to pass some console.log into the function "renderBackButton", but it gots never called.

Buy the way, how did you worked/debugged the example application?
Even if i completely reset packager and restart everything from scratch and change lines in "node_modules/react-native-router-flux" in the Example-application they got never called. I've never had this behaviour before with lower RN-versions, when i created my pull request for the navbar-background, which needed those things for debugging....

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[itinance]

Thank you very much!

There is one special detail: on the most outer Scene with drawer={true}the attribute drawerImage={...} needs to be placed.
I think you should add this to the documentation :)

[aksonov]

@itinance Thanks, docs were updated. Closing this ticket.

[DayaramK]

hi how can i integrate Drawer using react-native-router-flux: 4.0.0-beta21