Переключение родительского компонента React без размонтирования дочернего компонента

Question

Я хочу изменить родительский компонент с <View /> на <SafeAreaView /> без размонтирования вложенного дочернего класса.

// App

<SafeView>
  <MainNavigator />
</SafeView>

// SafeView component

class SafeView extends React.Component<Props> {
  render() {
    const { children, showSafeView } = this.props;
    const Component = showSafeView ? SafeAreaView : View;
    return (
      <Component style={styles.view} key="test_component">
        <View style={{ flex: 1 }} key="test_view">
          { children }
        </View>
      </Component>
    );
  }
}

const mapStateToProps = state => ({ showSafeView: state.navigation.safe });

export default connect(mapStateToProps)(SafeView);

Наблюдаемое поведение:

1. Обновления props showSafeView
2. Изменения родительского компонента
3. Демонтирование дочернего компонента
4. Дочерний компонент монтируется

Вы можете видеть, что яЯ использую props.children, но я также попытался передать дочерний компонент напрямую в виде проп, с тем же результатом:

<SafeView Child={MainNavigator} />

///

const { Child, showSafeView } = this.props;
const Component = showSafeView ? SafeAreaView : View;
return (
  <Component style={styles.view} key="test_component">
    <View style={{ flex: 1 }} key="test_view">
      <Child key="test_child" />
    </View>
  </Component>