Tengo el siguiente componente simple que usaba React Native Stylesheet hasta ahora, pero en este momento estoy tratando de pasar a los componentes con estilo. Estoy un poco confundido sobre cómo aplicar la elevación al componente con estilo, cuando no reconoce la elevación como una propiedad.
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, }, });exportar AuthFooter predeterminado;
Desafortunadamente, no es posible usar la elevación en las propiedades css de los componentes con estilo, pero puede agregar una propiedad Ver como esta:
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; `;Si aún no funciona como esperas, te recomiendo usar esta biblioteca .