
Product
A New Overview in our Dashboard
We redesigned Socket's first logged-in page to display rich and insightful visualizations about your repositories protected against supply chain threats.
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 0 weekly downloads. As such, react-native-safe-area popularity was classified as not 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
We redesigned Socket's first logged-in page to display rich and insightful visualizations about your repositories protected against supply chain threats.
Product
Automatically fix and test dependency updates with socket fix—a new CLI tool that turns CVE alerts into safe, automated upgrades.
Security News
CISA denies CVE funding issues amid backlash over a new CVE foundation formed by board members, raising concerns about transparency and program governance.