Abnormal rendering of ActionButton.Item

[mareebsiddiqui]

render() {
        return (
            <View style={{ flex: 1 }}>
                <Text>Meetups List</Text>
                <ActionButton buttonColor="rgba(231,76,60,1)">
                    <ActionButton.Item buttonColor='#9b59b6' title="New Task" onPress={() => console.log("notes tapped!")}>
                        <Icon name="md-create" style={styles.actionButtonIcon} />
                    </ActionButton.Item>
                    <ActionButton.Item buttonColor='#3498db' title="Notifications" onPress={() => { }}>
                        <Icon name="md-notifications-off" style={styles.actionButtonIcon} />
                    </ActionButton.Item>
                    <ActionButton.Item buttonColor='#1abc9c' title="All Tasks" onPress={() => { }}>
                        <Icon name="md-done-all" style={styles.actionButtonIcon} />
                    </ActionButton.Item>
                </ActionButton>
            </View>
        );

I have added this ActionButton component to one of my screens and this the output:

How to resolve this rendering issue?

[neo125874]

@mareebsiddiqui hi, are you update this recently? i fall into this situation too, but not yesterday, maybe it's the new version's bug? I just accidentally re-install it, and .....

[david50407]

+1 on 2.7.0 with RN 0.42.3

[david50407]

Find a workaround according to 9d77fa0

apply fixNativeFeedbackRadius={false} on ActionButton.Item fixed this problem
but it will let ripple go outside the cornor (rect ripple)

[neo125874]

@david50407 thanks, my workground is back to version 2.6, haha just kidding

[mastermoo]

i reverted some changes from last PR. check out v2.7.1.

looks like the ripple effect going outside the corner cannot be fixed.. lol