Change a vector icon colour when pressed, React Native

Question

I have started to learn React Native recently, to try and build an application. I am trying to change the colour of the social media icons when the user clicks on them. I have manged to direct to a link when pressed but failed to change the colour.

Index.js

const SocialMedia = () => {
    
    return (
        <View style={styles.container}>
            <Pressable 
        onPress={() =>{ Linking.openURL('https://www.facebook.com/frogsystems')
            ;
        }}>
            <Icon style={styles.social} name="facebook-f" size={30} color="#900" />
            </Pressable>

            <Pressable 
        onPress={() =>{ Linking.openURL('https://www.linkedin.com/company/frog-systems-ltd/')
            ;
        }}>
            <Icon style={styles.social} name="linkedin" size={30} color="#900" />
            </Pressable>

            <Pressable 
        onPress={() =>{ Linking.openURL('https://twitter.com/frogsystemsltd')
            ;
        }}>
            <Icon style={styles.social} name="twitter" size={30} color="#900" />
            </Pressable>

    
        </View>
    )
}

export default SocialMedia;

styles.js

import { StyleSheet } from "react-native";

const styles = StyleSheet.create({


    container: {
        flexDirection: 'row',
        padding: 50,
        justifyContent: 'center',
        alignItems: "center",
        
        
        
        

        

    },

    social:{
        color:'white',
        padding:20,
        alignItems: 'center',
        
    },


});

export default styles;

Answer 1

you can set colors using usestate as well . eg

   const [iconcolor, setIconColor] = useState('red);

and then later inside onPress you can change color using usetsate in onPress as below

  <Ionicons name='settings' size={24} color={iconcolor} onPress={() =>setIconColor('blue')} />

Answer 2

Add pressed to change vector icon color when pressed

<Pressable 
        onPress={() =>{ Linking.openURL('https://www.facebook.com/frogsystems')
            ;
        }}>
          {({ pressed }) => (
            <Icon 
              style={[
                {
                  color: pressed ? '#D6D6D6' : '#343434'
                },
                styles.social,
             ]}
             name="facebook-f" 
             size={30} 
           />
         )}
</Pressable>

Remove color from styling
social:{
        padding:20,
        alignItems: 'center',
        
    },