NavBar covered by views

[mishuagopian]

Version

Tell us which versions you are using:

• react-native-router-flux v3.34.0
• react-native v0.31.0

Expected behaviour

When creating nested scenes, where each of them render a component, app's navBar doesn't get covered by components views.

Actual behaviour

When creating nested scenes, where we have more than a component being rendered, app's navBar gets covered by components views.

Steps to reproduce

My Router

  render() {
    return <Router>
      <Scene key="root" component={BoxScene} >
        <Scene key="TrackField" component={TrackField} title="Track Field" initial={true} />
      </Scene>
    </Router>
  }

BoxScene component

import React from 'react';
import { StyleSheet } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { DefaultRenderer } from 'react-native-router-flux';

import Box from '../Box/Box';
import colors from '../../colors';

export default function BoxScene ({ navigationState, onNavigate }) {
  return (
    <LinearGradient
      colors={[colors.pink, colors.white]}
      start={[0.5, 0.25]} end={[0.5, 1.0]}
      locations={[0.4,0.4]}
      style={styles.container} >

      <Box style={styles.box}>
        <DefaultRenderer navigationState={navigationState.children[0]} onNavigate={onNavigate} />
      </Box>
    </LinearGradient>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'stretch',
    justifyContent: 'center',
    paddingTop: 55
  },
  box: {
    flex: 1,
    marginBottom: 150,
    marginTop: 50,
    marginHorizontal: 25
  }
});

TrackField component

import React, { Component } from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import Button from 'react-native-button/Button';
import { Actions } from 'react-native-router-flux';

import colors from '../../colors';

import TrackFieldImg from './TrackField1.png';

export default function TrackField () {
  return (
    <View style={styles.box}>
      <Text
        style={styles.title} >
        PRIMER LATERAL
      </Text>
      <Image
        source={TrackFieldImg}
        style={styles.image}
      />
      <Text
        style={styles.text} >
        Recorre los dos laterales de la cancha para poder trackear tus movimientos
      </Text>
      <Button
        onPress={Actions.GPS}
        style={styles.button} >
        PAUSAR
      </Button>
    </View>
  );
}

const styles = StyleSheet.create({
  title: {
    color: colors.black,
    fontSize: 18,
    fontStyle: 'italic',
    fontWeight: 'bold',
  },
  image: {
    height: 130,
    width: 200
  },
  text: {
    color: colors.black,
    textAlign: 'center'
  },
  button: {
    backgroundColor: colors.pink,
    color: colors.white,
    fontSize: 16,
    fontStyle: 'italic',
    height: 30,
    textAlignVertical: 'center',
    width: 180
  },
  box: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-around'
  }
});

Working Router

Note that if I remove the BoxScene component from the root Scene, then the navBar gets rendered properly.

  render() {
    return <Router>
      <Scene key="root" >
        <Scene key="TrackField" component={TrackField} title="Track Field" initial={true} />
      </Scene>
    </Router>
  }

I also tried many other things, like removing all the styling, only rendering child on the root component, and things like that. The issue appears when we have more than a component being rendered, making the navBar dissappear.

@aksonov