Styling in React Native

# CHAPTER 9

Styling in React Native #

1. Introduction #

2. Learning Objectives #

• Understand why React Native uses CSS-in-JS instead of standard CSS.

• Apply Inline Styles using JavaScript objects.

• Implement production-grade styling using the StyleSheet API.

• Style text typography (fonts, sizes, weights).

• Add borders, radii, and drop shadows to components.

3. The Rules of CSS-in-JS #

1. 1. camelCase: CSS properties with hyphens become camelCase. (background-color becomes backgroundColor).

1. 2. Strings and Numbers: Pixel values are written as raw numbers (width: 100). Color values are written as Strings (color: 'red'). No px suffix is used!

1. 3. Objects: Styles are wrapped in JavaScript Objects {}.

4. Inline Styling (The Quick Way) #

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

export default function App() {
  return (
    // Note the double curly braces!
    <View style={{ backgroundColor: &#039;dodgerblue&#039;, padding: 20 }}>
      <Text style={{ fontSize: 24, color: &#039;white&#039;, fontWeight: &#039;bold&#039; }}>
        Hello Styled World!
      </Text>
    </View>
  );
}

*Note: Inline styling is great for testing, but terrible for performance if you have 100 components re-rendering.*

5. The StyleSheet API (The Professional Way) #

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

export default function App() {
  return (
    // We reference the style object we created below!
    <View style={styles.container}>
      <Text style={styles.title}>Welcome Back!</Text>
      <Text style={styles.subtitle}>Please log in to continue.</Text>
    </View>
  );
}

// Defined OUTSIDE the component to prevent recreation on every render!
const styles = StyleSheet.create({
  container: {
    backgroundColor: &#039;#f5f5f5&#039;, // Hex codes work perfectly!
    padding: 30,
    marginTop: 50,
    borderRadius: 15, // Rounds the corners of the box
  },
  title: {
    fontSize: 28,
    fontWeight: &#039;800&#039;, // String for font weights
    color: &#039;#333&#039;,
  },
  subtitle: {
    fontSize: 16,
    color: &#039;gray&#039;,
    marginTop: 10,
  }
});

6. Combining Multiple Styles #

<View style={[ styles.container, { backgroundColor: isError ? &#039;red&#039; : &#039;green&#039; } ]}>

7. Borders and Shadows #

const styles = StyleSheet.create({
  card: {
    backgroundColor: 'white',
    padding: 20,
    // BORDERS
    borderWidth: 2,
    borderColor: 'lightgrey',
    borderRadius: 10,
    // iOS SHADOWS
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    // ANDROID SHADOWS
    elevation: 5, 
  }
});

8. Visual Learning: Web CSS vs Mobile Style #

[ Web CSS ]                           [ React Native JS ]
.my-card {                            myCard: {
  background-color: blue;               backgroundColor: 'blue',
  font-size: 16px;                      fontSize: 16,
  padding-top: 10px;                    paddingTop: 10
}                                     }

9. Common Mistakes #

• Applying Text Styles to Views: In web HTML, if you apply color: red; to a <div>, all the <p> tags inside it automatically inherit the red color. React Native does NOT support inheritance. If you apply color: 'red' to a <View>, the app will crash because Views do not understand typography. You MUST apply text styles directly to the <Text> components!

10. Best Practices #

• Global Constants: Do not hardcode #4A90E2 into 50 different style sheets. Create a file called colors.js (export const colors = { primary: '#4A90E2' }) and import it into your StyleSheet configurations. If the brand color changes, you update one single file.

11. Practice Exercises #

1. 1. Convert this CSS rule into a valid React Native JavaScript property: margin-bottom: 25px;.

1. 2. Write the JSX necessary to combine a styles.box object and an inline { padding: 10 } object using an array.

12. MCQs with Answers #

13. Interview Questions #

• Q: Explain the transition from CSS to CSS-in-JS regarding React Native. Identify three major syntax differences a web developer must adapt to.

• Q: Describe the architectural benefit of placing StyleSheet.create() outside of the main component function block.

• Q: Explain why CSS inheritance (e.g., applying font properties to a parent container) is intentionally excluded from the React Native rendering engine.

14. FAQs #

15. Summary #

16. Next Chapter Recommendation #