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 AuthFooter: FunctionComponent = ({ children }) => <View style={styles.buttonContainer}>{children}</View>;
const SCREEN_WIDTH = Dimensions.get('window').width;
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 AuthFooter;
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.