Last active
December 18, 2024 17:58
-
-
Save giolaq/48671e13a6146efe14f113e2bd50d9ed to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import { View, ViewStyle, StyleSheet } from 'react-native'; | |
| import { scaledPixels } from '@/hooks/useScale'; | |
| type SafeZoneProps = { | |
| children: React.ReactNode; | |
| style?: ViewStyle; | |
| top?: boolean; | |
| bottom?: boolean; | |
| left?: boolean; | |
| right?: boolean; | |
| }; | |
| const SafeZone: React.FC<SafeZoneProps> = ({ | |
| children, | |
| style, | |
| top = true, | |
| bottom = true, | |
| left = true, | |
| right = true, | |
| }) => { | |
| return ( | |
| <View style={styles.container}> | |
| {/* Overscan visualization overlays */} | |
| {top && <View style={styles.topOverscan} />} | |
| {bottom && <View style={styles.bottomOverscan} />} | |
| {left && <View style={styles.leftOverscan} />} | |
| {right && <View style={styles.rightOverscan} />} | |
| {/* Safe zone content */} | |
| <View style={[ | |
| styles.safeZone, | |
| { | |
| marginTop: top ? '5%' : 0, | |
| marginBottom: bottom ? '5%' : 0, | |
| marginLeft: left ? '5%' : 0, | |
| marginRight: right ? '5%' : 0, | |
| }, | |
| style | |
| ]}> | |
| {children} | |
| </View> | |
| </View> | |
| ); | |
| }; | |
| const styles = StyleSheet.create({ | |
| container: { | |
| flex: 1, | |
| position: 'relative', | |
| }, | |
| safeZone: { | |
| flex: 1, | |
| }, | |
| topOverscan: { | |
| position: 'absolute', | |
| top: 0, | |
| left: 0, | |
| right: 0, | |
| height: '5%', | |
| backgroundColor: 'rgba(255, 0, 0, 0.2)', | |
| zIndex: 999, | |
| }, | |
| bottomOverscan: { | |
| position: 'absolute', | |
| bottom: 0, | |
| left: 0, | |
| right: 0, | |
| height: '5%', | |
| backgroundColor: 'rgba(255, 0, 0, 0.2)', | |
| zIndex: 999, | |
| }, | |
| leftOverscan: { | |
| position: 'absolute', | |
| top: 0, | |
| left: 0, | |
| bottom: 0, | |
| width: '5%', | |
| backgroundColor: 'rgba(255, 0, 0, 0.2)', | |
| zIndex: 999, | |
| }, | |
| rightOverscan: { | |
| position: 'absolute', | |
| top: 0, | |
| right: 0, | |
| bottom: 0, | |
| width: '5%', | |
| backgroundColor: 'rgba(255, 0, 0, 0.2)', | |
| zIndex: 999, | |
| }, | |
| }); | |
| export default SafeZone; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment