커스텀 버튼 생성하기

function PrimaryButton(props) {
    return (
        <View>
            <Text>{props.children}</Text>
        </View>
    );
}

props.children으로 모든 내용을 가져온다.

객체 구조 분해를 사용한 방법

function PrimaryButton({children}) {
    return (
        <View>
            <Text>{children}</Text>
        </View>
    );

조건에 따라 다른 스타일 적용하기

<Pressable
    style={({ pressed }) => pressed
        ? [styles.buttonInnerContainer, styles.pressed]
        : styles.buttonInnerContainer}
    onPress={pressHandler}
    android_ripple={{ color: '#640233' }}
>

버튼 스타일링

<View style={styles.buttonsContainer}>
    <View>
        <PrimaryButton>Reset</PrimaryButton>
    </View>
    <View>
        <PrimaryButton>Confirm</PrimaryButton>
    </View>
</View>

• 기본적으로 View는 내용에 필요한 만큼의 공간만 가진다.
• 내부 2개의 View는 상위 View의 크기를 나누어 가진다.
• 내부의 View는 독립적이라 각각의 크기가 다르다.

buttonContainer: { flex: 1 }

이를 내부의 View에 적용해주면, 사용가능한 공간을 일정하게 분배해 버튼의 크기가 같아진다.