react-native-notchclear
v1.0.2
Published
to complete react-native notch issue on ios, android
Downloads
8
Maintainers
Readme
react-native-notchclear
to complete react-native notch issue on ios, android (It also supports expo.)
It is a library that can solve all the notch area problems that occur in android and ios.
android ios
,
Installation
This library use react-native-safe-area-context
, so you need to install it.
react-native-cli
npm install react-native-safe-area-context
or
yarn add react-native-safe-area-context
expo
expo install react-native-safe-area-context
And then execute the command to install react-native-notchclear.
react-native-cli
npm install react-native-notchclear --save
or
yarn add react-native-notchclear
expo
expo install react-native-notchclear
How to use
Import react-native-notchclear.
import { NotchView, NotchProvider } from "react-native-notchclear";
first in your App.js add NotchProvider
First, add Notch Provider to your App.js file. After that, all additional operations such as navigation should be done within this system.
App.js
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { NotchView, NotchProvider } from "react-native-notchclear";
export default function App() {
return <NotchProvider>//Just add additional code here</NotchProvider>;
}
android, ios
,
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { NotchView, NotchProvider } from "react-native-notchclear";
export default function App() {
return (
<NotchProvider>
<NotchView>
<Text>12312312312321312312</Text>
</NotchView>
</NotchProvider>
);
}
The default color is all white. But there is still more.
android, ios
,
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { NotchView, NotchProvider } from "react-native-notchclear";
export default function App() {
return (
<NotchProvider>
<NotchView top="#ff0000" bottom="#00ff00" main="#ffffff">
<Text>12312312312321312312</Text>
</NotchView>
</NotchProvider>
);
}
top is the color of the top area main is the color of the interruption bottom indicates the color of the bottom part.
Unlike android, ios has to additionally specify the bottom color.
android, ios
,
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { NotchView, NotchProvider } from "react-native-notchclear";
export default function App() {
return (
<NotchProvider>
<NotchView edges={["top"]} top="#ff0000" bottom="#00ff00" main="#ffffff">
<Text>12312312312321312312</Text>
</NotchView>
</NotchProvider>
);
}
If you want to exclude the lower part of ios from the notch area
You can do this by adding the edges={["top"]} option.
android, ios
,
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { NotchView, NotchProvider } from "react-native-notchclear";
export default function App() {
return (
<NotchProvider>
<NotchView
edges={["bottom"]}
top="#ff0000"
bottom="#00ff00"
main="#ffffff"
>
<Text>12312312312321312312</Text>
</NotchView>
</NotchProvider>
);
}
Conversely, only top can be excluded from the notch area, and left, right, top, and bottom are all possible.
If you want to change the color of the statusbar, just add
import React from "react";
import { StyleSheet, Text, View, StatusBar } from "react-native";
import { NotchView, NotchProvider } from "react-native-notchclear";
export default function App() {
return (
<NotchProvider>
<NotchView edges={["top"]} top="#ff0000" bottom="#FFFFFF" main="#00ff00">
<StatusBar
animated={true}
backgroundColor="#61dafb"
//barStyle={statusBarStyle}
//showHideTransition={statusBarTransition}
hidden={false}
/>
<Text>1231231231232132</Text>
</NotchView>
</NotchProvider>
);
}
Properties
All props of react-native-notchclear.
| Prop | required | Type | Description | | ------ | -------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | top | X | string | Enter the color in hexadecimal. ex) #ff0000 The default is #ffffff. | | main | X | string | Enter the color in hexadecimal. ex) #ff0000 The default is #ffffff. | | bottom | X | string | Enter the color in hexadecimal. ex) #ff0000 The default is #ffffff. | | edges | X | array | edges={["top"]} ,edges={["bottom"]} ,edges={["left"]} ,edges={["right"]} All four directions are possible and it is possible to use them together. ex) edges={["top"],["left"]} |