Handling Dimensions and Responsiveness

import { Dimensions } from 'react-native';

const { width, height } = Dimensions.get('screen');
console.log('Screen Width:', width);
console.log('Screen Height:', height);

import React from 'react';
import { View, Text, useWindowDimensions } from 'react-native';

const MyComponent = () => {
  const { width, height } = useWindowDimensions();

  return (
    <View style={{ width, height: height / 2 }}>
      <Text>Screen Width: {width}</Text>
      <Text>Screen Height: {height}</Text>
    </View>
  );
};

export default MyComponent;

{`const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
  },
  child: {
    width: '50%',
    height: '25%',
  }
});`}

import { Dimensions, useWindowDimensions } from 'react-native';\n\nconst { width, height } = useWindowDimensions();\nconst isLandscape = height < width;\n\n// Listen to orientation changes\nconst onChange = ({ window }) => {\n  const { width, height } = window;\n  console.log('New dimensions:', width, height);\n};\n\nDimensions.addEventListener('change', onChange);\n\n// Clean up listener\nreturn () => {\n  Dimensions.removeEventListener('change', onChange);\n};

import { Platform, Dimensions } from 'react-native';

const { width, height } = Dimensions.get('window');
const isIOS = Platform.OS === 'ios';
const isAndroid = Platform.OS === 'android';

// Platform-specific padding
const padding = isIOS ? 20 : 15;

// Platform-specific font size
const fontSize = isAndroid ? 16 : 18;

// Platform-specific height for a button
const buttonHeight = isIOS ? 50 : 45;

// Example usage in a component
const MyComponent = () => (
  <View style={{
    padding,
    height: buttonHeight,
    fontSize
  }}>
    <Text>Platform-specific styles</Text>
  </View>
);

import { Platform } from 'react-native';

const styles = {
  button: {
    padding: Platform.select({
      ios: 20,
      android: 15,
      web: 18
    }),
    borderRadius: Platform.select({
      ios: 10,
      android: 5,
      web: 8
    }),
    backgroundColor: Platform.select({
      ios: '#007AFF',
      android: '#2196F3',
      web: '#FF5722'
    })
  }
};

import { PixelRatio } from 'react-native';

const scale = PixelRatio.get();
const scaledSize = 100 * scale;

console.log("Pixel ratio: ", scale);
console.log("Scaled size: ", scaledSize);

import { Dimensions } from 'react-native';\n\nconst { width, height } = Dimensions.get('window');\nconst baseFontSize = width > 400 ? 18 : 16;\n\nconst styles = {\n  text: {\n    fontSize: baseFontSize,\n    lineHeight: baseFontSize * 1.25\n  }\n};

import { PixelRatio } from 'react-native';\n\nconst scale = PixelRatio.get();\nconst fontSize = 16 * scale;\n\nconst styles = {\n  text: {\n    fontSize,\n    lineHeight: fontSize * 1.25\n  }\n};

import { Dimensions } from 'react-native';

const { width, height } = Dimensions.get('window');
const isSmallScreen = width < 480;
const isLargeScreen = width >= 1024;

// Apply different styles based on screen size
const styles = StyleSheet.create({
  container: {
    padding: isSmallScreen ? 10 : 20,
    margin: isLargeScreen ? 30 : 15
  }
});

import { Dimensions, Platform } from 'react-native';

const { width, height } = Dimensions.get('window');
const isTablet = width >= 600 && height >= 600;
const isPhone = !isTablet;

console.log('Device Type:', isPhone ? 'Phone' : 'Tablet');

import { StyleSheet, View } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
  },
  phoneContainer: {
    padding: 5,
  },
  tabletContainer: {
    padding: 20,
  },
});

// Apply styles conditionally
const containerStyle = isTablet ? styles.tabletContainer : styles.phoneContainer;

import { Dimensions, StyleSheet } from 'react-native';

const { width, height } = Dimensions.get('window');

const styles = StyleSheet.create({
  container: {
    width: width * 0.9,
    height: height * 0.6,
    padding: width * 0.05,
  },
  text: {
    fontSize: width * 0.05,
  }
});

import { Dimensions, StyleSheet } from 'react-native';

const { width } = Dimensions.get('window');

const AdaptiveComponent = () => {
  const isWideScreen = width > 700;
  
  return (
    <View style={[styles.container, isWideScreen ? styles.wideContainer : styles.narrowContainer]}>
      <Text style={styles.text}>Adaptive Content</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 10,
  },
  wideContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  narrowContainer: {
    flexDirection: 'column',
    alignItems: 'center',
  },
  text: {
    fontSize: 16,
  }
});