create-rn-starter-kit/template/src/components/HiddenDevMenu/styles.ts

Interactive CLI for creating modular React Native apps with Expo

// src/components/HiddenDevMenu/styles.ts
import { StyleSheet } from 'react-native';

export const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  activationZone: {
    position: 'absolute',
    width: 16, // Very narrow for precise activation
    height: 60, // Tall enough to hit easily
    zIndex: 1000, // Ensure it's on top
  },
  debugActivationZone: {
    backgroundColor: 'rgba(255, 255, 0, 0.4)', // Yellow when debug is on
    borderRadius: 5,
  },
  topLeftActivation: {
    top: 0,
    left: 0,
  },
  topRightActivation: {
    top: 0,
    right: 0,
  },
  gestureZone: {
    position: 'absolute',
    justifyContent: 'center',
    alignItems: 'center',
  },
  leftZone: {
    left: 0,
  },
  rightZone: {
    right: 0,
  },
  debugIndicator: {
    position: 'absolute',
    top: 100,
    left: 0,
    right: 0,
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.7)',
    paddingVertical: 4,
  },
  debugText: {
    color: 'white',
    fontSize: 12,
  },
  modalContainer: {
    flex: 1,
  },
});