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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello, React Native!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  },
});

export default App;

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

const FlexboxExample = () => {
  return (
    <View style={styles.container}>
      <View style={styles.box1} />
      <View style={styles.box2} />
      <View style={styles.box3} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: '#e0e0e0',
  },
  box1: {
    width: 50,
    height: 50,
    backgroundColor: '#ff5733',
  },
  box2: {
    width: 50,
    height: 50,
    backgroundColor: '#33ff57',
  },
  box3: {
    width: 50,
    height: 50,
    backgroundColor: '#3357ff',
  },
});

export default FlexboxExample;

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

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

const DimensionsExample = () => {
  return (
    <View style={styles.container}>
      <Text>Width: {width}px</Text>
      <Text>Height: {height}px</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default DimensionsExample;

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

const PlatformExample = () => {
  return (
    <View style={styles.container}>
      <Text>
        Running on: {Platform.OS === 'ios' ? 'iOS' : 'Android'}
      </Text>
      <Text>Version: {Platform.Version}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default PlatformExample;