react native - ListView with overlaying View not scrolling -


i tried implement standard view mobile dashboard screen drawer on top left menu icon click

enter image description here

however when put menu image view, listview stops scrolling. if put listview overlaying view, menu not clickable anymore. tried use zindex style property doesn't solve problem :( code is:

/**  * sample react native app  * https://github.com/facebook/react-native  * @flow  */  import react, { component } 'react';  import {   appregistry,   stylesheet,   text,   view,   image,   touchableopacity,   listview,   dimensions } 'react-native';  import drawer 'react-native-drawer'; import controlpanel './controlpanel'; import prayereventitem './prayereventitem'; import api './api';  export default class wspolnamodlitwa extends component {    constructor(props) {     super(props);      api.getprayerevents(function(response) {       console.log('response: getprayerevents()')     }).catch((error) => {           console.error(error);         });      const ds = new listview.datasource({rowhaschanged: (r1, r2) => r1 !== r2});     this.state = {       datasource: ds.clonewithrows(['row 1', 'row 2', , 'row 2', 'row 2', 'row 2', 'row 2', 'row 2', 'row 2', 'row 2', 'row 2']),     };   }    closecontrolpanel = () => {     this._drawer.close()   };   opencontrolpanel = () => {      this._drawer.open()   };    render() {         return (           <drawer             ref={(ref) => this._drawer = ref}             type="overlay"             content={<controlpanel />}             taptoclose={true}             opendraweroffset={0.2} // 20% gap on right side of drawer             panclosemask={0.2}             closeddraweroffset={-3}             styles={drawerstyles}             tweenhandler={(ratio) => ({               main: { opacity:(2-ratio)/2 }             })}>                    <view style={ [styles.container, styles.containercenter] }>                     <image source={require('./img/background_dashboard1.png')} style={[styles.container, styles.backgroundimage]}>                        <view style={ styles.menuview }>                         <touchableopacity onpress={this.opencontrolpanel}>                           <image source={require('./img/icon_menu.png')} style={styles.menuimage}/>                         </touchableopacity>                       </view>                        <listview style={[styles.container, styles.listview]}                         datasource={this.state.datasource}                         renderrow={(rowdata) => <prayereventitem/>}                       />                      </image>                   </view>           </drawer>         );   } }  //  const styles = stylesheet.create({   container: {       flex: 1,   },   containercenter: {     backgroundcolor: 'orange',   },   backgroundimage: {       resizemode: 'cover', // or 'stretch'       width: dimensions.get('window').width,       height: dimensions.get('window').height,   },    listview: {     paddingtop: 40,     paddingbottom: 40,   },    menuview: {       position: 'absolute',       top: 12,       left: 8,       bottom: 0,       right: 0,   },   menuimage: {     width: 32,     height: 32,   } });  const drawerstyles = {   drawer: { shadowcolor: '#000000', shadowopacity: 0.8, shadowradius: 3},   main: {paddingleft: 3}, }  appregistry.registercomponent('wspolnamodlitwa', () => wspolnamodlitwa); 


Comments

Popular posts from this blog

inversion of control - Autofac named registration constructor injection -

verilog - Systemverilog dynamic casting issues -

ios - Change Storyboard View using Seague -