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 4: Common Style Properties

Introduction

Understanding and effectively using common style properties is essential for creating visually appealing and functional mobile apps.

Key Style Properties

Layout Properties: flex, flexDirection, justifyContent, alignItems
Size Properties: width, height, padding, margin
Text Properties: color, fontSize, fontWeight, textAlign
Border Properties: borderWidth, borderColor, borderRadius
Shadow Properties: shadowColor, shadowOffset, shadowOpacity, shadowRadius

Real World Scenario: JUST-Learning App

Consider you need to style a button in the “JUST-Learning” app to enroll in a course. The button should be prominent and visually appealing.

Example Code:

import React from 'react';

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

  return (

    <TouchableOpacity style={styles.button}>

      <Text style={styles.buttonText}>Enroll Now</Text>

    </TouchableOpacity>

  );

};
const styles = StyleSheet.create({

  button: {

    backgroundColor: '#007bff',

    padding: 16,

    borderRadius: 8,

    alignItems: 'center',

    marginVertical: 8,

    shadowColor: '#000',

    shadowOffset: { width: 0, height: 2 },

    shadowOpacity: 0.2,

    shadowRadius: 4,

  },

  buttonText: {

    fontSize: 16,

    fontWeight: 'bold',

    color: '#fff',

  },

});

export default EnrollButton;

Conclusion

In this lesson, you explored common style properties in React Native and saw practical examples of their use. These properties form the building blocks of effective styling in your apps.