Shipsar Tutorials

Chapter 7: Styling in React Native

1. Introduction to StyleSheet

• Overview: In React Native, styles are not applied using traditional CSS but through JavaScript objects. The StyleSheet API is provided to create these styles in an organized and efficient way.
• Usage Example:

  import React from 'react';
  import { View, Text, StyleSheet } from 'react-native';
  
  const MyComponent = () => {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Hello, React Native!</Text>
      </View>
    );
  };
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#f2f2f2',
    },
    text: {
      fontSize: 20,
      color: '#333',
    },
  });
  
  export default MyComponent;
  

• Key Points:
  • The StyleSheet.create() method is used to define styles, making them more efficient by optimizing and validating the style objects.
  • Styles are written as JavaScript objects, with properties in camelCase (e.g., backgroundColor instead of background-color).
  • Styles in React Native are not inherited, unlike in CSS.

2. Applying Styles to Components

• Overview: Applying styles in React Native is straightforward, using the style prop on components. You can pass an array of styles, conditionally apply styles, or dynamically generate them.
• Usage Example:

  import React from 'react';
  import { View, Text, StyleSheet } from 'react-native';
  
  const MyStyledComponent = ({ isActive }) => {
    return (
      <View style={styles.container}>
        <Text style={[styles.text, isActive && styles.activeText]}>
          {isActive ? 'Active' : 'Inactive'}
        </Text>
      </View>
    );
  };
  
  const styles = StyleSheet.create({
    container: {
      padding: 20,
    },
    text: {
      fontSize: 18,
      color: '#666',
    },
    activeText: {
      color: '#008000',
      fontWeight: 'bold',
    },
  });
  
  export default MyStyledComponent;
  

• Key Points:
  • Styles can be conditionally applied using JavaScript logic within the component.
  • Multiple styles can be applied to a single component by passing an array of styles to the style prop.

3. Using Flexbox for Layouts

• Overview: Flexbox is the primary method for creating layouts in React Native. It offers a powerful way to control the alignment, spacing, and distribution of components within a container.
• Usage Example:

  import React from 'react';
  import { View, Text, StyleSheet } from 'react-native';
  
  const FlexboxLayout = () => {
    return (
      <View style={styles.container}>
        <View style={styles.box}><Text>Box 1</Text></View>
        <View style={styles.box}><Text>Box 2</Text></View>
        <View style={styles.box}><Text>Box 3</Text></View>
      </View>
    );
  };
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'space-around',
      alignItems: 'center',
    },
    box: {
      width: 100,
      height: 100,
      backgroundColor: '#6495ED',
      justifyContent: 'center',
      alignItems: 'center',
    },
  });
  
  export default FlexboxLayout;
  

• Key Points:
  • flexDirection determines the primary axis of the layout (row or column).
  • justifyContent controls how children are aligned along the main axis.
  • alignItems controls how children are aligned along the cross axis.
  • flex is used to control how much space a component should take relative to its siblings.

4. Advanced Styling Techniques

• Overview: Beyond basic styling, React Native allows for more complex and dynamic styles, including theming, responsive design, and animations.
• Theming Example:

  import React from 'react';
  import { View, Text, StyleSheet } from 'react-native';
  
  const theme = {
    colors: {
      primary: '#6C49FF',
      secondary: '#FF6C49',
    },
  };
  
  const ThemedComponent = () => {
    return (
      <View style={styles.container}>
        <Text style={[styles.text, { color: theme.colors.primary }]}>
          Themed Text
        </Text>
      </View>
    );
  };
  
  const styles = StyleSheet.create({
    container: {
      padding: 20,
    },
    text: {
      fontSize: 18,
    },
  });
  
  export default ThemedComponent;
  

• Responsive Design Example:

  import React from 'react';
  import { View, Text, StyleSheet, Dimensions } from 'react-native';
  
  const { width, height } = Dimensions.get('window');
  
  const ResponsiveComponent = () => {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Responsive Design</Text>
      </View>
    );
  };
  
  const styles = StyleSheet.create({
    container: {
      padding: 20,
      backgroundColor: '#f2f2f2',
      width: width * 0.8,
      height: height * 0.2,
      justifyContent: 'center',
      alignItems: 'center',
    },
    text: {
      fontSize: width * 0.05,
    },
  });
  
  export default ResponsiveComponent;
  

• Animation Example:

  import React, { useRef, useEffect } from 'react';
  import { View, Text, Animated, StyleSheet } from 'react-native';
  
  const AnimatedComponent = () => {
    const fadeAnim = useRef(new Animated.Value(0)).current;
  
    useEffect(() => {
      Animated.timing(fadeAnim, {
        toValue: 1,
        duration: 2000,
        useNativeDriver: true,
      }).start();
    }, [fadeAnim]);
  
    return (
      <Animated.View style={[styles.container, { opacity: fadeAnim }]}>
        <Text style={styles.text}>Fade In Text</Text>
      </Animated.View>
    );
  };
  
  const styles = StyleSheet.create({
    container: {
      padding: 20,
      backgroundColor: '#6C49FF',
      justifyContent: 'center',
      alignItems: 'center',
    },
    text: {
      fontSize: 18,
      color: '#fff',
    },
  });
  
  export default AnimatedComponent;
  

• Key Points:
  • Theming helps in maintaining consistent styles across the app.
  • Responsive design is essential for creating layouts that adapt to different screen sizes.
  • Animations can enhance user experience by adding motion and interactivity.