이 컴포넌트는 Props로 받아온 name 값을 사용해 Material 아이콘을 보여줍니다. 아이콘 색상은 color Props로 설정되며, 이 값이 비어있으면 기본값으로 보라색(#6200ee)을 사용합니다. 이 컴포넌트의 스타일을 보면 marginRight의 값을 -8로 설정했습니다. 이렇게 음수 값으로 설정해주면 우측에 8dp만큼 여백이 생기는 게 아니라, 8dp만큼 컴포넌트가 이동하게 됩니다. 만약 이 값을 설정하지 않으면 헤더의 기본 패딩 때문에 컴포넌트가 우측에서 너무 많이 떨어져 있는 현상이 나타납니다.

이 컴포넌트를 포스트 작성 화면 헤더의 우측에 보여주는 방법은 두 가지가 있습니다. 하나는 RootStack에서 화면 설정을 통한 방법, 또 하나는 UploadScreen에서 navigation.setOptions로 설정하는 방법입니다. 우리는 이 버튼을 눌렀을 때 UploadScreen에 있는 상태를 사용해야 하니, 두 번째 방법으로 구현해주겠습니다.

screens/UploadScreen.js

import React, {useEffect, useRef, useState, useCallback} from 'react';
import {
  StyleSheet,
  TextInput,
  View,
  useWindowDimensions,
  Keyboard,
  Animated,
} from 'react-native';
import {useNavigation, useRoute} from '@react-navigation/native';
import IconRightButton from '../components/IconRightButton';

function UploadScreen() {
  (...)
  const navigation = useNavigation();
  const onSubmit = useCallback(() => {
    // TODO: 포스트 작성 로직 구현
  }, []);
  (...)
  useEffect(() => {
    navigation.setOptions({
      headerRight: () => <IconRightButton onPress={onSubmit} name="send" />,
    });
  }, [navigation, onSubmit]);

  return (
    <View style={styles.block}>
      <Animated.Image
        source={{uri: res.assets[0]?.uri}}
        style={[styles.image, {height: animation}]}
        resizeMode="cover"
      />
      <TextInput
        style={styles.input}
        multiline={true}
        placeholder="이 사진에 대한 설명을 입력하세요..."
        textAlignVertical="top"
        value={description}
        onChangeText={setDescription}
      />
    </View>
  );
}

(...)