Styling with StyleSheet

import { StyleSheet } from 'react-native';

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

<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
  <Text style={{ fontSize: 20, color: 'blue' }}>Hello World</Text>
</View>

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

const baseStyle = StyleSheet.create({
  padding: 10,
  borderRadius: 5,
});

const dynamicStyle = StyleSheet.create({
  backgroundColor: 'blue',
  color: 'white',
});

const combinedStyle = StyleSheet.flatten([baseStyle, dynamicStyle]);

// Usage in component
<View style={combinedStyle}>
  <Text style={combinedStyle.text}>Styled Text</Text>
</View>

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

const ParentView = () => {
  return (
    <View style={[styles.container, { flexDirection: 'column' }]}>
      <View style={styles.child}>
        <Text style={styles.text}>Child Text</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  child: {
    // flex properties are inherited from parent
    flex: 1,
  },
  text: {
    // color is NOT inherited, must be set explicitly
    color: '#000',
  },
});

const styles = StyleSheet.create({
  container: {
    position: 'relative',
    width: 300,
    height: 300,
  },
  absoluteBox: {
    position: 'absolute',
    top: 50,
    left: 50,
    width: 100,
    height: 100,
    backgroundColor: 'blue',
  }
});

const styles = StyleSheet.create({
  rotatedBox: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
    transform: [
      { rotate: '45deg' },
      { scale: 1.2 }
    ]
  }
});

const styles = StyleSheet.create({
  translatedBox: {
    width: 100,
    height: 100,
    backgroundColor: 'red',
    transform: [
      { translateX: 50 },
      { translateY: 30 }
    ]
  }
});

const styles = StyleSheet.create({
  text: {
    color: '#FF5733',
  },
  background: {
    backgroundColor: 'rgb(255, 87, 51)',
  },
  border: {
    borderColor: 'rgba(0, 0, 255, 0.5)',
    borderWidth: 2,
  }
});

const styles = StyleSheet.create({
  shadowBox: {
    width: 100,
    height: 100,
    backgroundColor: '#fff',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  }
});

{'const styles = StyleSheet.create({\n  borderedBox: {\n    borderWidth: 2,\n    borderColor: \'blue\',\n    borderRadius: 5,\n    padding: 10\n  }\n});'}

{'const styles = StyleSheet.create({\n  dashedBox: {\n    borderWidth: 1,\n    borderColor: \'green\',\n    borderStyle: \'dashed\'\n  }\n});'}

<View style={{ opacity: 0.5 }}>
  <Text>This text is semi-transparent</Text>
</View>

<View style={{ visibility: 'hidden' }}>
  <Text>This text is hidden but still takes up space</Text>
</View>

{`const DynamicStyles = () => {
  const [isActive, setIsActive] = useState(false);

  const dynamicStyle = StyleSheet.create({
    container: {
      padding: 20,
      backgroundColor: isActive ? '#4CAF50' : '#f44336',
    },
  });

  return (
    <View style={dynamicStyle.container}>
      <Text>Toggle Active State</Text>
    </View>
  );
};`}

{`const StyledComponent = () => {
  const baseStyle = StyleSheet.create({
    text: {
      fontSize: 16,
      color: '#333',
    },
  });

  const activeStyle = StyleSheet.create({
    text: {
      color: '#000',
      fontWeight: 'bold',
    },
  });

  return (
    <Text style={[baseStyle.text, activeStyle.text]}>
      Bold and Dark Text
    </Text>
  );
};`}

import { StyleSheet } from 'react-native';

const baseStyle = {
  fontSize: 16,
  color: 'black',
};

const nestedStyle = {
  ...baseStyle,
  fontWeight: 'bold',
};

const flattenedStyle = StyleSheet.flatten(nestedStyle);

console.log(flattenedStyle);
// Output: { fontSize: 16, color: 'black', fontWeight: 'bold' }