2

I've got my images coming from an array variable, into an <Image> within a <View> being rendered into the space between my navigation. Everywhere I put my console log, it logs the index number of each image on load, and I am unable to press on an image to trigger the console log.

I've moved onPress={console.log(index)} into the possible areas hoping that it will make images clickable.

import React, { Component } from 'react';
import { View, Dimensions, Image } from 'react-native';

var images = [
  require('../assets/IMG-0028.jpeg'),
  require('../assets/IMG-0048.jpeg'),
  require('../assets/IMG-0064.jpeg'),
  require('../assets/IMG-0089.jpeg'),
  require('../assets/IMG-0119.jpeg'),
  require('../assets/IMG-0151.jpeg'),
  require('../assets/IMG-0152.jpeg'),
  require('../assets/IMG-0153.jpeg'),
  require('../assets/IMG-0154.jpeg'),
  require('../assets/IMG-0155.jpeg'),
  require('../assets/IMG-0184.jpeg'),
  require('../assets/IMG-0221.jpeg'),
  require('../assets/IMG-0268.jpeg'),
  require('../assets/IMG-0309.jpeg'),
  require('../assets/IMG-0320.jpeg'),
  require('../assets/IMG-0474.jpeg'),
  require('../assets/IMG-0707.jpeg'),
  require('../assets/IMG-0860.jpeg')
];
var { width, height } = Dimensions.get('window');

class CardComponent extends Component {
  renderHome = () => {
    return images.map((image, index) => {
      return (
        <View
          key={index}
          style={[
            { width: width / 3 },
            { height: height / 3 },
            { marginBottom: 2 },
            index % 3 !== 0 ? { paddingLeft: 2 } : { paddingLeft: 0 }
          ]}
        >
          <Image
            style={{ flex: 1, width: undefined, height: undefined }}
            source={image}
            onPress={console.log(index)}
          />
        </View>
      );
    });
  };
  render() {
    return (
      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
        {this.renderHome()}
      </View>
    );
  }
}
export default CardComponent;

I'm expecting to press on an image and have it console log the index of the image so I know it's working.

but.. Nothing is happening at all.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
infinesse
  • 97
  • 2
  • 13
  • The event attributes expect a function reference, you however are immediately executing the function thus the attribute just gets the return value, undefined in the case of log(). You probably meant to use an arrow function there `onPress={()=>console.log()}` – Patrick Evans Apr 06 '19 at 21:09
  • That makes it so it isn't triggered right away, thank you. It doesn't seem to trigger at all though, no matter what I press. – infinesse Apr 06 '19 at 21:13
  • Ok I was able to get each image flashing from touchable opacity around the entire view. – infinesse Apr 06 '19 at 21:18
  • Ok I've accomplished everything I set out to accomplish with this question. Thank you for the help. – infinesse Apr 06 '19 at 21:20

0 Answers0