Router doesn't render over the parent element

[pukhalski]

Version

• react-native-router-flux v4.0.0-beta.16
• react-native v0.46.4

Expected behaviour

Background image of parent component wrapper is visible

Actual behaviour

Background image of parent component wrapper is not visible

<Provider store={store}>
    <ImageBackground source={require('./bg.png')} style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
      <Router getSceneStyle={() => ({ backgroundColor: 'transparent' )}>
          <Scene key="home"  component={Home} title="Welcome" />
      </Router>
    </ImageBackground>
  </Provider>

[pukhalski]

Made it work with a nasty trick of making a wrapper of zero height:

<ImageBackground source={require('./Background.png')} style={style.bg}>
        <View style={{
          position: 'absolute',
          width: '100%' }}>
            ...Router
        </View>
      </ImageBackground>

[dvvtms]

simple try this:

<Image
    style={{
      flex: 1,
      width: null,
      height: null,
      resizeMode: 'cover',
    }}
    source={{
      uri:'',
    }}
  >
<Router getSceneStyle={() => ({ backgroundColor: 'transparent' )}>
          <Scene key="home"  component={Home} title="Welcome" />
      </Router>
</Image>

for me working

[pukhalski]

@devvtms, thanks! any ideas on how to fix #2220 by a chance? :)

I need it only for some part of my scenes, not for all of them.

[aksonov]

Closing it in favour to #2220

[isAlmogK]

None if this is working, anyone have any ideas here is my code

render() {
        return (
            <View style={styles.container}>
                <ImageBackground source={require('./images/background.jpg')} style={styles.backgroundImage}>
                <Provider store={store}>
                    <ConnectedRouter>
                        <Scene key="root" hideNavBar hideTabBar>
                            <Scene key="public">
                                <Scene key="login" component={Login} initial={true} title={'Login'} />
                                <Scene key="ResetPassword" component={ResetPassword} title={'Reset Password'} />
                            </Scene>
                            <Scene key="tabBar" tabs lazy>
                                <Scene key="tab1" title="Home" tabBarLabel="Home" icon={HomeTabIcon}>
                                    <Scene key='Home' component={Home} title='Home' initial={true}  panHandlers={null}/>
                                    <Scene key='Teams' component={Teams} title='Teams' initial={false} />
                                    <Scene key='Sync' component={Sync} title='Syncing Data' initial={false}  hideTabBar hideNavBar />
                                </Scene>
                                <Scene key="tab2" title="Photos" tabBarLabel="Photos" icon={PhotosTabIcon}>
                                    <Scene key='Photos' component={Photos} title='Photos' back backTitle='Back' initial={false} />
                                    <Scene key='SinglePhoto' component={SinglePhoto} title='Photo' back backTitle='Back' initial={false} />
                                    <Scene key='PhotoUpload' component={PhotoUpload} title='Upload Photo' back backTitle='Back' initial={false} />
                                </Scene>
                                <Scene key="tab3" title="Site Diary" tabBarLabel="Site Diary" icon={SiteDiaryTabIcon}>
                                    <Scene key='SiteDiary' component={SiteDiary} title='SiteDiary' initial={false} />
                                </Scene>
                            </Scene>
                        </Scene>
                    </ConnectedRouter>
                </Provider>
                <MessageBar/>
                </ImageBackground>
            </View>
        );
    }
}

//progress={this.state.overlayProgress} indeterminate={this.state.indeterminate}
//<ImageBackground source={require('./images/background.jpg')} style={styles.backgroundImage}></ImageBackground>

const styles = StyleSheet.create({
    container: {
        padding: 0,
        flex: 1,
        flexDirection: 'column'
    },
    backgroundImage: {
        flex: 1,
        width: null,
        height: null,

    }
})