Elevation style prop causing issues with child components

Question

Have all my styling done for two buttons I am using inside header title to switch back between screens. The iOS implementation works perfect but the elevation style prop for Android is causing some issues. It seems to also pass down the elevation style to the child component which in my case is a TouchableOpacity which makes the button click look a little off. Is there any way to fix this issue? See images for a better idea on click impact...

I have attempted to style the TouchableOpacity to elevation:0 to override the issue with no luck. Just to get the elevation style prop to work I had to set a borderColor: 'transparent'.

static navigationOptions = (navData) => {
        return {
            headerTitle: (
                <View style={styles.titleContainer}>
                    <TouchableOpacity style={styles.mapTitleButton} onPress={() => { navData.navigation.navigate('Map')}}>
                          <Text style={[styles.titleFont, style={color: Colors.buttonSelected}]}>MAP</Text>  
                    </TouchableOpacity>

                    <TouchableOpacity style={styles.listTitleButton}>
                        <Text style={styles.titleFont}>LIST</Text>
                    </TouchableOpacity>
                </View>
            ), 
            headerLeft: (
                <View style={styles.headerButtonLeft}>
                    <HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
                        <Item title="menu" iconName="ios-menu" onPress={() => {
                            navData.navigation.toggleDrawer()
                        }} />
                    </HeaderButtons>
                </View>
            ),
            headerRight: (
                <View style={styles.placeholder}></View>
            ),
        }
    }
}

const styles = StyleSheet.create({
    titleContainer: {
        alignItems: 'center',
        flexDirection: 'row',
        height: '60%',
        width: '50%',
        justifyContent: 'center',
        shadowOffset: { width: 0, height: 0 },
        shadowOpacity: 0.7,
        shadowRadius: 1,
        shadowColor: '#000000',
        elevation: 5,
        borderColor: 'transparent'
    },
    mapTitleButton: {
        backgroundColor: Colors.buttonUnSelected,
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    listTitleButton: {
        backgroundColor: Colors.buttonSelected,
        flex:1,
        alignItems: 'center',
        justifyContent: 'center'
    },
    titleFont: {
        fontFamily: 'sailec',
        alignItems: 'center',
        justifyContent: 'center',
        textAlign: 'center',
        padding: 10,
        fontSize: 13
    },
    container: {
        alignItems: 'center',
        justifyContent: 'center',
        flex: 1
    }
});

Android Screen Capture

score 0 · Answer 1 · answered Sep 11 '19 at 08:38

0

Did you try with: TouchableWithoutFeedback

answered Sep 11 '19 at 08:38

Oleg

3,580
1
7
12

Yes, it only causes a larger issue of the shadow appearing on the inside just as it does when clicked. – SKeney Sep 11 '19 at 14:01

score 0 · Accepted Answer · answered Sep 11 '19 at 16:18

Rather than putting elevation in the parent container I fixed it by putting it in the styling for the actual TouchableOpacity. Good to also note that for Android I needed to set borderColor: 'transparent' to also get the elevation to render.

So styling as shown below:

titleContainer: {
        alignItems: 'center',
        flexDirection: 'row',
        height: '60%',
        width: '50%',
        justifyContent: 'center',
        shadowOffset: { width: 0, height: 0 },
        shadowOpacity: 0.7,
        shadowRadius: 1,
        shadowColor: '#000000',
    },
    mapTitleButton: {
        backgroundColor: Colors.buttonUnSelected,
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        elevation: 5,
        borderColor: 'transparent'
    },
    listTitleButton: {
        backgroundColor: Colors.buttonSelected,
        flex:1,
        alignItems: 'center',
        justifyContent: 'center',
        elevation: 5,
        borderColor: 'transparent'
    },

Elevation style prop causing issues with child components

2 Answers2