react-navigation: full screen background with transparent status bar and nav bar

login-navigator.js

import React from 'react'
import { StackNavigator } from 'react-navigation'
import { Image, StatusBar, Platform } from 'react-native'

import SignInScreen from './signin'
import LoginScreen from './login'
import RegisterScreen from './register'
import ForgotPasswordScreen from './forgot-password'
import Styles from '../../styles/login'

const LoginNavigator = StackNavigator({
  SignIn: { screen: SignInScreen },
  Login: { screen: LoginScreen },
  Register: { screen: RegisterScreen },
  ForgotPassword: { screen: ForgotPasswordScreen },
}, {
  mode: 'card',
  cardStyle: { backgroundColor: 'transparent' },
  tintColor: '#ffffff',
  headerMode: 'screen'
});

class LoginScreenWrapper extends React.Component {
  static navigationOptions = {
    header: {
      visible: false,
    }
  }
  render() {
    return (
      <Image source={require('../../../img/login_bg.png')} style={Styles.backgroundImage}>
        <StatusBar barStyle="light-content" backgroundColor="transparent" translucent={true}/>
        <LoginNavigator screenProps={{rootNavigation: this.props.navigation}} style={{marginTop: StatusBar.currentHeight}}/>
      </Image>
    )
  }
}

export default LoginScreenWrapper

signin.js

import React, { PropTypes } from 'react'
import { Text, View } from 'react-native'
import BarButton, { BarButtonGroup } from '../../components/common/bar-button'
import Styles from '../../styles/login'

class SignIn extends React.Component {
  static navigationOptions = {
    header: (navigation) => ({
      visible: true,
      style: Styles.navBar,
      tintColor: 'white',
    }),
  }

  render () {
    return (
      <View style={Styles.container}>
        <Text style={Styles.text}>All login / signup options are here</Text>
      </View>
    )
  }
}

export default SignIn;

styles-login.js

import { StyleSheet } from 'react-native'
import CommonStyles from './common'

export default StyleSheet.create({
  navBar: {
    backgroundColor: 'transparent',
  },
  backgroundImage: {
    resizeMode: 'cover',
    width: null,
    height: null,
    backgroundColor: 'transparent',
    flex: 1,
    flexDirection: 'column',
  },
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: 'white'
  }
})

use the image-background instead of image
<ImageBackground style={{height:'100%',width:'100%'}} />
<StatusBar
translucent={false}
backgroundColor={'transparent'}
barStyle={'light-content'}
/>