Mobile App Development Cross-Platform Development Syllabus

In Riverpod, what are the main provider types (Provider, StateProvider, FutureProvider, NotifierProvider)?

Provider exposes a read-only/computed value. StateProvider holds simple mutable state. FutureProvider (and StreamProvider) expose async data as AsyncValue. NotifierProvider/AsyncNotifierProvider expose complex mutable state managed by a Notifier class with methods.

What is the BLoC pattern in Flutter?

BLoC (Business Logic Component) separates business logic from UI using streams. The UI sends Events into the BLoC, which processes them and emits States out through a stream; widgets rebuild in response to new states. It promotes testability and clear separation of concerns.

In the flutter_bloc package, what is the difference between Bloc and Cubit?

A Cubit is a simpler component that exposes methods which directly emit new states (no events). A Bloc is event-driven: you add Events and map them to States via event handlers. Cubit has less boilerplate; Bloc offers better traceability of what triggered each state change.

In flutter_bloc, what do BlocProvider, BlocBuilder, and BlocListener do?

BlocProvider injects a bloc/cubit into the widget tree. BlocBuilder rebuilds UI in response to state changes. BlocListener runs side-effects (navigation, snackbars) on state changes without rebuilding. BlocConsumer combines builder and listener.

In React Native, what are the core components View, Text, and Image, and how do they map to native?

View is the fundamental container (maps to UIView on iOS / android.view on Android), similar to a div. Text renders and nests text (must wrap all text). Image displays images from network, local assets, or base64. These compile to real native views, not web elements.

In React Native / React, what is JSX?

JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside JS. It compiles (via Babel) to React.createElement calls returning React elements. In React Native, JSX tags are core components (View, Text) rather than DOM tags.

In React Native, how does styling differ from web CSS?

Styles are written as JavaScript objects (usually via StyleSheet.create), use camelCase property names (backgroundColor), and there is no cascade/inheritance except limited Text nesting. All dimensions are unitless density-independent pixels, and layout uses Flexbox by default.

In React Native, why is StyleSheet.create preferred over inline style objects?

StyleSheet.create validates styles at creation, can send them once over the bridge by reference (an id) instead of recreating objects each render, and improves readability. It reduces per-render allocation and provides a single place to manage styles.

In React Native Flexbox, how does the default flexDirection differ from web CSS?

In React Native the default flexDirection is column (vertical main axis), whereas in web CSS the default is row. Other Flexbox properties (justifyContent, alignItems, flex) behave similarly but with this different default orientation.

In Flexbox, what is the difference between justifyContent and alignItems?

justifyContent aligns children along the main axis (the flexDirection). alignItems aligns children along the cross axis (perpendicular to the main axis). For flexDirection: column, justifyContent is vertical and alignItems is horizontal.

In React Native Flexbox, what does the flex property do on a single number like flex: 1?

flex: 1 makes a component expand to fill available space along the main axis. When siblings all have flex values, space is distributed proportionally: a child's share is $\frac{\text{its flex}}{\sum \text{flex}}$ of the free space. flex: 0 sizes to content.

What is React Navigation, and what are its main navigator types?

React Navigation is the standard routing library for React Native. Main navigators: Stack Navigator (push/pop screens with transitions), Native Stack (uses native primitives), Bottom Tab Navigator (tabbed bottom bar), and Drawer Navigator (side menu).

In React Navigation, how do you move between screens and pass parameters?

Use navigation.navigate('ScreenName', { id: 42 }) to go to a screen with params, navigation.push to add a new instance, and navigation.goBack() to return. The target screen reads params via route.params (e.g. route.params.id).

In React Navigation, what is the difference between navigation.navigate and navigation.push?

navigate goes to an existing route if it's already in the stack (or adds it), avoiding duplicate screens. push always adds a new instance on top of the stack even if the same screen already exists, allowing repeated stacking of the same route.

In React Native, what is the difference between the Expo managed workflow and the bare workflow?

The Expo (managed) workflow abstracts away native iOS/Android projects; you write only JS/TS and Expo handles builds via EAS, with a curated set of native APIs. The bare workflow exposes the native android/ and ios/ folders, giving full control to add any native module at the cost of managing native code yourself.

In Expo, what are development builds and config plugins, and how do they bridge managed and bare workflows?

