How can I update state once onPress via TouchableOpacity in React Native? - react-native

Question

So I am rendering a ListView with two columns of items. The following function renders the rows, renderRow(rowData):
For each item, if clicked, I want it to be changed to opacity of 0.5 and if clicked again, want it to be back to clear up the opacity, so what I was thinking is setting it to opacity of 1.0.
I tried the following, but for some reason the opacity is not being updated:
constructor(props){
super(props);
this.state = {
opacity: 1.0,
selected: false,
}
}
renderRow(rowData){
return (
<View style={styles.item}>
<TouchableHighlight onPress={()=>this._selected() underlayColor='transparent'}>
<View style={{opacity:this.state.opacity}}>
<Text>{rowData.firstName}</Text>
<Text>{rowData.lastName}</Text>
</View>
</TouchableHighlight>
</View>
)
}
_selected(){
if(this.state.selected){
console.log('ITEM HAS BEEN UNSELECTED')
this.setState({
opacity: 1.0,
selected: false
})
}else{
console.log('ITEM HAS BEEN SELECTED')
this.setState({
opacity: 0.5,
selected: true
})
}
}
Why isn't the opacity being updated once clicked and rerendering the view inside the TouchableHighlight? Also how can I do so with individual item, with each's 'opacity' and 'selected' states?
**FULL CODE
'use strict';
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
ListView,
Image,
TouchableHighlight,
TouchableOpacity
} from 'react-native';
class Interest extends Component {
constructor(props){
super(props);
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
selected: false,
dataSource: ds.cloneWithRows([
{firstName: 'Johnny', lastName: 'Boy'},
{firstName: 'Shawn', lastName: 'Ke'},
{firstName: 'An', lastName: 'Twon'}
};
}
renderRow(rowData){
return (
<View style={this.state.selected ? styles.transItem : styles.opacItem}>
<TouchableHighlight
onPress={ () => { this.setState({selected: !this.state.selected})}} underlayColor='transparent'>
<View>
<Text>{rowData.firstName}</Text>
<Text>{rowData.lastName}</Text>
</View>
</TouchableHighlight>
</View>
)
}
render() {
return (
<View style={styles.container}>
<ListView contentContainerStyle={styles.list} dataSource={this.state.dataSource} renderRow={this.renderRow.bind(this)}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
list: {
flexDirection: 'row',
flexWrap: 'wrap',
},
opacItem: {
margin: 15,
width: 155,
height: 175,
opacity: 1.0
},
transItem: {
margin: 15,
width: 155,
height: 175,
opacity: 0.5
}
});
export default Interest

Answer 1

I think you set the selected state that is not intended.
In the code above, the selected is a state for the entire app - not just for a selected line. To select a single line, you should keep a selected state for each item. For cleaner code it is recommended to have another module for the item, and keep the state there and not in the parent module.
Code:
'use strict';
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
ListView,
Image,
TouchableHighlight,
TouchableOpacity
} from 'react-native';
class Interest extends Component {
constructor(){
super();
this._renderRow = this._renderRow.bind(this);
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows([
{firstName: 'Johnny', lastName: 'Boy'},
{firstName: 'Shawn', lastName: 'Ke'},
{firstName: 'An', lastName: 'Twon'}
])};
}
render() {
return (
<View style={styles.container}>
<ListView
contentContainerStyle={styles.list}
dataSource={this.state.dataSource}
renderRow={this._renderRow}
/>
</View>
);
}
_renderRow(rowData) {
return(
<InterestItem rowData={rowData} />);
}
}
class InterestItem extends Component {
constructor(props){
super(props);
this.state = {
selected: false
}
}
render(){
const { rowData } = this.props;
return (
<View style={this.state.selected ? styles.transItem : styles.opacItem}>
<TouchableHighlight
onPress={ () => { this.setState({selected: !this.state.selected})}}
underlayColor='transparent'
>
<View>
<Text>{rowData.firstName}</Text>
<Text>{rowData.lastName}</Text>
</View>
</TouchableHighlight>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
list: {
flexDirection: 'row',
flexWrap: 'wrap',
},
opacItem: {
margin: 15,
width: 155,
height: 175,
opacity: 1.0
},
transItem: {
margin: 15,
width: 155,
height: 175,
opacity: 0.5
}
});
export default Interest