How would I make Linear Gradient Colors as a Prop in a FlatList?

Question

How would I make Linear Gradient Colors as a Prop in a FlatList? (React Native)

This is the Data I Have

  const DATA = [
    {
      id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
      title: 'Painting Job',
      gradientColours: '["#FF9101", "#DE1D1D"]'
    },
    {
      id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
      title: 'Wall Painting',
      gradientColours: '["#1B89EA", "#136CBB"]'
    },
    {
      id: '58694a0f-3da1-471f-bd96-145571e29d72',
      title: 'Home Painting',
      gradientColours: '["#1B89EA", "#136CBB"]'
    },
  ];

The Elements That Going to be rendered

const CustomBox = ({ title, gradientColours }) => (

<View style={{marginBottom: 20}}>
<LinearGradient colors={gradientColours}>
</LinearGradient>

</View>
 );
The Default Function    

export default function Custom() {


        const renderItem = ({ item }) => <CustomBox 
                                            title={item.title} 
                                            gradientColours={item.gradientColours}
                                            />;
                                        

The return function

  return (
    <View>
    

    <FlatList

        renderItem={renderItem}
        data={DATA}
        keyExtractor={item => item.id}

    ></FlatList>


    </View>
  );
}

This is a summary of what im trying to make... I hope it makes sense A flatlist, with a bunch of differnt blcoks an each block has a differnt gradient...

Answer 1

You're doing it great just pass gradientColour like gradientColours: ["#1B89EA", "#136CBB"]. Pass the value of this object as an array not string. – Shoaib Khan

Thank You to Shoaib Khan The Problem was Pass the value of this object as an array not string.