How to change view for individual listview in react native?

Question

I want to change the view of Follow button to unfollow on tap of particular listview button. Currently when I press on any follow button every follow button in listview changes to unfollow. i just want to change for particular follow button in listview?

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */

import React, { Component } from 'react';
import{Platform,StyleSheet,Text,View,Image,ListView,TouchableOpacity,ImageBackground,TouchableHighlight
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import ActionButton from 'react-native-action-button';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { TabNavigator, StackNavigator } from 'react-navigation';
import { Col, Row, Grid } from 'react-native-easy-grid';
import { Container, Header, Content, Card, CardItem, Thumbnail, Button, Left, Body, Right } from 'native-base';
const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class Followers extends Component{
  static navigationOptions = { 
      headerTitle: 'Followers',      
      headerTitleStyle: {
          color: '#36292a',
          fontFamily: 'WorkSans-Regular',
          fontWeight: '300',
          marginLeft: 0
          },
        };

  constructor(props) {
    super(props);
    this.state = {
      follow: true,
    };
  }

  updateSearchStatus = () => 
    this.setState({ 
      follow : this.state.follow,
  });

    updateTitleStatus = () =>
    this.setState({
    } , () => {
      //this.ButtonState();
      if(this.state.follow == true){
        this.setState({
          follow : false
        });
      }else{
        this.setState({
          follow : true
        });
      }      
  });



displayImages(users){
    var {navigate} = this.props.navigation;
    return(  
    <View style={styles.container}>       
            <CardItem style={{height: 78,borderBottomWidth:1,borderColor: '#dadddf'}}>
              <Left>
                <Thumbnail source={{uri: users.avatar_url}} style={{height: 40, width: 40}} />
                <Body>
                  <Text style={styles.uploaderName}>{users.name}</Text>
                </Body>
              </Left>
              <Right>
                <TouchableHighlight underlayColor = '#DFE1E3' onPress={this.updateTitleStatus} >
                  { this.state.follow ? <View style={styles.followouter}><Text style={{color:'#fefefe',fontSize: 12}}>Follow</Text></View> 

                       : <View style={styles.unfollowouter}><Text style={{color:'#36292a',fontSize: 12}}>Unfollow</Text></View> 

                    }
                </TouchableHighlight>
              </Right>
            </CardItem>
       </View>      
    );
  }

  render() {
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    var {navigate} = this.props.navigation;
    var users = [
      {
        name: 'Amy Farha',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
        image: 'https://i.pinimg.com/564x/1c/f3/05/1cf305362aed02ad559f989687b1460e.jpg',
      },
      {
        name: 'Chris Jackson',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
        image: 'https://i.pinimg.com/236x/a8/37/8e/a8378eeb01ec788a0068ea6b1b759091.jpg',
      },
      {
        name: 'Amanda Martin',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg',
        image: 'https://i.pinimg.com/564x/8a/db/a7/8adba7207bdc82668bf06acc2734537e.jpg',
      },
      {
        name: 'Amy Farha',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
        image: 'https://i.pinimg.com/564x/8a/db/a7/8adba7207bdc82668bf06acc2734537e.jpg',
      },
      {
        name: 'Chris Jackson',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
        image: 'https://i.pinimg.com/564x/66/f0/2f/66f02f37eb54ff7f79f4c831212b231f.jpg',
      },
      {
        name: 'Amanda Martin',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg',
        image: 'https://i.pinimg.com/564x/58/0c/78/580c789ded6ceeafdf71b792b0d57ac6.jpg',
      },
      {
        name: 'Amy Farha',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
        image: 'https://i.pinimg.com/564x/a5/4d/4d/a54d4d37522a76a67002fa25b8e51515.jpg',
      },
      {
        name: 'Chris Jackson',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
        image: 'https://i.pinimg.com/564x/47/6b/5c/476b5c4c9725ff3cd4bb3e5f61e4d6c3.jpg',
      },
      {
        name: 'Amanda Martin',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg',
        image: 'https://i.pinimg.com/564x/ad/4b/06/ad4b06523eefacc30d09d41a9992029f.jpg',
      },
      {
        name: 'Christy Thomas',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg',
        image: 'https://i.pinimg.com/564x/a5/4d/4d/a54d4d37522a76a67002fa25b8e51515.jpg',
      },
      {
        name: 'Melissa Jones',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/nuraika/128.jpg',
        image: 'https://i.pinimg.com/564x/82/ac/2e/82ac2e1c86692090173666496b9ce1cf.jpg',
      },
      {
        name: 'Amanda Martin',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg',
        image: 'https://i.pinimg.com/564x/8a/db/a7/8adba7207bdc82668bf06acc2734537e.jpg',
      },
      {
        name: 'Christy Thomas',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg',
        image: 'https://i.pinimg.com/564x/a5/4d/4d/a54d4d37522a76a67002fa25b8e51515.jpg',
      },
      {
        name: 'Melissa Jones',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/nuraika/128.jpg',
        image: 'https://i.pinimg.com/564x/ae/b6/ac/aeb6ac2f05644f1464c298bf979630e9.jpg',
      },
      {
        name: 'Christy Thomas',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg',
        image: 'https://i.pinimg.com/564x/57/ac/3e/57ac3e724c61f9b9803d520574e42a1e.jpg',
      },
      {
        name: 'Melissa Jones',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/nuraika/128.jpg',
        image: 'https://i.pinimg.com/564x/66/f0/2f/66f02f37eb54ff7f79f4c831212b231f.jpg',
      },
    ];

    var cloneUsers = ds.cloneWithRows(users);

    return (  
    <View style={{flex: 1}}>    
        <ListView
          style={styles.listView}
          dataSource={cloneUsers}
          renderRow={this.displayImages.bind(this)}
          renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
        />     
        </View>

    );  
  }
}

const styles = StyleSheet.create({
  icon: {
    width: 26,
    height: 26,
  },
  container: {
    flex: 1,
    backgroundColor: '#fefefe'
  },
  uploaderName:{
    fontSize: 16,
    color: '#36292a'
  },
  actionButtonIcon: {
    color: '#fefefe',  
  },
  followouter: {
      justifyContent: 'center',
      alignItems: 'center',
      width: 90, 
      height: 25, 
      borderRadius: 4,  
      backgroundColor: '#f00039'
    },
  unfollowouter: {
    justifyContent: 'center',
      alignItems: 'center',
      width: 90, 
      height: 25, 
      borderRadius: 4, 
      borderWidth:1, 
      borderColor: '#999296',
  }

});

This should point you in the right direction: https://stackoverflow.com/questions/48326655/how-to-change-text-of-button-in-listview-in-react-native/48343063#48343063 — MattyK14, Jan 23 '18 at 13:43

score 0 · Answer 1 · answered Jan 23 '18 at 09:36

All button switch to unfollow because you are using the same state this.state.follow for all the button. So when it turns to false, all the buttons will display unfollow.

What you could do is to add an attribute follow in your user object and instead of testing this.state.follow ?... you can do user.follow ?....

And in your updateSearchStatus() function, you could pass the user to be able to find it and to change his followstatus.

I didn't get you answer. I am new to this. Can you help me with this in brief? TIA — Kamlesh Tilwani, Jan 23 '18 at 10:45

score 0 · Answer 2 · answered Jan 23 '18 at 09:53

Here is an example for you:

Create state for store which one is Clicked/Selected

this.state = { selected: null };

Pass the item index which one is Clicked/Selected

updateSearchStatus = (index) => this.setState({ selected : index });

Your renderItem should be make some condition on Item Button

<View style={ this.state.selected == item.index ? styles.followouter : styles.unfollowouter}>
    <Text style={{color:'#fefefe',fontSize: 12}}>
        {this.state.selected == item.index ? 'Follow' : 'Unfollow'}
    </Text>
</View>

Hope it will help you for an idea

Hi @KamleshTilwani the **item** is refer to **User** or each row or **user.id or user.index** — Seyha, Jan 24 '18 at 02:35

score 0 · Answer 3 · answered Mar 06 '20 at 05:57

There are many solutions to this problem but my suggestion is this. In your project folder create a folder called components inside that folder create a file named Toggle.js. Inside that file use this code.

    export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isSelected: false,
      follow: true,
    }
  }
  updateTitleStatus = () =>
    this.setState({}, () => {
      if (this.state.follow == true) {
        this.setState({
          follow: false
        });
      } else {
        this.setState({
          follow: true
        });
      }
    });
  render() {
    return (
      <TouchableHighlight underlayColor='#DFE1E3' onPress={this.updateTitleStatus} >
        {this.state.follow ? <View style={styles.followouter}><Text style={{ color: '#fefefe', fontSize: 12 }}>Follow</Text></View>
          : <View style={styles.unfollowouter}><Text style={{ color: '#36292a', fontSize: 12 }}>Unfollow</Text></View>}
      </TouchableHighlight>
    );
  }
}
const styles = StyleSheet.create({
  followouter: {
    justifyContent: 'center',
    alignItems: 'center',
    width: 90,
    height: 25,
    borderRadius: 4,
    backgroundColor: 'dodgerblue'
  },
  unfollowouter: {
    justifyContent: 'center',
    alignItems: 'center',
    width: 90,
    height: 25,
    borderRadius: 4,
    borderWidth: 1,
    borderColor: '#999296',
  }
});

And then do this change in your current file.

    //.....
import Toogle from '../components/Toogle';
''''''
...
displayImages(users){
    var {navigate} = this.props.navigation;
    return(  
    <View style={styles.container}>       
            <CardItem style={{height: 78,borderBottomWidth:1,borderColor: '#dadddf'}}>
              <Left>
                <Thumbnail source={{uri: users.avatar_url}} style={{height: 40, width: 40}} />
                <Body>
                  <Text style={styles.uploaderName}>{users.name}</Text>
                </Body>
              </Left>
              <Right>
                <Toogle/>
              </Right>
            </CardItem>
       </View>      
    );
  }
......
....//

Hope this will help.

How to change view for individual listview in react native?

3 Answers3