Tengo una aplicación aquí donde necesito poner el logo en la barra de navegación. Esa necesidad de desbordar el diseño de la escena. Funciona bien en Ios sin problemas, pero en Android parece que no funciona. Pongo el código en la parte inferior de las imágenes. Como puede ver, uso EStyleSheet, por lo que me permite usar %.

iOS

Androide

 import React from 'react'; import { Scene, Router } from 'react-native-router-flux'; import EStyleSheet from 'react-native-extended-stylesheet'; import { View, Platform } from 'react-native'; import { SmallLogo } from './components'; import { checkColor } from './helpers'; import { HomeScreen, ImagePickerScreen, WaitingResponseScreen, ResultsScreen } from './modules'; import Colors from '../constants/Colors'; const styles = EStyleSheet.create({ navStyle: { flex: 1, marginTop: '5%', alignItems: 'center', }, logoCircle: { backgroundColor: '$whiteColor', height: 60, width: 60, borderRadius: 30, justifyContent: 'center', alignItems: 'center' } }); const logoNav = result => ( <View style={styles.navStyle}> <View style={styles.logoCircle}> <SmallLogo color={checkColor(result)} /> </View> </View> ); const pdTop = Platform.OS === 'ios' ? 64 : 54; export default () => ( <Router sceneStyle={{ paddingTop: pdTop }} navigationBarStyle={{ backgroundColor: Colors.greenColor }} renderTitle={props => { if (props.result) { return logoNav(props.result); } return logoNav(null); }} backButtonTextStyle={{ color: Colors.whiteColor }} leftButtonIconStyle={{ tintColor: Colors.whiteColor }} > <Scene key="home" component={HomeScreen} /> <Scene key="imagesPicker" hideBackImage component={ImagePickerScreen} /> <Scene key="waitingResponse" backTitle="Back" component={WaitingResponseScreen} /> <Scene key="results" backTitle="Back" initial component={ResultsScreen} /> </Router> );