인프런 커뮤니티 질문&답변

버전 차이 (RN StyleSheet, Expo)의 문제거나 안드로이드의 문제인지는 모르겠지만 강의 중 코드로 작성하면 아래와 같은 문제가 나옵니다.

Pressable과 Text에 backgroundColor와 color가 스타일링이 되는 방식이나 Button 요소에 opacity가 적용이 되지 않는 듯한 이슈인 것 같아서 아래와 같이 해결했습니다.

return (
  <Pressable
    style={({ pressed }) => [
      styles.container,
      styles[size],
      { backgroundColor: styles[variant].backgroundColor },
      pressed && styles.pressed,
    ]}
    {...props}
  >
    <Text style={[styles.text, { color: styles[variant].color }]}>
      {label}
    </Text>
  </Pressable>
);

...

const styles = StyleSheet.create({
  container: {
    borderRadius: 8,
    justifyContent: "center",
    alignItems: "center",
  },
  text: {
    fontSize: 14,
    fontWeight: "bold",
  },
  // size
  large: {
    width: "100%",
    height: 44,
  },
  medium: {},
  // variant
  filled: {
    backgroundColor: colors.ORANGE_600,
    color: colors.WHITE,
  },
  // Pressable props
  pressed: {
    opacity: 0.8,
  },
});

저는 강의 코드 대신 이렇게 해서 해결은 되었는데 혹시 이 이슈가 일어나는 이유와 앞으로 코드 복잡도가 어떻게 될 지는 모르겠지만 CustomButton이 그렇게 복잡해지진 않을 것 같은데 방법이 최선일지, 아니면 더 개선할 점이 있는지 궁금합니다.