reactjs - React-Native TabNavigator and Modals -

i'm trying use this library show custom modal dialog. i've stacknavigator 3 screens , on of these, mainscreen, tabnavigator on set following header:

static navigationoptions = ({navigation}) => {     const { params } = navigation.state     return {         headerright: (             <content>                 <grid>                     <col style={styles.headerbutton}>                         <touchablehighlight style={styles.infobutton} onpress={() => {params._onabout()}} underlaycolor='lightgrey'>                             <icon ios='ios-information-circle' android='md-information-circle' style={{fontsize: 24}} />                         </touchablehighlight>                     </col>                     <col style={styles.headerbutton}>                         <touchablehighlight style={styles.logoutbutton} onpress={() => {params._onlogout()}} underlaycolor='lightgrey'>                             <icon ios='ios-exit-outline' android='md-exit' style={{fontsize: 24}} />                         </touchablehighlight>                     </col>                 </grid>             </content>         )     } } 

the second button opens simple alert (from react-native). first button open custom modal show app , developer details.

the main screen has following render method;

render(): jsx.element {     return (         <tabcontent />     ) } 

where tabcontent tabs configuration:

const tabcontent: navigationcontainer = tabnavigator({     courses: {         screen: coursesscreen,         navigationoptions: ({ navigation }) => ({             // title: `${navigation.state.params.user}'s courses`,             tabbarlabel: 'corsi',             tabbaricon: ({ tintcolor, focused }) => (                 <icon ios={focused ? 'ios-calendar' : 'ios-calendar-outline'} android='md-calendar' style={{fontsize: 18, color: tintcolor}} />             )         })     },     profile: {         screen: profilescreen,         navigationoptions: ({ navigation }) => ({             // title: `${navigation.state.params.user}'s profile`,             tabbarlabel: 'profilo',             tabbaricon: ({ focused, tintcolor }) => (                 <icon ios={focused ? 'ios-person' : 'ios-person-outline'} android='md-person' style={{fontsize: 18, color: tintcolor}} />             )         })     }     }, {     tabbaroptions: {         activetintcolor: '#f3e03b',         showicon: true,         labelstyle: {             fontweight: 'bold'         },         style: {             backgroundcolor: 'black'         }     } }) 

the library linked above requires layout this:

<view style={styles.wrapper}>      <modal style={[styles.modal, styles.modal3]} position={"center"} ref={"modal3"} isdisabled={this.state.isdisabled}>       <text style={styles.text}>modal centered</text>       <button onpress={() => this.setstate({isdisabled: !this.state.isdisabled})} style={styles.btn}>disable ({this.state.isdisabled ? "true" : "false"})</button>     </modal> </view> 

but if put tabcontent tab inside view tab navigator doesn't work anymore.

is there way make tabnavigator , modal library work together?

i found solution. using container root component allow nest tabcontent aside other components:

render(): jsx.element {     return (         <container>             <spinner visible={this.props.isloggingout} textcontent={'disconnessione in corso...'} textstyle={{color: '#fff'}} />              <tabcontent screenprops={{ isadmin: this.props.isadmin }} />              <modal style={styles.aboutmodal} position={'center'} ref={'aboutmodal'} isdisabled={false}>                 <text>modal centered</text>             </modal>         </container>     ) }