CODEWITHSUNDEEP
react-native
Yellow Clock
Yellow Clock

Reputation: 465

React Native ,Flatlist ,how to change the background color when click one of the card?

I am trying to make a payment UI design , my idea is when the card been clicked ,its background color can change to another color . I have used flatlist ,however ,when I clicked ,all card's background color changed... I have no idea what was the problem .Could you please take a look ? Thank you so much ! enter image description here

Component of Each Card :Payment_Card:

import React,{useState} from 'react';
import { View,StyleSheet, Image, TouchableOpacity } from 'react-native';
import colors from '../config/colors';

function Payment_Card({onPress,img,bgColor="#ffffff",style}) {
    return (
        <TouchableOpacity onPress={onPress} style={[styles.outer_container,style]}>
        <View style={styles.container,{backgroundColor:bgColor}}>
           <View style={styles.img_container}>
           <Image source={img} style={styles.img}/>
           </View>
        </View>
        </TouchableOpacity>
    );
}


const styles = StyleSheet.create({
    outer_container :{
        alignItems : 'center',
        borderRadius : 10,
        elevation :5,
        flexDirection : 'row',
        height : 100,
        paddingLeft :2,
        paddingRight :2,
        justifyContent :'center',
        margin :5,
        overflow :'hidden',
        shadowOffset : {width:1,height:1},
        shadowOpacity : 0.5,
        shadowRadius : 3,

    },
    container :{
        alignItems : 'center',
        borderRadius : 10,
        elevation :3,
        flexDirection : 'row',
        height : 100,
        justifyContent :'center',
        shadowColor : colors.medium,
        width : 110,
        paddingLeft :2,
        paddingRight :2,
        shadowOffset : {width:1,height:1},
        shadowOpacity : 0.5,
        shadowRadius : 3,
    },
    img_container: {
        width : 100,
        height :"100%",
        justifyContent : 'center',
        alignItems : 'center',
    },
    img : {
        width : 90,
        height :90,
    }
})
export default Payment_Card;

The Screen :

import {PaymentsStripe as Stripe} from 'expo-payments-stripe';
import React,{useState} from 'react';
import { FlatList, StyleSheet,View } from 'react-native'
import colors from '../config/colors';
import AppText from './../components/AppText/AppText';
import Payment_Card from './../components/Payment_Card';

const payment_methods =[
    {id:1,img:require('../assets/paypal.png')},
    {id:2,img:require('../assets/mastercard.png')},
    {id:3,img:require('../assets/visa.png')},
]
function PaymentScreen(props) {
    const [click,setClick] = useState(false);
    Stripe.setOptionsAsync({
    publishableKey : 'pk_test_51IeReUImZeQYXOtGdffjGg5HawEOzavfREdk8Z7ljzIwVurgb5covNPFox7bqdAY6buitu25GsmIcwfG3L1tkjqh0083cSN2mN',
    });
    return (
        <View style={styles.container}>
           <AppText style={styles.select_payment_title}>请选择一种支付方式：</AppText>
            <View style={styles.pay_icons_container}>
        <FlatList 
        horizontal ={true}
        data = {payment_methods}
        keyExtractor ={card => card.id.toString()}
        renderItem ={({item})=>
        <Payment_Card
        img = {item.img}
        onPress = {()=>setClick(!click)}
        bgColor = {click?colors.light_yellow:colors.white}
        />
    }
        />
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container : {
        flex :1,
        flexDirection : 'column',
        backgroundColor : colors.white,
        
    },
    select_payment_title:{
        fontSize : 18,
        fontWeight : 'bold',
        margin : 10,
    },
    pay_icons_container :{
        flexDirection : 'row',
        justifyContent : 'space-evenly',
        width : '100%',
    }
})
export default PaymentScreen;

Upvotes: 0

Views: 3046

Answers (1)

Pratik Adhikari
Pratik Adhikari

Reputation: 517

const [click, setClick] = useState(null);

and inside flatlist's renderItem function, add the below code,

 renderItem ={({item, index})=>
    <Payment_Card
        img = {item.img}
        onPress={() => {
           setClick(index);
        }}
        bgColor = {index === click? colors.light_yellow:colors.white}
    />

and in Payment_Card function,

function Payment_Card ({onPress, img, bgColor, style}) {
return (
    <TouchableOpacity onPress={onPress} style={[styles.outer_container,style]}>
    <View style={styles.container,{backgroundColor:bgColor}}>
       <View style={styles.img_container}>
       <Image source={img} style={styles.img}/>
       </View>
    </View>
    </TouchableOpacity>
)};

Upvotes: 2

Related Questions