다음으로 포스트 작성 화면의 우측 상단에 등록 버튼을 보여줍시다. 등록 버튼은 종이비행기 모양 아이콘을 사용하겠습니다. 우측 상단 아이콘 버튼은 현재 포스트 작성 화면 외에도 추후 포스트 수정 화면과 프로필 화면에서도 사용되기 때문에, 재사용할 수 있게 만들어보겠습니다.

components 디렉터리에 IconRightButton 컴포넌트를 다음과 같이 만들어보세요.

components/IconRightButton.js

import React from 'react';
import {StyleSheet, View, Pressable, Platform} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

function IconRightButton({name, color, onPress}) {
  return (
    <View style={styles.block}>
      <Pressable
        style={({pressed}) => [
          styles.circle,
          Platform.OS === 'ios' &&
            pressed && {
              opacity: 0.3,
            },
        ]}
        onPress={onPress}
        android_ripple={{color: '#eee'}}>
        <Icon name={name} color={color} size={24} />
      </Pressable>
    </View>
  );
}

IconRightButton.defaultProps = {
  color: '#6200ee',
};

const styles = StyleSheet.create({
  block: {
    marginRight: -8,
    borderRadius: 24,
    overflow: 'hidden',
  },
  circle: {
    height: 48,
    width: 48,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default IconRightButton;