강의록에 제공해주신 코드를 그대로 붙여넣기하면 괜찮은데, 제가 만든 코드를 입력하면 상단에 '나만의 꿀팁'이란 글자가 상단바랑 겹칩니다.

제 코드에 어떤 문제가 있는 건가요?

보고 계신 화면 전체를 캡처해 주시면, 튜터님들

이 빠르게 상황을 이해할 수 있어요.

작성한 코드 및 에러 메세지

import React from 'react';
import { StyleSheet, Text, View,Image,ScrollView,TouchableOpacity, SafeAreaView} from 'react-native';



export default function App() {
  return (
    <ScrollView style={styles.container}>
      <Text style={styles.main}>나만의 꿀팁</Text>
      <Image
        source={{ uri: 'https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2Fmain.png?alt=media&token=8e5eb78d-19ee-4359-9209-347d125b322c' }}
        style={styles.mainimage} />
        <ScrollView horizontal={true} indicatorStyle={"white"} style={styles.containertwo}>
          <TouchableOpacity style={styles.middleButton01}>
            <Text style={styles.textStyle}>생활</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.middleButton02}>
            <Text style={styles.textStyle}>제테크</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.middleButton03}>
            <Text style={styles.textStyle}>반려견</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.middleButton04}>
            <Text style={styles.textStyle}>꿀팁 찜</Text>
          </TouchableOpacity>
        </ScrollView>
        <View style={styles.cardContainer}>
          <View style={styles.card}>
            <Image
            source={{ uri: 'https://storage.googleapis.com/sparta-image.appspot.com/lecture/pizza.png' }}
            style={styles.cardimage} />
            <View style={styles.cardText}>
              <Text style={styles.cardTitle}>먹다 남은 피자를 촉촉하게!</Text>
              <Text style={styles.cardDesc} numberOfLines={3}>먹다 남은 피자는 수분이 날라가기 때문에 처음처럼 맛있게 먹을 수 없는데요. 이럴 경우 그릇에 물을 받아 전자레인지 안에서 1분 30초에서 2분 정도 함께 돌려주면 촉촉하게 먹을 수 있습니다. 물이 전자레인지 안에서 수증기를 일으키고, 피자에 촉촉함을 더해줍니다.</Text>
              <Text style={styles.cardDate}>2020.09.09</Text>
            </View>
          </View>
        </View>
    </ScrollView>
  );
}


const styles = StyleSheet.create({
  container: {
    backgroundColor:"fff"
  },
  main:{
    fontSize:20,
    fontWeight:'700',
    margintop:50,
    marginLeft:20
  },
  containertwo: {
    marginTop:20,
    marginLeft:10,
    height:60
  },
  cardContainer: {
    marginTop:10,
    marginLeft:10
  }, 
  card: {
   flex:1,
   flexDirection:"row",
   margin:10,
   borderBottomWidth:0.5,
   borderBottomColor:"#eee",
   paddingBottom:10
  },
  middleButton01:{
    width:100,
    height:50,
    padding:15,
    backgroundColor:"#fdc453",
    borderColor:"deeppink",
    borderRadius:15,
    margin:7
  },
  middleButton02: {
    width:100,
    height:50,
    padding:15,
    backgroundColor:"#fe8d6f",
    borderRadius:15,
    margin:7
  },
  middleButton03: {
    width:100,
    height:50,
    padding:15,
    backgroundColor:"#9adbc5",
    borderRadius:15,
    margin:7
  },
  middleButton04: {
    width:100,
    height:50,
    padding:15,
    backgroundColor:"#f886a8",
    borderRadius:15,
    margin:7
  },
  textStyle:{
    color:"#fff",
    fontWeight:"700",
    textAlign:"center"
  },
  mainimage: {
    width:"90%",
    height:200,
    marginTop:10,
    borderRadius:10,
    alignSelf:"center",
  },
  cardimage: {
    flex:1,
    width:100,
    height:100,
    borderRadius:10
  },
  cardText: {
    flex:2,
    flexDirection:"column",
    marginLeft: 10
  },
  cardTitle:{
    fontSize:20,
    fontWeight:"700"
  },
  cardDesc:{
    fontSize:15
  },
  cardDate:{
    fontSize:10,
    color:"#A6A6A6"
  }


  });

Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.

Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!