DEVHIDE
Login Or Sign up

How to change view for individual listview in react native?

2k Views Asked by At

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?

Iamge of follow button

/** * 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',
  }

});
listview react-native conditional-statements states onpress
Original Q&A
3

There are 3 best solutions below

1
AudioBubble On

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.

1
Seyha On

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

0
Staniya Figarado On

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.

Related Questions in LISTVIEW

Related Questions in REACT-NATIVE

Related Questions in CONDITIONAL-STATEMENTS

Related Questions in STATES

Related Questions in ONPRESS

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Popular Questions

dbora

Copyright © 2021 Jogjafile Inc.