[React-Native] 커스텀 버튼 만들기

1. Button 컴포넌트의 구조

react native의 깃허브를 찾아 들어가면 Button이 어떻게 구현되어 있는지 확인할 수 있는데, 핵심 부분은 다음과 같이 구현되어있다.
https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Components/Button.js

    <Touchable
      accessible={accessible}
      accessibilityActions={accessibilityActions}
      onAccessibilityAction={onAccessibilityAction}
      accessibilityLabel={ariaLabel || accessibilityLabel}
      accessibilityHint={accessibilityHint}
      accessibilityLanguage={accessibilityLanguage}
      accessibilityRole="button"
      accessibilityState={_accessibilityState}
      importantForAccessibility={_importantForAccessibility}
      hasTVPreferredFocus={hasTVPreferredFocus}
      nextFocusDown={nextFocusDown}
      nextFocusForward={nextFocusForward}
      nextFocusLeft={nextFocusLeft}
      nextFocusRight={nextFocusRight}
      nextFocusUp={nextFocusUp}
      testID={testID}
      disabled={disabled}
      onPress={onPress}
      touchSoundDisabled={touchSoundDisabled}
      ref={ref}>
      <View style={buttonStyles}>
        <Text style={textStyles} disabled={disabled}>
          {formattedTitle}
        </Text>
      </View>
    </Touchable>

결국 Button component도 Touchable과 View와 Text의 조합으로 만들어진 것이기 때문에 직접 button을 만들어 사용하는 것도 가능하다.

2. 커스텀 버튼 만들기

사실 이전 게시글에서 Pressable component에 대해 설명하면서 만들었던 것이 커스텀 버튼을 만드는 것과 동일한 예시이다.
https://velog.io/@jjjk0605/React-Native-Pressable%EA%B3%BC-%EC%8B%9C%EA%B0%81%EC%A0%81-%ED%94%BC%EB%93%9C%EB%B0%B1
아래 코드를 보면 조금 특이한 부분이 있는데,

  return (
    <View style={styles.buttonOuterContainer}>
      <Pressable
        android_ripple={{ color: "#640233" }}
        style={({ pressed }) =>
          pressed
            ? [styles.buttonInnerContainer, styles.pressed]
            : styles.buttonInnerContainer
        }
        onPress={pressHandler}
      >
        <Text style={styles.buttonText}>{children}</Text>
      </Pressable>
    </View>
  );
    
const styles = StyleSheet.create({
  buttonOuterContainer: {
    borderRadius: 28,
    margin: 4,
    overflow: "hidden",
  },
  buttonInnerContainer: {
    backgroundColor: "#72063c",
    paddingVertical: 8,
    paddingHorizontal: 16,
    elevation: 2,
  },
  buttonText: {
    color: "white",
    textAlign: "center",
  },
  pressed: {
    opacity: 0.75,
  },
});

이 코드를 보면 Pressable 컴포넌트의 style부분이 아래 코드처럼 되어있다.

style={({ pressed }) =>
          pressed
            ? [styles.buttonInnerContainer, styles.pressed]
            : styles.buttonInnerContainer
        }

[ ]를 사용하여 스타일 여러개를 하나로 합칠 수 있다.