Fixed badge animation #71
Merged
Conversation
added badge support
removed react-native-material-ui as dependency. implemented importing local badge component.
Added Badge component to use instead of react-native-material-ui badge
updated prop types
removed old prop type
documented badge changes
fixed isBadgeVisible documentation
final changes
final changes
removed extra dependencies
android compatibility
android compatibility
animation fix
animation fix
updated readme
|
Nice catch! Since I originally didn't test it in iOS, I didn't saw that there's an animation. Thank you |
lib/Badge.js
Outdated
| @@ -42,7 +44,8 @@ export default class Badge extends Component { | |||
| justifyContent: "center", | |||
| backgroundColor: "#F50057", | |||
| zIndex: 9999, | |||
| bottom: 10, | |||
| top: 3, | |||
| right: 27, | |||
timomeh
Feb 11, 2018
Owner
In an active Tab, this position causes the Badge to be far away from the Icon. This happens because it's a fixed value, but the position depends on the screen dimension, shifting, and Tab amount.
I would suggest something like left: '50%', marginLeft: 15. This way, it's positioned in the center of the Tab and then moved to the left. Looks like this:
Feel free to use a bigger/smaller value for marginLeft – depending on how you think it should be positioned.
In an active Tab, this position causes the Badge to be far away from the Icon. This happens because it's a fixed value, but the position depends on the screen dimension, shifting, and Tab amount.
I would suggest something like left: '50%', marginLeft: 15. This way, it's positioned in the center of the Tab and then moved to the left. Looks like this:
Feel free to use a bigger/smaller value for marginLeft – depending on how you think it should be positioned.
ShayanJavadi
Feb 11, 2018
Author
Contributor
done
done
changed fixed position value to dynamic
updated readme with new styles
|
Thank you! Going to merge it and do a patch release right now. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
In my last pr I forgot that moving the renderBadge() method out of the renderIcon() method will cause it to lose the animation when you press on the tab. In this pr I've fixed that. the animation is now working properly for the badge