How to pass onPress in a map function to a custom component? - react-native

Question

I have a icons.js which consist of an array of objects:
const icons =[
{ name: 'Camera', image: <Icon name='device-camera' size={70} />, onPress: pickSingleWithCamera},
{ name: 'Earth', image: <SimpleLineIcons name='camera' size={70} />, onPress: 'bye' }
]
picksinglWithCamera is a function:
const pickSingleWithCamera = () => {
ImagePicker.openCamera({
cropping: true,
width: 500,
height: 500,
}).then(image => {
console.log('received image', image);
this.setState({
image: {uri: image.path, width: image.width, height: image.height},
images: null
});
}).catch(e => alert(e));
}
Now I have the main component in main.js which imports both the icons.js and title.js files.
The title component:
<Title
text={ focused ? focused.name : '' }
data={this.cells}
top={(SIZE + GUTTER) * 2}
visibility={this.text}
/>
What I am trying to do here is whenever user presses the text (name attribute of array icons), the respective function of it is called.
Unfortunately I am unsuccessful doing that, that's why I came onto SO to ask.
import React, { Component } from 'react'
import { Animated, Text, TouchableOpacity, Alert, View } from 'react-native'
import { HIDDEN, VISIBLE } from './animation-state'
export default class Title extends Component {
constructor(props) {
super(props)
this.state = {}
}
action(text, top, visibility, data) {
return data.map((cell, i) => {
return (
<Animated.View
key={i}
style={{
position: 'absolute',
top,
left: 0,
right: 0,
opacity: visibility.interpolate({
inputRange: [HIDDEN, VISIBLE],
outputRange: [0, 1],
}),
backgroundColor: 'transparent',
transform: [
{
translateY: visibility.interpolate({
inputRange: [HIDDEN, VISIBLE],
outputRange: [100, 0],
}),
},
],
}}
>
<TouchableOpacity onPress={() => cell.onPress}>
<Text
style={{
fontSize: 40,
fontFamily: 'GillSans-SemiBold',
textAlign: 'center',
}}
>
{text}
</Text>
</TouchableOpacity>
</Animated.View>
)
})
}
render() {
const { text, top, visibility, data } = this.props
return (
<View>
{this.action(text, top, visibility, data)}
</View>
)
}
}

Answer 1

Arrow functions have immediate returns, in your case what you are doing translates to the following:
onPress={function(){return cell.onPress;}}
This will do nothing because you are not executing the function, you have to tell the function to execute
onPress={() => cell.onPress()}
Another solution would be to just assign the function without arrow functions, this has the downside that onPress won't be binded to the component
onPress={cell.onPress}