santomegonzalo / react-native-floating-action

Material design action button for React Native
MIT License
488 stars 180 forks source link

Action icons are always white #148

Open wthushan01 opened 4 years ago

wthushan01 commented 4 years ago

I'm trying to use colored images (png) as action icons but when I'm testing them they have no color. They all are just white. Is this intentional or am I missing something?

atm98 commented 3 years ago

Facing the same issue myself.i have found that there is an FloatingActions prop called iconColor but it is set to default and is not accessible for modification.

RaduAlbastroiu commented 3 years ago

I encountered the same problems as you guys, I know it's been a while but after my investigation I found out that the tintColor modifies the action icons color. Now tintColor is user accessible and can be set to any value inside the actions array.

Until the changes are accepted you can use my fork branch in your package.json: "react-native-floating-action": "radualbastroiu/react-native-floating-action#feature/action_icons_tintcolor"

Happy coding! 🎉

tolik85 commented 3 years ago

It used to work in the past. How come the icons are only white now? What happened?

ducgiangtrankma commented 3 years ago

You can edit actions and add properties tintColor && color . Example : { text : 'Item1', ... tintColor: 'red', color: 'green', }

KawtharE commented 3 years ago

I am facing the same issue here :/

Even thought i have set icons url like below:

const actions = [
    {
        text: 'Reschedule',
        tintColor: 'red',
        color: Color.petite_orchid,
        icon: require('../../assets/images/edit_calendar_icon.png'),
        name: 'bt_reschedule',
        position: 3,
        textColor: Color.petite_orchid,
    },
    {
        text: 'Refuse request',
        color: Color.petite_orchid,
        icon: require("../../assets/images/ic_cancel.png"),
        name: 'bt_refuse',
        position: 2,
        textColor: Color.petite_orchid,
    },
    {
        text: 'Accept request',
        color: Color.blizzard_blue,
        icon: require('../../assets/images/check_icon.png'),
        name: 'bt_accept',
        position: 1,
        textColor: Color.blizzard_blue,
    },
];

images are not displayed, actually it displays white squares instead

KawtharE commented 3 years ago

@santomegonzalo can you please give me some help here, i have to deploy the app to the store, but i am still facing this issue :/

misaelriojasftf commented 3 years ago

hi guys! this issue was also being faced by me so I made a PR misaelriojasftf:issue/#148/missing-tint-color-prop 🚀

to install just do

npm i santomegonzalo/react-native-floating-action#pull/177/head

Fix for Android misaelriojasftf:issue/#148/missing-tint-color-prop-android 🚀🚀

lysofttech commented 10 months ago

For me only setting the tintColor to null worked. tintColor: null