Passing style props to React Native core components in styled-components

April 21, 2020

Problem

Bei React Native Komponenten wie TouchableHighlight muessen bestimmte Props (z.B. underlayColor) gesetzt werden. Mit styled-components geht das am saubersten ueber attrs.

Beispiel

code

import styled from "styled-components/native";

const Button = styled.TouchableHighlight.attrs({
  underlayColor: "#0b3d91",
  activeOpacity: 0.8,
})`
  justify-content: center;
  align-items: center;
  padding: 12px 16px;
  border-radius: 8px;
`;

Tipp

attrs ist ideal fuer Props, die nichts mit CSS zu tun haben (z.B. onPress, underlayColor, activeOpacity).

Passing style props to React Native core components in styled-components

Problem

Beispiel

Tipp

Links