A development build is a custom Expo client containing your chosen native dependencies, letting you use libraries beyond Expo Go while staying in a managed-like flow. Config plugins programmatically modify native project config during prebuild, so you can add native functionality without manually leaving the managed workflow.

In React, what are Hooks and what two rules govern them?

Hooks are functions (useState, useEffect, etc.) that let function components use state and lifecycle features. Rules: (1) only call Hooks at the top level, never inside loops/conditions/nested functions; (2) only call Hooks from React function components or custom Hooks. This keeps Hook call order stable across renders.

In React, how does the useState Hook manage component state?

useState(initial) returns a [state, setState] pair. Calling setState with a new value (or an updater function prevState => next) schedules a re-render with the updated value. State updates are asynchronous/batched, and the updater form should be used when the new value depends on the previous one.

In React, what does the useEffect Hook do and how does its dependency array control it?

useEffect runs side effects after render. The dependency array controls when it re-runs: [] runs once after mount, [a, b] re-runs whenever a or b change, and omitting the array runs after every render. Returning a cleanup function runs it before the next effect and on unmount.

In React, when should you use useReducer instead of useState?

Use useReducer for complex state logic with multiple sub-values or when the next state depends on the previous in intricate ways. It centralizes update logic in a reducer(state, action) function and returns [state, dispatch], making transitions predictable and easier to test than scattered setState calls.

In React, what problem does the Context API solve and how is it used?

Context avoids prop drilling by sharing values (theme, user, locale) across the tree without passing props at every level. You create a context with createContext, wrap the tree in a <Context.Provider value={...}>, and read it in descendants with useContext(Context).

In React, what is a key limitation of Context regarding re-renders?

When a Context Provider's value changes, all consuming components re-render, even if they only use part of the value. Context is not optimized for high-frequency updates; for that, split contexts, memoize the value, or use a dedicated state library like Redux/Zustand.

What is Redux, and what are its three core principles?

Redux is a predictable state container. Principles: (1) single source of truth — one immutable store holds all state; (2) state is read-only — you change it only by dispatching actions; (3) changes are made with pure reducer functions (state, action) => newState. Redux Toolkit is the recommended modern implementation.

In Redux, describe the unidirectional data flow of an action.

A component dispatches an action (a plain object with a type). The store passes the current state and action to the reducer, which returns a new state. Subscribed components then re-render with the updated store state. Data flows one way: dispatch → reducer → store → view.

What is React Query (TanStack Query), and what problem does it solve?

React Query manages server state: fetching, caching, synchronizing, and updating asynchronous data. It handles caching, background refetching, deduplication, and loading/error states declaratively, removing the need to store server data manually in Redux/useState and reducing boilerplate for data fetching.

In React Query, what is the difference between useQuery and useMutation?

useQuery is for reading/fetching data; it caches by a queryKey and returns data, isLoading, error, and refetch. useMutation is for creating/updating/deleting data (side-effecting writes); it returns a mutate function and can invalidate queries on success to trigger refetches.

In React Query, what do staleTime and cacheTime (gcTime) control?

staleTime is how long fetched data is considered fresh; while fresh, no background refetch occurs. cacheTime/gcTime is how long inactive (unused) query data stays in cache before garbage collection. Larger staleTime reduces network calls; gcTime governs memory retention of unmounted queries.

In Flutter, what is a Platform Channel and what is its purpose?

A Platform Channel is the mechanism for communication between Dart code and native platform code (Kotlin/Java on Android, Swift/Objective-C on iOS). It lets Flutter invoke platform-specific APIs not covered by the framework by passing asynchronous messages across the boundary.

In Flutter, what are the differences between MethodChannel, EventChannel, and BasicMessageChannel?

MethodChannel invokes discrete named methods and returns a single async result (request/response). EventChannel streams a continuous sequence of events from native to Dart (e.g. sensor updates). BasicMessageChannel passes arbitrary structured messages both ways using a codec. All identify by a unique channel name string.

In Flutter Platform Channels, how is data serialized across the boundary?

Data is serialized using a message codec (default StandardMessageCodec), which supports primitives, strings, byte buffers, lists, and maps. Calls are asynchronous; Dart awaits a Future while the native side handles the call on its main thread and sends back a result, error, or notImplemented.

In React Native, what is a Native Module?

A Native Module is native code (Java/Kotlin or Objective-C/Swift) exposed to JavaScript, letting JS call platform APIs or reuse existing native libraries. You register methods that JS can invoke; results are returned via callbacks, Promises, or events across the bridge.

