horizontal CalendarList problem with modal

[Matin ShayanFar]

The vertical version works just fine inside my <Modal> without any weird behavior.
But when i set horizontal={true}, at first the Calendar gets rendered for a brief moment and i can see it but then it suddenly disappears.

Here's my code:

import React, { Component } from 'react';
import { Modal, View, ... } from 'react-native';
import { Container, Button, ... } from 'native-base';

class Archive extends Component<Props> {
  ...
  render() {
    return (
      <Container>
         <View>
           <Modal
              animationType="fade"
              transparent={true}
              visible={this.state.modalToDateVisible}
              onRequestClose={() => {
              this.setState({modalToDateVisible:false})
            }}>
            <View style={{alignItems:'center', justifyContent:'center', flex: 1, flexDirection: 'column', backgroundColor:'rgba(0, 0, 0, 0.5)'}}>
              <View style={{width:'95%', backgroundColor:'#F6F7F9', padding: 20 }}>
                <CalendarList
                  horizontal={true}
                  pagingEnabled={true}
                  type='jalaali'
                />
                <View style={{marginTop:20}}>
                  <Button onPress={()=>this.closeToDateModal()}
                    <Text style={{fontSize:20}}>Close</Text>
                  </Button>
                </View>
              </View>
            </View>
         ...
     );
   }
}

i tried :

• changing its parent from <View> to horizontal <ScrollView>
• all permutation of styling (absolute fill parent, zIndex and other stuff)

BTW: it works outside my Modal and the normal <Calendar> works too.

Thanks in advance