인프런 커뮤니티 질문&답변

 레이아웃 표시를 했을때, 위치는 잡히는 것 같지만 시각적으로 전혀 보이지 않아요. 마치 뒤에 가려진 것 처럼요

// InputForm.js

import { KeyboardAvoidingView, Platform, Pressable, StyleSheet, Text, TextInput, View } from 'react-native'
import React from 'react'

const InputForm = () => {
  return (

    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      style={styles.addFormContainer}>


      <TextInput
        style={styles.inputField}
        placeholder="할 일을 작성해주세요."
      />

      <Pressable style={styles.addButton}>
        <Text style={styles.addButtonText} >+</Text>
      </Pressable>

    </KeyboardAvoidingView>
  )
}

export default InputForm

const styles = StyleSheet.create({
  addFormContainer: {
    flexDirection: 'row',
    marginTop: 'auto',
    marginBottom: 30,
    paddingHorizontal: 20,
    backgroundColor: '#f7f8fa'
  },
  inputField: {
    flex: 1,
    height: 42,
    padding: 5,
    marginRight: 25,
    borderRadius: 4,
    borderColor: 'rgba(0, 0, 0, 0.2)',
    borderWidth: 1,
    color: '#000000',
    fontSize: 15,
    textAlignVertical: 'center'
  },
  addButton: {
    justifyContent: 'center',
    alignItems: 'center',
    width: 42,
    height: 42,
    borderRadius: 4,
    backgroundColor: 'rgba(0,0,0,0.7)',
    shadowColor: '#000000',
    shadowOpacity: 0.14,
    shadowRadius: 8,
    shadowOffset: {
      width: 0,
      height: 4
    }
  },
  addButtonText: {
    color: 'white',
    fontSize: 25
  },
})

// MainScreen.js

import { SafeAreaView, StyleSheet, Text, View, StatusBar, Platform } from 'react-native'
import React from 'react'
import InputForm from '../components/InputForm'

const MainScreen = () => {
  return (
    <View>
      <SafeAreaView style={styles.container}>
        <StatusBar barStyle={'default'} />
        <Text style={styles.pageTitle}>ToDo App</Text>
        <View style={styles.listView}>
          <Text style={styles.listTitle}>할 일</Text>
        </View>
        <View style={styles.separator} />
        <View style={styles.listView}>
          <Text style={styles.listTitle}>완료된 일</Text>
        </View>
        <InputForm />
      </SafeAreaView>
    </View>
  )
}

export default MainScreen

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Platform.OS = 'android' ? 20 : 0,
    backgroundColor: '#f7f8fa'
  },
  pageTitle: {
    marginBottom: 35,
    paddingHorizontal: 15,
    fontSize: 54,
    fontWeight: '600',
  },
  separator: {
    marginHorizontal: 10,
    marginTop: 25,
    marginBottom: 10,
    borderBottomWidth: 1,
    borderBottomColor: 'rgba(0,0,0,0.2)'
  },
  listView: {
    flex: 1,
  },
  listTitle: {
    marginBottom: 25,
    paddingHorizontal: 15,
    fontSize: 41,
    fontWeight: '500',
  }
})

// App.js

import { StyleSheet, Text, View } from 'react-native';
import MainScreen from './screens/MainScreen';

export default function App() {
  return (
    <View style={styles.container}>
      <MainScreen />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'flex-start',
    justifyContent: 'center',
  },
});

// package.json

{
  "name": "awesomeproject",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "^51.0.27",
    "expo-status-bar": "~1.12.1",
    "react": "18.2.0",
    "react-native": "0.74.5"
  },
  "devDependencies": {
    "@babel/core": "^7.24.0"
  },
  "private": true
}