react native - unable to press the view when I passed callback as props to TouchableHighlight component -

i passing callback <touchablehighlight> component onpress method display alert, not working. when pass alert('item pressed') directly onpress() method works.

i using simple example of <scrolllist> react-native.

  import react, { component } 'react'; import {   text,   view,   stylesheet,   platform,   scrollview,   button,   flatlist,   listview,   sectionlist,   dimensions,   touchablehighlight } 'react-native'; import scrollabletabview, { scrollabletabbar, } 'react-native-scrollable-tab-view'; import navstyles './../styles' import datafields './../constants/constants' import jsoninputfeedcomponent './../../components/jsoninputfeedcomponent' import divider './../../components/divider' import screenmenuobject './../screens' import { iconsmap } './../../appicons'  import planyourday './planyourday' import questionnaire './questionnaire' import newprofilepage './newprofilepage'  import accordion 'react-native-collapsible/accordion';  const {height, width} = dimensions.get('window')   const datasource=[ {data: [ {name: 'past medical conditions' }, {name: 'past vaccinatons' }, {name: 'past tests'},   {name: 'current general medical conditions'}, {name: 'men medical conditions'},{ name: 'women medical conditions' }],  key:'additional questionnaire'}, ]  export default class profilepage extends component {   static navigatorbuttons = {     leftbuttons: [],   };    constructor(props) {     super(props);      this.onfieldchange = this.onfieldchange.bind(this)      this.rendermodal = this.rendermodal.bind(this)    }    componentdidmount() {     this.props.navigator.setbuttons({       leftbuttons: [{ id: 'sidemenu', icon: iconsmap['menu'] }],     });   }      rendermodal(){     alert('list item clicked')   }       render() {     const data = datafields.profilepage     return (        <view style={{flex:1}}>         <scrollabletabview         initialpage={0}         rendertabbar={() => <scrollabletabbar />}       >          <scrollview tablabel="flat list" >              <sectionlist               renderitem={({ item }) =>                 (  <view>                  <touchablehighlight onpress={()=>this.rendermodal}><text style={styles.itemtext}>{item.name}</text>                  </touchablehighlight>                   </view>                  )                }               rendersectionheader={({ section }) => <text style={styles.itemheader}>{section.key}</text>}               sections={datasource}              keyextractor={(item)=>item.name}             />          </scrollview>         </scrollabletabview>       </view>     )   } }  const styles = stylesheet.create({   tabview: {     padding: 10,     backgroundcolor: 'rgba(0,0,0,0.01)',   },   card: {     borderwidth: 1,     backgroundcolor: '#fff',     bordercolor: 'rgba(0,0,0,0.1)',     margin: 5,     padding: 15,     shadowcolor: '#ccc',     shadowoffset: { width: 2, height: 2, },     shadowopacity: 0.5,     shadowradius: 3,   },   button: {     textalign: 'center',     fontsize: 18,     marginbottom: 10,     margintop: 10,     color: 'blue'   },    headertext: {     textalign: 'left',     fontsize: 15,     fontweight: '500',     color:'blue',   },   header: {     backgroundcolor: '#f5fcff',     fontsize:10,     padding: 0,     bordercolor:'blue',     borderwidth:2   },   content: {     height:'100%',     padding: 0,     backgroundcolor: '#fff',   },   itemheader: {     fontsize:15,     padding: 5,     color:'blue',   },   itemtext:{     fontsize:15,     color:'black',     padding:10,     marginleft:width *0.15,   } }); 

change this:

onpress={()=>this.rendermodal} 

to :

onpress={()=>this.rendermodal()} 

implement rendermodal function:

rendermodal() {   alert("on press"); } 

this work fine.