Get device notch info using react-native
npm install react-native-notch-info$ npm install react-native-notch-info --save
$ react-native link react-native-notch-info
#### Manual installation
#### iOS (via CocoaPods)
Add the following lines to your build targets in your Podfile
``
pod 'React', :path => '../node_modules/react-native'
pod 'RNNotchInfo', :path => '../node_modules/react-native-notch-info'
`
Then run pod install
#### iOS (via CocoaPods)
In XCode, in the project navigator:
1. Right click Libraries[your project's name]
2. Add Files to node_modules/react-native-notch-info/ios
3. Go to RNNotchInfo.xcodeproj
4. Add the file
5. In XCode, in the project navigator, select your project.
Add the libRNNotchInfo.a from the notchinfo project to your project's Build Phases ➜ Link Binary With Libraries.xcodeproj
Click file you added before in the project navigator and go the Build Settings tab. Make sure All is toggled on (instead of Basic).
Look for Header Search Paths and make sure it contains both $(SRCROOT)/../react-native/React and $(SRCROOT)/../../React
Mark both as recursive (should be OK by default).
Run your project (Cmd+R)
#### Android
1. Open up android/app/src/main/java/[...]/MainActivity.javaimport com.reactlibrary.RNNotchInfoPackage;
- Add to the imports at the top of the filenew RNNotchInfoPackage()
- Add to the list returned by the getPackages() methodandroid/settings.gradle
2. Append the following lines to :`
`
include ':react-native-notch-info'
project(':react-native-notch-info').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-notch-info/android')
android/app/build.gradle
3. Insert the following lines inside the dependencies block in :`
`
compile project(':react-native-notch-info')
javascript
class App extends React.Component{ state = {
hasNotch : false,
notchHeight: 0,
}
componentDidMount = () => {
RNNotchInfo.hasNotch(( hasNotch ) => this.setState({ hasNotch : hasNotch }));
RNNotchInfo.notchHeight((notchHeight) => this.setState({ notchHeight: notchHeight}));
}
render(){
return (
{this.state.hasNotch ? "This phone has notch" : "This phone does not have notch"}
Notch height is {this.state.notchHeight} pixels
);
}
}
``