TouchableHighlight with route in ScrollView not working

Question

export default class Main extends Component {    
  constructor(props) {
  super(props);    
}

  go_to_details(){
      this.props.navigator.push({
        title:'Wine Details',
        component : winedetails
      })    
  }    

  render() {

    var tmp_array = [
      {
    "product_name": "RED WINE",
    "Price": 26,
    "img": "./img/red-wine.jpg",
    "bis": "Hanau Hbf",
    "Wochentag": "Fr",
    "Zeitraum": ""
},
{
    "product_name": "GOLD WINE",
    "Price": 27,
    "img": "./img/red-wine.jpg",
    "bis": "Regensburg Hbf",
    "Wochentag": "So",
    "Zeitraum": ""
},
{
    "product_name": "ICE WINE",
    "Price": 28,
    "img": "./img/red-wine.jpg",
    "bis": "Würzburg Hbf",
    "Wochentag": "Fr",
    "Zeitraum": ""
},
{
    "product_name": "ICE SCOT WINE",
    "Price": 35,
    "img": "./img/red-wine.jpg",
    "bis": "Puttgarden",
    "Wochentag": "tgl.",
    "Zeitraum": "25.06. - 04.09."
},
{
    "product_name": "ITALIC WIN",
    "Price": 36,
    "img": "./img/red-wine.jpg",
    "bis": "Hamburg Hbf",
    "Wochentag": "tgl.",
    "Zeitraum": "25.06. - 04.09."
}
    ];

    var list = tmp_array.map(function(news, i){
      return(
        <View key={i}>
          <Text>{news.product_name}</Text>
          <View>
            <Text>{news.Price}</Text>
          </View>
          <TouchableHighlight style={globle.buy_it}
            onPress={() => this.go_to_details.bind(this) }>
            <Text style={globle.buy_it_text}>BUY THIS</Text>
          </TouchableHighlight>
        </View>
      );
    });

    return (
      <View>
        <ScrollView>
     {list}
        </ScrollView>
      </View>
    );
  }
}

this is the error

Answer 1

Try the below code

    getRow(news, i) {
       return (
            <View key={i}>
                <Text>{news.product_name}</Text>
                <View>
                    <Text>{news.Price}</Text>
                </View>
                <TouchableHighlight
                    style={globle.buy_it}
                    onPress={this.go_to_details.bind(this)}>
                    <Text style={globle.buy_it_text}>BUY THIS</Text>
                </TouchableHighlight>
            </View>
        );
    }

   render() {

        //var tmp_array =.... //intialise array

        var list = tmp_array.map(this.getRow.bind(this));

        return (
            <View>
                <ScrollView>
                    {list}
                </ScrollView>
            </View>
        );
    }

Changes I have made is

• Add bind to map function call
• Modified onPress bind statement in TouchableHighlight