Why viewport have two height ?

[dev4xy]

Since I used Drawer, my page height changes twice

See footer on load :

In fact, we have two viewport.height

I understood this through:

openDrawerOffset={(viewport) => {
    alert(viewport.height)
    return 100
}}

The alert is displayed twice with a different height.

--

My example code (above gif):

render() {
  let mainMenu = <MainMenu closeDrawer={() => {
    this.drawer.close();
  }}/>;
  return (
    <Drawer
      ref={c => this.drawer = c}
      type={'static'}
      openDrawerOffset={100}
      panOpenMask={.1}
      panCloseMask={0}
      panThreshold={.25}
      content={mainMenu}
      styles={drawerStyles}
      tweenDuration={150}
      acceptTap={true}
      acceptPan={true}
      tapToClose={true}
      negotiatePan={true}
      side={'left'}
    >
      <View style={styles.container}>
        <View style={{height: 56, backgroundColor: '#ff2663'}}><Text>Header</Text></View>
        <View style={{flex: 1, backgroundColor: '#0023ff'}}><Text>Content</Text></View>
        <View style={{height: 40, backgroundColor: '#ffeb00'}}><Text>Footer</Text></View>
      </View>
    </Drawer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#EEEEEE',
  },
});

const drawerStyles = {
  drawer: {},
  main: {shadowColor: '#000000', shadowOpacity: 0.8, shadowRadius: 3, elevation: 16}
};

Please help me. thanks.