Router doesn't get rendered on screen - Android

[martinshhh]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta27
• react-native v0.50.0

Expected behaviour

Router initial screen shows up on screen.

Actual behaviour

Router doesn't get rendered on screen after cloning the project and using it in Android. In IOS it works completely fine with no problems.

My Router definition

        <Router getSceneStyle={() => styles.sceneStyle} navigationBarStyle={{ backgroundColor: 'transparent', borderBottomWidth: 0 }}>
            <Scene transitionConfig={TransitionConfiguration} key="root">
                <Scene key="getHomeNoLogin" initial={true} component={Component1} />
                <Scene key="getLogin" component={Login} />
                <Scene key="getForgotPassword" component={ForgotPassword} />
                <Scene key="getSignup" component={Signup} />
                <Scene key="getHome" component={Home} />
                <Scene key="getInfo" component={Info} title="INFORMAÇÕES" navBar={CustomNavBar} />
                <Scene key="getInfoDashboard" component={InfoDashboard} navBar={CustomNavBar} />
                <Scene key="getInfoDetails" component={InfoDetails} navBar={CustomNavBar} />
                <Scene key="getSchedule" component={Schedules} title="Tratamentos" navBar={CustomNavBar} />
                <Scene key="getAlerts" component={Alerts} title="ALERTAS" navBar={CustomNavBar} />
                <Scene key="getHistory" component={History} title="HISTÓRICO" navBar={CustomNavBar} />
                <Scene key="getSettings" component={Settings} title="DEFINIÇÕES" navBar={CustomNavBar} />
            </Scene>
        </Router>

My App.js

    return (
      <Provider store={store}>
        <View style={{ flex: 1, backgroundColor: 'transparent' }}>
          <NavRouter />
        </View>
      </Provider>
      );

[Blapi]

What if you do this :

    return (
      <Provider store={store}>
        <Router getSceneStyle={() => styles.sceneStyle} navigationBarStyle={{ backgroundColor: 'transparent', borderBottomWidth: 0 }}>
            <Scene transitionConfig={TransitionConfiguration} key="root">
                <Scene key="getHomeNoLogin" initial={true} component={Component1} />
                <Scene key="getLogin" component={Login} />
                <Scene key="getForgotPassword" component={ForgotPassword} />
                <Scene key="getSignup" component={Signup} />
                <Scene key="getHome" component={Home} />
                <Scene key="getInfo" component={Info} title="INFORMAÇÕES" navBar={CustomNavBar} />
                <Scene key="getInfoDashboard" component={InfoDashboard} navBar={CustomNavBar} />
                <Scene key="getInfoDetails" component={InfoDetails} navBar={CustomNavBar} />
                <Scene key="getSchedule" component={Schedules} title="Tratamentos" navBar={CustomNavBar} />
                <Scene key="getAlerts" component={Alerts} title="ALERTAS" navBar={CustomNavBar} />
                <Scene key="getHistory" component={History} title="HISTÓRICO" navBar={CustomNavBar} />
                <Scene key="getSettings" component={Settings} title="DEFINIÇÕES" navBar={CustomNavBar} />
            </Scene>
        </Router>
      </Provider>
      );

[martinshhh]

@Blapi I get the same result, but I need to provide the store in App.js because I have a component <BackgroundVideo /> that is going to be displayed in the background on all my components and it requires the <Provide store={store}>.

[Blapi]

Yep I'm doing the same, it's just that I don't have a View containing my Router.
Everything works fine on my Android App when doing this, maybe this is an issue with your Scene Component

[martinshhh]

And you were able to get video working behind the router?
Well, this is my SceneStyle, I'm using negative marginTop that contains the height of the window:

    sceneStyle: {
      backgroundColor: 'transparent',
      shadowColor: null,
      shadowOffset: null,
      shadowOpacity: null,
      shadowRadius: null,
      zIndex: 1,
      position: 'absolute',
      marginTop: -height,
      justifyContent: 'center'

[Blapi]

No I don't have any video running in background, sorry, but yes, I'm developing on Android.
At this point, I am not really sure that the issue is related to RNRF as it works on iOS. Check SO, might have an issue with video and Android

[martinshhh]

I was able to get it working by removing the negative marginTop, seems like React-Native in android doesn't supports it.
I also had to set my video style to:

        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0

[Blapi]

Great! :)