React Native Navigator - not redrawing component when data changes in passProps?

Question

I managed to transfer the properties from parent to child and his sibling (which is on a different stage). However, when the parental change data (i.e. Firebase sends the new data down), the marriage friend does not re-display! I have to go back to the original scene and then go back to the Seabiling scene to trigger a re-render.

This is mistake? Or why does sibiling not redraw?

Here is my Navigator component:

var React = require('react-native');
var {
  StyleSheet,
  View,
  Text,
  Component,
  Animated,
  PanResponder,
  TouchableHighlight,
  Navigator,
  ScrollView
} = React;



var Loading = require('../components/loading.ios');
var Rebase = require('re-base');
var base = Rebase.createClass('https://somedb.firebaseio.com');

class NavLayer extends Component {

  renderScene(route, nav) {
    console.log('route!', route.component);
      console.log('route.passProps', route.passProps);

    switch (route.component) {
      case 'Parent':
        return <Parent navigator={nav} />;

      case 'Child':
            return <Child navigator={nav} items={route.passProps.items} />;
      case 'Sibling':
            return <Sibling navigator={nav} items={route.passProps.items} />;
      case 'MainContainer':
          return <MainContainer navigator={nav} />;

      default:
        return (
          <Parent
            navigator={nav}
          />
        );
    }
  }

    render () {

        console.log("Render NavLayer");

        return (

          <Navigator
            initialRoute={{component: 'Parent', title: 'Index', index: 0}}
            renderScene={this.renderScene}
          />
        );
    }
};

Here is my parent component (which receives data from Firebase and re-displays accordingly)

class Parent extends Component {
  constructor(props) {
  super(props);

  this.state = {
    items: [],
    loaded: false,
  }
}

componentDidMount() {

  base.listenTo('items', {
    context: this,
    asArray: true,
    then(data){
      this.setState({items: data});
      this.setState({loaded: true});
    }
  })
}

renderLoadingView() {
  return (
    <Loading text={'Loading...'} color={'#0000ff'}/>

  );
}

  render() {

    console.log("Render Parent");

    if (!this.state.loaded) {
    return this.renderLoadingView();}

      return (
        <View style={styles.container}>
        <View><Text>Parent: {this.state.items}</Text></View>
          <Child navigator={this.props.navigator} items={this.state.items} />
          </View>
      );
  }
};

Here is my child component (which restores the penalty when upgrading Firebase)

class Child extends Component {
  constructor(props) {
    super(props);

    this.state = {
      items: this.props.items,
    }
  }

  goToSibling() {

    this.props.navigator.push({

              name: 'Sibling',
              component: 'Sibling',
              passProps: {items: this.props.items},
            });

      }


  render() {

    console.log("Render Child");


      return (
        <View>
        <View>
          <Text>Child via Props: {this.props.items}</Text>
          <TouchableHighlight onPress={this.goToSibling.bind(this)}><Text>Navigate to     Sibling</Text></TouchableHighlight>    
        </View>    


          </View>
      );
  }
};

Here is my Sibiling Component in a new scene (which does not update when Firebase is updated)

class Sibling extends Component {
  constructor(props) {
    super(props);

    this.state = {
      items: this.props.items,
    }
  }


  render() {

    console.log("Render Sibling");


      return (
        <View>
        <View>
          <Text>Sibling via Props: {this.props.items}</Text>
        </View>


          </View>
      );
  }
};

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'purple',
  }
});

module.exports = NavLayer