
Security News
Open Source Maintainers Demand Ability to Block Copilot-Generated Issues and PRs
Open source maintainers are urging GitHub to let them block Copilot from submitting AI-generated issues and pull requests to their repositories.
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 5,136 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.
Security News
Open source maintainers are urging GitHub to let them block Copilot from submitting AI-generated issues and pull requests to their repositories.
Research
Security News
Malicious Koishi plugin silently exfiltrates messages with hex strings to a hardcoded QQ account, exposing secrets in chatbots across platforms.
Research
Security News
Malicious PyPI checkers validate stolen emails against TikTok and Instagram APIs, enabling targeted account attacks and dark web credential sales.