In React Native, what is the New Architecture's replacement for the bridge, and what are TurboModules and Fabric?

The New Architecture replaces the asynchronous JSON bridge with the JSI (JavaScript Interface), allowing synchronous, direct JS-to-native calls. TurboModules are the new lazily-loaded native modules using JSI; Fabric is the new rendering system. Codegen generates type-safe interfaces from JS spec files.

In React Native, how are values returned from a native module method to JavaScript?

Native module methods can return results via callbacks (success/error functions), via Promises (the JS call awaits, native resolves/rejects), or by emitting events through an event emitter for asynchronous/streaming data. Promises are typical for one-shot async results.

How do cross-platform apps typically access device APIs like camera, GPS, or sensors?

Through plugins/packages that wrap native platform APIs behind a unified Dart/JS interface (e.g. Flutter's camera, geolocator, sensors_plus; React Native's / Expo's expo-camera, expo-location). These handle the platform channel/native module bridging and expose a cross-platform API.

On mobile, why must sensitive device APIs request runtime permissions, and how is this handled cross-platform?

APIs like camera, location, and contacts access private data, so iOS and Android require explicit user consent at runtime (and manifest/Info.plist declarations). Cross-platform apps use permission libraries (permission_handler in Flutter, expo-permissions/PermissionsAndroid in RN) to request and check permission status before accessing the API.

For device location, what is the difference between coarse and fine location, and why choose one?

Coarse location (network/Wi-Fi based) gives approximate position with lower battery cost and a less intrusive permission; fine location (GPS) gives precise coordinates but uses more power. Choose coarse when only general area is needed to save battery and improve privacy; use fine only when precision is essential.

In Flutter, why can excessive or deep widget rebuilds hurt performance, and how do you mitigate them?

Rebuilding large subtrees on every setState wastes CPU and can cause jank. Mitigations: use const constructors so unchanged widgets are cached, split widgets so setState scopes are small, use keys correctly, and use targeted state (Selector/select, ValueListenableBuilder) to rebuild only what changed.

In Flutter, what is the purpose of const constructors for performance?

A const widget is instantiated once at compile time and reused; Flutter can skip rebuilding and re-comparing it because its identity never changes. Marking static subtrees const reduces allocations and rebuild work, improving frame times.

In React/React Native, how do React.memo, useMemo, and useCallback improve performance?

React.memo skips re-rendering a component when its props are shallowly equal. useMemo caches an expensive computed value between renders. useCallback caches a function reference so memoized children don't re-render due to a new function identity each render. All prevent unnecessary work when dependencies are unchanged.

In React Native, why use FlatList/SectionList instead of mapping items in a ScrollView?

FlatList and SectionList virtualize the list, rendering only items near the viewport and recycling views, which keeps memory and render cost low for large datasets. A ScrollView with .map renders every item at once, causing high memory use and jank for long lists.

What is the target frame rate for smooth mobile UI, and what is the per-frame time budget?

Smooth UI targets 60 frames per second (or 120fps on high-refresh displays). At 60fps the budget per frame is $\frac{1000\ \text{ms}}{60} \approx 16.7\ \text{ms}$; exceeding it drops frames and causes visible jank. All build, layout, and paint work must fit within that budget.

In React Native's old architecture, why could bridge traffic cause performance problems?

The old bridge serializes all JS-native communication as batched, asynchronous JSON messages. High-frequency traffic (e.g. per-frame scroll or animation updates) creates serialization overhead and a bottleneck, causing dropped frames. Solutions include using native driver animations (useNativeDriver: true) and the JSI-based New Architecture.

In cross-platform animation, why is running animations on the native/UI thread (e.g. useNativeDriver) important?

Running animations on the native UI thread lets them continue smoothly even when the JavaScript thread is busy, avoiding jank from blocked JS. useNativeDriver: true in React Native (and Flutter's own native rendering) offloads animation from the JS/business logic thread to keep a steady frame rate.

In cross-platform development, what is the general tradeoff between Flutter's rendering approach and React Native's?

Flutter draws its own widgets via the Skia/Impeller engine, giving pixel-consistent UI across platforms independent of native controls. React Native renders actual native components, giving a more platform-native look and feel but with potential inconsistencies and bridge overhead. Flutter favors consistency; RN favors native fidelity.