Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Centering and shadows on android fixed with prop fixNativeFeedbackRadius #228

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

micnil
Copy link

@micnil micnil commented Oct 14, 2017

When setting fixNativeFeedbackRadius to true and giving the ActionButton position 'Center'. The ActionButton and ActionButtonItems would have an offset from the center due to incorrect styling.

fixNativeFeedbackRadius also caused an ugly shadow on ActionButtonItems and their respective lable, and also a cropped dropshadow.

For the ActionButtonItem, this was due to the shadow styling was set on the wrong element for android. As for the lable, we do not need to set the fixNativeFeedbackRadius to the touchableBackground (the lable is rectangular anyway). You'll notice that the ripple effect on the lable would extend in a circular fashion outside the borders of the lable.

Fixes #227

Before:
fixNativeFeedbackRadius=true on ActionButton and the second ActionButtonItem
before

After:
after

…ius.

When setting fixNativeFeedbackRadius to true and giving the ActionButton position 'Center'. The AtionButton and ActionButtonItems would have an offset from the center due to incorrect styling.

fixNativeFeedbackRadius also caused an ugly shadow on ActionButtonItems and their respective lable, and also a cropped dropshadow.

For the ActionButtonItem, this was due to the shadow styling was set on the wrong element for android. As for the lable, we do not need to set the fixNativeFeedbackRadius to the touchableBackground (the lable is rectangular anyway). You'll notice that the ripple effect on the lable would extend in a circular fashion outside the borders of the lable.
@iCodePup
Copy link

Please merge fixNativeFeedbackRadius=true not work on ActionButtonItem

@mastermoo
Copy link
Owner

maybe if conflicts get resolved

@micnil
Copy link
Author

micnil commented Dec 19, 2017

I'm struggling a bit to fix this merge conflict without reintroducing bug #223 . I'll give it another go this week.

@micnil
Copy link
Author

micnil commented Dec 19, 2017

I pushed changes that solved the conflict, but I should have written a better commit message. Before I was fairly certain I wouldn't break anything on IOS, and now i'm i bit less certain unfortunatly. This was the best I could come up with.

The shadow props needed to be applied to the parent view of Touchable to avoid the shadow being cropped.

parentStyle was moved from the container Animated.View to the child view. I also removed the conditional styling of parenStyle because I saw no need for it anymore, and it actually made it look really bad on android if fixNativeFeedbackRadius=true was not used. Although this is the part that i'm not 100% confident in. It works superb on android though.

I've tested multiple sizes of ActionButtonItem in combination with all different position placements. Also tested with and without fixNativeFeedbackRadius=true.

Should be tested similarly on IOS.

@iCodePup
Copy link

iCodePup commented Jan 4, 2018

@mastermoo some news ? 👍

@mastermoo
Copy link
Owner

@iCodePup sry, I didn't find the time to test it yet and I don't want to merge it blindly

@zhaonian
Copy link

@mastermoo thanks! can you please publish a new release with this issue fixed?

@iCodePup
Copy link

Hey ,
someone may test this PR on IOS before merged please ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

fixNativeFeedbackRadius fix for "ActionButton.Item"
4 participants