React Native: Props and Components

React Native Overview

• This lecture focuses on React Native as a framework for building mobile apps using JavaScript and React concepts.
• Core idea: write UI in JavaScript/React, which then maps to native UI components on iOS and Android.
• Key distinction from web React: instead of HTML, you render native widgets (e.g., View, Text) via a bridge to the platform APIs.
• Typical structure in a React Native app: components, styling, and a single entry point that bootstraps the app.
• Terminology to recall:
  • Native components: UI elements provided by React Native that map to platform-specific widgets.
  • Bridge: the communication layer between the JavaScript code and native code.
  • Props and state: mechanisms for data flow and interactivity (props are passed from parent to child; state is managed within a component).
• Why React Native matters: enables cross-platform development with a single codebase while still delivering native look-and-feel and performance.
• Foundational concepts to connect with other lectures: component-based architecture, data flow, and styling via JavaScript objects.

Props in React Native

• Definition: props are inputs to a component, passed from parent to child.
• Data flow: unidirectional (top-down) from parent component to child component.
• Syntax example: <ChildComponent title={"Hello"} onPress={handlePress} />
• Props are read-only inside the child component; a child should not mutate its props.
• Destructuring pattern in functional components: function ChildComponent({ title, onPress }) { ... }
• Default props: provide defaults if a prop is not supplied (often via defaultProps for class components or default parameter values for functions).
• Prop type validation: use PropTypes (or TypeScript) to enforce expected types and required props (e.g., ChildComponent.propTypes = { title: PropTypes.string.isRequired }).
• Common props passed to UI elements and custom components:
  • Event handlers like onPress for touchable elements.
  • Styling-related props like style.
  • Content-related props like title, source for images, etc.
• Examples and patterns:
  • Simple wrapper component receiving a title and rendering it inside a Text component.
  • A reusable Button component that accepts title and onPress and forwards them to a touchable element.
• Relationship to state: props convey external data; state represents internal, mutable component data.

Components in React Native

• Components are the building blocks of your UI; in React Native you assemble UIs from components.
• Types of components:
  • Functional components: stateless (or with hooks) and concise syntax.
  • Class components: provide lifecycle methods and internal state (less common with hooks in modern code).
• Built-in native components you’ll work with:
  • View: container for layout and styling (analogous to a div in web React).
  • Text: for displaying text content.
  • Image: to render images.
  • Scrollable containers: ScrollView, FlatList.
  • Interactive elements: TouchableOpacity, TouchableHighlight, Pressable.
• Styling and layout:
  • Styles are JavaScript objects passed via the style prop.
  • React Native uses Flexbox by default for layout.
  • Example pattern: const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center' } });
• StyleSheet and performance:
  • Use StyleSheet.create to create immutable style sheets for potential performance benefits.
• State vs props:
  • Props: external data passed from parent.
  • State: internal data that can change over time (triggering re-renders).
• Component composition:
  • Build small, focused components and compose them into larger UIs.
  • Promote reusability by passing data and handlers through props.
• Lifecycle basics (for class components) and hooks (for functional components):
  • Class: constructor, componentDidMount, componentDidUpdate, componentWillUnmount.
  • Functional: useEffect, useState, useMemo, etc.
• Platform-specific considerations:
  • Platform-specific code paths can be chosen using the Platform module (e.g., Platform.OS).
  • Style and UI may vary slightly between iOS and Android; consider conditional rendering.

Key Concepts and Patterns

• Unidirectional data flow: data moves from parent to child through props; UI updates when state or props change.
• Reusability and composition: build small components and compose them to form complex screens.
• Performance considerations:
  • Minimize unnecessary re-renders; leverage memoization and proper prop types.
  • Use flat lists (FlatList) for large datasets for efficient rendering.
• Accessibility: expose accessibility properties (e.g., accessible, accessibilityLabel) to support assistive tech.
• Platform and device considerations:
  • Different screen sizes and densities; plan responsive layouts.
  • Use platform checks to render platform-specific UI where needed.

Practical Examples

• Example 1: Parent passes props to a child Button component
  • Parent:
  • <Button title={"Submit"} onPress={handleSubmit} color={"blue"} />
  • Child (Button):
  • Receives title, onPress, and optional color via props and renders a touchable element.
• Example 2: Simple component with internal state and props
  • Functional component with a counter:
  • function Counter({ initial }) { const [count, setCount] = useState(initial); return <Text onPress={() => setCount(count + 1)}>{count}</Text>; }
• Example 3: Styling and layout with Flexbox
  • A container with horizontally arranged items:
  • <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}> <Text>Left</Text> <Text>Right</Text> </View>

Real-World Relevance and Implications

• Cross-platform development benefits:
  • Shared codebase for iOS and Android.
  • Faster iteration cycles and consistent UI semantics across platforms.
• Trade-offs:
  • Bridge overhead vs native performance; sophisticated animations may require native modules.
  • Access to platform-specific features may require native code integration.
• Developer experience:
  • Familiar React concepts with mobile-specific components and styling.
  • Strong emphasis on component architecture and prop-driven data flow.

Ethical, Philosophical, and Practical Implications

• Accessibility and inclusivity:
  • Designing components with accessible defaults and proper labeling.
  • Considering contrast, touch target sizes, and readable text for diverse users.
• Privacy and security:
  • Be mindful of data passed through props that could expose sensitive information to child components or logs.
• Responsible use of platform features:
  • Respect platform conventions and user expectations to avoid confusing UX.

Quick Reference: Common Components and Props

• Core UI building blocks:
  • View: layout container; props include style for layout and appearance.
  • Text: display text; props include style, onPress if interactive.
  • Image: display images; props include source, style.
• Interaction primitives:
  • TouchableOpacity, TouchableHighlight, Pressable: handle user interactions; props include onPress and visual feedback settings.
• Styling and layout:
  • Style prop accepts a plain JS object or StyleSheet reference via StyleSheet.create.
  • Key layout concepts: flexDirection, justifyContent, alignItems, padding, margin, borderRadius, overflow.

Summary

• React Native enables building native-like mobile UIs with React principles and JavaScript.
• Props are the primary mechanism for passing data from parents to children and driving child behavior, while state handles internal, mutable data.
• Components in React Native are the reusable building blocks that render native UI elements; understanding functional vs class components helps with lifecycle and state management.
• Effective React Native apps rely on thoughtful component composition, performance-conscious styling with Flexbox, and attention to accessibility and platform considerations.
• The broader implications include cross-platform efficiency, potential trade-offs in performance and native access, and ethical design considerations for inclusivity and privacy.