How to use with children that use flexbox (required by react-native)

[kopax]

Hello, I am doing an app with react-native which use flexbox for positioning elements.

When I create the <SideBar />, the children <View /> use justifyContent: 'flex-end' to fix some content at the bottom of my view. (Like explained here: https://medium.com/react-native-training/position-element-at-the-bottom-of-the-screen-using-flexbox-in-react-native-a00b3790ca42)

This is my SideBar and it break my layout:

import React from 'react';
import Sidebar from 'react-sidebar';

const mql = window.matchMedia(`(min-width: 800px)`);

class Navigator extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      docked: mql.matches,
      open: false
    };

    this.mediaQueryChanged = this.mediaQueryChanged.bind(this);
    this.toggleOpen = this.toggleOpen.bind(this);
    this.onSetOpen = this.onSetOpen.bind(this);
  }

  componentWillMount() {
    mql.addEventListener('change', this.mediaQueryChanged);
  }

  componentWillUnmount() {
    mql.removeEventListener('change', this.mediaQueryChanged);
  }

  onSetOpen(open) {
    this.setState({ open });
  }

  mediaQueryChanged() {
    this.setState({
      docked: mql.matches,
      open: false
    });
  }

  toggleOpen(ev) {
    this.setState({ open: !this.state.open });

    if (ev) {
      ev.preventDefault();
    }
  }

  render() {
    const {
      drawerContent: DrawerContent,
      children,
    } = this.props;

    const sidebarProps = {
      sidebar: <DrawerContent />,
      docked: this.state.docked,
      open: this.state.open,
      onSetOpen: this.onSetOpen
    };

    return (
      <Sidebar {...sidebarProps}>
        {children}
      </Sidebar>
    );
  }
}

How can I use the <SideBar /> without breaking the flex configuration of my layout?