[React Native] ios 노치 제거 에러 삽질 및 해결하기

안녕하세요. 딜레이입니다.

이번 포스팅에서는 React Native개발 시, ios에서 발생하는 노치를 없애보겠습니다!!

사실 상 제거한다기보다는 에러를 해결하는 느낌입니다..

삽질하는 과정이 있으니 결과만 보실려면 "최종 해결" 을 ctrl+f해서 보시면 됩니다.

이거때문에 3시간 넘게 찾아봤음..ㅠㅠ

 

IOS 노치

 

이렇게 너무 거슬리는 노치를 제거해보겠습니다.

 

현재 코드

* src/App.js

import React from "react";
import styled, { ThemeProvider } from "styled-components/native";
import { theme } from "./theme";
import { StatusBar } from "react-native";
import Navigation from "./navigations";
import { SafeAreaView } from "react-native-safe-area-context";

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <SafeAreaView style={{ flex: 1 }}>
        <StatusBar />
        <Navigation />
      </SafeAreaView>
    </ThemeProvider>
  );
};

export default App;

 

수정 1: Container 만들기

노치는 해결됐지만 화면이 안 뜸..

* src/App.js

import React from "react";
import styled, { ThemeProvider } from "styled-components/native";
import { theme } from "./theme";
import { StatusBar } from "react-native";
import Navigation from "./navigations";
import { SafeAreaView } from "react-native-safe-area-context";

const Container = styled.SafeAreaView`
  flex: 1;
  background-color: ${({ theme }) => theme.background};
  align-items: center;
  justify-content: flex-start;
`;
const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Container>
          <StatusBar />
          <Navigation />
      </Container>
    </ThemeProvider>
  );
};

export default App;

로그를 찍으니 분명히 실행은 된다...

흠... Container 의 Style이 아래의 것들을 다 먹는 듯 싶다..?

 

수정 2: SafeAreaProvider 추가해보기

수정1과 같은 결과가 나왔다...

* src/App.js

import React from "react";
import styled, { ThemeProvider } from "styled-components/native";
import { theme } from "./theme";
import { StatusBar } from "react-native";
import Navigation from "./navigations";
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";

const App = () => {
  return (
    <SafeAreaProvider>
      <ThemeProvider theme={theme}>
        <SafeAreaView style={{ height: "100%" }} edges={["right", "left"]}>
          <StatusBar />
          <Navigation />
        </SafeAreaView>
      </ThemeProvider>
    </SafeAreaProvider>
  );
};

export default App;

 

수정3: padding 추가하기

 

노치의 테두리가 조금 줄어들었다????

* src/App.js

import React from "react";
import styled, { ThemeProvider } from "styled-components/native";
import { theme } from "./theme";
import { StatusBar } from "react-native";
import Navigation from "./navigations";
import { SafeAreaView } from "react-native-safe-area-context";

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <SafeAreaView
        style={{
          flex: 1,
          padding: 20,
        }}
      >
        <StatusBar />
        <Navigation />
      </SafeAreaView>
    </ThemeProvider>
  );
};

export default App;

ㅋㅋㅋ여기서 너무 기뻐서 padding:'100%'를 했지만 다시 "수정 1" 과 동일하게 아무것도 나오지 않았습니다...

100%라 화면을 또 가렸나..?

+ padding 추가하기2

이번에는 꼼수로 100% -> 50% -> 15% 했더니 노치가 사라진줄 알았습니다..

와 노치가 사라졌...어라? 아이디 찾기 비밀번호 찾기 회원가입 간격이 이상해졌다,,,

* src/App.js

import React from "react";
import styled, { ThemeProvider } from "styled-components/native";
import { theme } from "./theme";
import { StatusBar } from "react-native";
import Navigation from "./navigations";
import { SafeAreaView } from "react-native-safe-area-context";

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <SafeAreaView
        style={{
          flex: 1,
          padding: "15%",
        }}
      >
        <StatusBar />
        <Navigation />
      </SafeAreaView>
    </ThemeProvider>
  );
};

export default App;

 

최종 해결

 

노치 해결 성공!!

 

feat. 리액트 네이티브 공식문서는 신이야..

https://reactnative.dev/docs/safeareaview

SafeAreaView · React Native

위의 링크에 들어가면 아래의 코드를 바로 확인할 수 있습니다....

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

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.text}>Page content</Text>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  text: {
    fontSize: 25,
    fontWeight: '500',
  },
});

export default App;

 

<공식문서>
import {StyleSheet, Text, SafeAreaView} from 'react-native';

<지금까지의 내 코드>
import { SafeAreaView } from "react-native-safe-area-context";

SafeAreaView를 import 할 때는 꼭 react-native에서 해야합니다......

최종 코드

* src/App.js

import React from "react";
import styled, { ThemeProvider } from "styled-components/native";
import { theme } from "./theme";
import { StatusBar, SafeAreaView } from "react-native";
import Navigation from "./navigations";

const Container = styled.SafeAreaView`
  flex: 1;
  background-color: ${({ theme }) => theme.background};
  align-items: center;
  justify-content: flex-start;
`;
const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <SafeAreaView
        style={{
          flex: 1,
          backgroundColor: theme.background,
        }}
      >
        <StatusBar />
        <Navigation />
      </SafeAreaView>
    </ThemeProvider>
  );
};

export default App;

 

읽어주셔서 감사합니다!