스크롤이 가능한 상황에서 입력해야 하는 경우에는 이와 같은 UI를 흔히 사용합니다. 유튜브, 벅스(Bugs) 등 댓글 기능이 있는 앱에서 비슷한 UI를 사용하고 있죠.

CommentInput 컴포넌트를 다음과 같이 만들어보세요.

components/CommentInput.tsx

import React from 'react';
import {StyleSheet, Text, Pressable} from 'react-native';

export interface CommentInputProps {
  articleId: number;
}

function CommentInput({}: CommentInputProps) {
  const onPress = () => {
    // TODO: 구현 예정
  };

  return (
      <Pressable style={styles.block} onPress={onPress}>
        <Text style={styles.text}>댓글을 입력하세요</Text>
      </Pressable>
  );
}

const styles = StyleSheet.create({
  block: {
    paddingHorizontal: 16,
    height: 48,
    justifyContent: 'center',
    borderWidth: 1,
    borderColor: '#cdcdcd',
    borderRadius: 4,
    marginTop: 8,
    marginBottom: 16,
    fontSize: 12,
  },
  text: {
    fontSize: 12,
    color: '#898989',
  },
});

export default CommentInput;

이 컴포넌트에서는 articleId를 Props로 받아오는데요. 추후 댓글 작성 후 댓글 목록을 갱신하는 과정에서 사용합니다.