Moved from React Native Stylesheet to Styled components. How to add elevation when styled components do not recognize elevation as a property?

Question

I have the following simple component that used React Native Stylesheet up until now, but right now I'm trying to move onto Styled components. I'm just a bit confused how to apply elevation to the styled component, when it doesn't recognize elevation as a property?

const Footer= ({ children }) => <View style={styles.buttonContainer}>{children}</View>;

const StyledView = styled.View`
    position: 'absolute';
    bottom: '0';
    width: ${SCREEN_WIDTH};
    padding: 20;
    background-color: ${colors.white};
    border-top-color: ${colors.creamTransparent200};
    border-top-width: 2;
    elevation: 10;
`;

const styles = StyleSheet.create({
    buttonContainer: {
        position: 'absolute',
        bottom: 0,
        width: SCREEN_WIDTH,
        paddingHorizontal: 20,
        backgroundColor: colors.white,
        borderTopColor: colors.creamTransparent200,
        borderTopWidth: 2,
        elevation: 10,
        paddingVertical: 20,
    },
});

export default Footer;

score 1 · Answer 1 · answered May 13 '22 at 13:43

Unfortunately it is not possible to use the elevation in the css properties of the styled components, but you can add a View property like this:

const StyledView = styled.View.attrs({
    buttonContainer: {
        elevation: 10,
    }
})`
    position: 'absolute';
    bottom: '0';
    width: ${SCREEN_WIDTH};
    padding: 20;
    background-color: ${colors.white};
    border-top-color: ${colors.creamTransparent200};
    border-top-width: 2;
`;

If it still doesn't work as you expect, I recommend using this library.

Moved from React Native Stylesheet to Styled components. How to add elevation when styled components do not recognize elevation as a property?

1 Answers1