Curriculum

Styling in React Native

Introduction to Styling in React Native

0/5

Starting Course

0/3

Advanced Styling Techniques

0/5

After Intro

0/3

Using Third-Party Libraries for Styling

0/5

Responsive Design and Media Queries

0/5

Detailed Overview of Style Properties in React Native

0/8

Comparing Styling Techniques

0/5

Animations and Transitions

0/5

Final Project

0/7

Final Assessment

0/1

Text lesson

Lesson 3: Inline Styling in React Native

Introduction

Inline styling involves directly applying style properties to components. It is useful for dynamic styles that change based on component state or props.

Key Concepts

Direct Application: Styles are applied directly to the style prop as an object.
Dynamic Styles: Inline styles can be easily generated based on component state or props.

Real World Scenario: JUST-Learning App

Imagine you want to highlight a course card when it is selected. Inline styling allows you to dynamically change the background color based on the card’s state.

Example Code:

import React, { useState } from 'react';

import { View, Text, TouchableOpacity } from 'react-native';
const CourseCard = ({ course }) => {

  const [selected, setSelected] = useState(false);
  return (

    <TouchableOpacity

      onPress={() => setSelected(!selected)}

      style={{

        backgroundColor: selected ? '#d1e7dd' : '#fff',

        padding: 16,

        borderRadius: 8,

        marginVertical: 8,

        shadowColor: '#000',

        shadowOpacity: 0.2,

        shadowRadius: 4,

      }}

    >

      <Text style={{ fontSize: 18, fontWeight: 'bold', color: '#333' }}>{course.title}</Text>

      <Text style={{ fontSize: 14, color: '#666' }}>{course.description}</Text>

    </TouchableOpacity>

  );

};

export default CourseCard;

Benefits and Limitations

Benefits: Easy to implement and useful for dynamic styles.
Limitations: Can lead to less readable code and harder maintenance if overused.

Conclusion

In this lesson, you learned about inline styling and its application in React Native. While it offers flexibility for dynamic styles, it should be used judiciously to maintain code readability and manageability.