CODEWITHSUNDEEP
androidreactjsreact-nativereactive-programming
Chiranjhivi Ghimire
Chiranjhivi Ghimire

Reputation: 1739

component method didnot get called by onPress() method of TouchableHighlight

'use strict';

var React = require('react-native');
var {
  PropTypes,
  View,
  Text,
  Image,
  TouchableHighlight,
  Component
} = React;


var ResponsiveImage = require('react-native-responsive-image');
var styles = require('../../style');

class EventCard extends Component {
  static contextTypes = {
    nextPage: React.PropTypes.func.isRequired
  };
  constructor(props, context) {
    super(props, context);
  }
  render(){
    return(
      <TouchableHighlight underlayColor='gray' onPress={() => {this.onclicked()}}>
        <View style={styles.global.card}>
          <ResponsiveImage source={require('../resources/images/card.png')} initWidth="130" initHeight="110" style={{padding:5}} />
          <Text style={styles.global.cardTitle}>{this.props.cardItem.title}</Text>
        </View>
      </TouchableHighlight>
    );
  }
  onclicked(){
    this.context.nextPage();
  }
}

module.exports = EventCard;

onclicked method cannot be called. what is mistake in my code? please suggest me. when i press Touchablehighlights no response is returned. nextPage() method is parent method which i had make static in parent class.

Upvotes: 0

Views: 264

Answers (1)

Ezra Chang
Ezra Chang

Reputation: 1298

I had to greatly modify your component, because I don't have the resources and other methods you're using as props and styles, but the concept is the same. I played around with it, just made a simple color change on press component for giggles. This component is imported into index.ios.js (or index.android.js in your case) like so: import {EventCard} from './component'; where this component resides in component.js, and component.js and index.android.js reside in the same folder.

import React, { Component } from 'react';
import {
  PropTypes,
  View,
  Text,
  Image,
  TouchableHighlight
} from 'react-native';

// I didn't bother installing dependencies.

// var ResponsiveImage = require('react-native-responsive-image');
// var styles = require('../../style');

export class EventCard extends Component {
  static contextTypes = {
    // nextPage: React.PropTypes.func.isRequired
  };
  constructor(props) {
    super(props);
  }
  state = {
    color: 'black'
  }

  // This method takes the place of your onclicked method.
  changeColor = () => {
    let first = parseInt(Math.random() * 255);
    let second = parseInt(Math.random() * 255);
    let third = parseInt(Math.random() * 255);
    this.setState({
      color: 'rgba(' + first + ', ' + second + ', ' + third + ', 1)'
    });
  }
  render () {
    return(
      <TouchableHighlight underlayColor='gray'>
        <Second myColor={this.state.color} handlePress={this.changeColor} />
      </TouchableHighlight>
    );
  }
}

class Second extends React.Component {
  setNativeProps = (props: Object) => {
    this._root.setNativeProps(nativeProps);
  }
  render () {
    return (
      <Text ref={component => this._root = component} style={{color: this.props.myColor}} onPress={this.props.handlePress}>
        Second.
      </Text>
    );
  }
}
// I don't have your resources or other dependencies.

// <View style={styles.global.card}>
//   <ResponsiveImage source={require('../resources/images/card.png')} initWidth="130" initHeight="110" style={{padding:5}} />
//   <Text style={styles.global.cardTitle}>{this.props.cardItem.title}</Text>
// </View>

// module.exports = EventCard;

Upvotes: 1

Related Questions