FlatList item click is not rendering this

export default class HistoryScreen extends BaseScreen {

    constructor(props){
        super(props);   
        this.state = {
            mainListData:[],
            listData:[],
            searchText:'',
        };
    }

    listRowPressed(item) {  
        this.props.navigation.navigate('Details', {
            checkin: item.data
          });
    }

    render() {
        return (
            <View style={styles.container}>

                <View style={{ flex:1, backgroundColor: '#FFF'}}>

                    <FlatList
                        data={this.state.listData}
                        renderItem={({item}) => <ListComp data={item} />}
                        keyExtractor={(item, index) => index.toString()}
                    />
                  </View>
            </View>
        );
      } 
}

const ListComp = item => (

    <TouchableOpacity onPress={() => this.listRowPressed(item)
    }>
        <View style={styles.row}>                                       
        </View>
    </TouchableOpacity>
);

I am displaying data in FlatList, however clicking on item gives me this4. listRowPressed is undefined, I tried binding the function too but didn't work. What is wrong in the code?