Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
react-native-safe-area
Advanced tools
React Native module to get Safe Area Insets for iOS 11 or later
React Native module to handle safe area insets natively for iOS 11 or later.
npm
npm install --save react-native-safe-area
You can link native code in the way you prefer:
Add line to your project target section in your Podfile:
target 'YourProjectTarget' do
+ pod 'react-native-safe-area', path: '../node_modules/react-native-safe-area'
end
If you received error jest-haste-map: Haste module naming collision: Duplicate module name: react-native
, add lines below to your Podfile and reinstall pods.
target 'YourProjectTarget' do
+ rn_path = '../node_modules/react-native'
+ pod 'yoga', path: "#{rn_path}/ReactCommon/yoga/yoga.podspec"
+ pod 'React', path: rn_path
pod 'react-native-safe-area', path: '../node_modules/react-native-safe-area'
end
+ post_install do |installer|
+ installer.pods_project.targets.each do |target|
+ if target.name == "React"
+ target.remove_from_project
+ end
+ end
+ end
Run command below:
react-native link react-native-safe-area
Use withSafeArea
to apply safe area insets to views automatically.
import { withSafeArea } from 'react-native-safe-area'
A higher-order component which applies safe area insets automatically to the wrapped component.
component
: Component - Wrapped component.applyTo
: string - (Optional) Specify property to apply safe area insets.
margin
- style.margin
. (Default)padding
- style.padding
.absolutePosition
- style.top
, style.bottom
, style.left
and style.right
.contentInset
- contentInset
and contentOffset
for scroll views.direction
: string - (Optional) Specify direction to apply safe area insets.
top
- Apply to top.bottom
- Apply to bottom.left
- Apply to left.right
- Apply to right.topAndLeft
- top
+ left
.topAndRight
- top
+ right
.bottomAndLeft
- bottom
+ left
.bottomAndRight
- bottom
+ right
.horizontal
- left
+ right
.horizontalAndTop
- horizontal
+ top
.horizontalAndBottom
- horizontal
+ bottom
.vertical
- top
+ bottom
.verticalAndLeft
- vertical
+ left
.verticalAndRight
- vertical
+ right
.all
- horizontal
+ vertical
. (Default)const SafeAreaView = withSafeArea(View, 'margin', 'all')
class App extends Component<{}> {
render() {
return (
<SafeAreaView>
<View />
</SafeAreaView>
)
}
}
const SafeAreaScrollView = withSafeArea(ScrollView, 'contentInset', 'vertical')
class App extends Component<{}> {
render() {
return (
<SafeAreaScrollView>
<View />
</SafeAreaScrollView>
)
}
}
You can also apply safe area insets to FlatList and SectionList.
wrappedRef
: refReturns wrapped component's ref.
currentSafeAreaInsets
: SafeAreaInsetsReturns current safe area insets.
import SafeArea from 'react-native-safe-area'
If you want to use SafeAreaInsets
type, you can import it like below:
import SafeArea, { type SafeAreaInsets } from 'react-native-safe-area'
SafeArea.getSafeAreaInsetsForRootView()
.then((result) => {
console.log(result)
// { safeAreaInsets: { top: 44, left: 0, bottom: 34, right: 0 } }
})
class App extends Component<{}> {
// To keep the context of 'this'
onSafeAreaInsetsForRootViewChange = this.onSafeAreaInsetsForRootViewChange.bind(this)
componentDidMount() {
// Add event listener
SafeArea.addEventListener('safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsForRootViewChange)
}
componentWillUnmount() {
// Remove event listener
SafeArea.removeEventListener('safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsForRootViewChange)
}
onSafeAreaInsetsForRootViewChange(result) {
// Called every time that safe area insets changed
console.log(result)
// { safeAreaInsets: { top: 0, left: 44, bottom: 21, right: 44 } }
}
}
A simple example project is here.
FAQs
React Native module to get Safe Area Insets for iOS 11 or later
The npm package react-native-safe-area receives a total of 4,054 weekly downloads. As such, react-native-safe-area popularity was classified as popular.
We found that react-native-safe-area demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.