React Native Components

Components

• Building blocks of a React Native app
• Reusable pieces of code that represent a part of the user interface
• Types of components:
  • Functional components: No access to lifecycle methods
  • Class components: Access to lifecycle methods
• Component lifecycle:
  • Mounting: Component is inserted into the DOM tree
  • Updating: Component's props or state change
  • Unmounting: Component is removed from the DOM tree
• Component properties:
  • Props: Immutable values passed from parent components
  • State: Mutable values managed by the component itself

Navigation

• Navigation in React Native is handled by the react-navigation library
• Navigation types:
  • Stack navigation: Multiple screens stacked on top of each other
  • Tab navigation: Multiple screens accessible through tabs
  • Drawer navigation: Screen slides in from the side
• Navigation components:
  • Navigator: Manages the navigation state
  • Screen: Represents a single screen in the navigation flow
  • Stack.Navigator: Manages a stack of screens

Native Modules

• Native modules allow access to native platform functionality
• Types of native modules:
  • Native UI components: e.g., DatePickerIOS, SegmentedControlIOS
  • Native APIs: e.g., CameraRoll, MapView
• Native modules can be:
  • Built-in: Provided by React Native
  • Third-party: Created by the community
  • Custom: Created by the developer

JSX

• JSX is a syntax extension for JavaScript
• Allows writing HTML-like code in JavaScript files
• JSX advantages:
  • Simplifies code
  • Improves code readability
  • Reduces errors
• JSX syntax:
  • ``: Self-closing tag
  • content: Tag with content
  • {expression}: JavaScript expression

State Management

• State management in React Native is handled by the useState hook
• useState:
  • Takes an initial state value as an argument
  • Returns an array with the current state and an update function
• State management best practices:
  • Keep state minimal and simple
  • Avoid complex state updates
  • Use the useReducer hook for complex state management

Components

• Components are the building blocks of a React Native app and represent a part of the user interface.
• There are two types of components: functional components, which have no access to lifecycle methods, and class components, which have access to lifecycle methods.
• The component lifecycle consists of three phases: mounting, when the component is inserted into the DOM tree, updating, when the component's props or state change, and unmounting, when the component is removed from the DOM tree.
• Components have two types of properties: props, which are immutable values passed from parent components, and state, which are mutable values managed by the component itself.

Navigation

• Navigation in React Native is handled by the react-navigation library.
• There are three types of navigation: stack navigation, which allows multiple screens to be stacked on top of each other, tab navigation, which allows multiple screens to be accessible through tabs, and drawer navigation, which allows a screen to slide in from the side.
• Navigation components include Navigator, which manages the navigation state, Screen, which represents a single screen in the navigation flow, and Stack.Navigator, which manages a stack of screens.

Native Modules

• Native modules allow access to native platform functionality, such as native UI components and native APIs.
• Native modules can be built-in, provided by React Native, third-party, created by the community, or custom, created by the developer.
• Examples of native UI components include DatePickerIOS and SegmentedControlIOS, while examples of native APIs include CameraRoll and MapView.

JSX

• JSX is a syntax extension for JavaScript that allows writing HTML-like code in JavaScript files.
• JSX simplifies code, improves code readability, and reduces errors.
• JSX syntax includes self-closing tags, tags with content, and JavaScript expressions.

State Management

• State management in React Native is handled by the useState hook.
• The useState hook takes an initial state value as an argument and returns an array with the current state and an update function.
• Best practices for state management include keeping state minimal and simple, avoiding complex state updates, and using the useReducer hook for complex state management.