React Native Assignment– 4

Styling & Theming

Basic Questions

  1. Create a screen that uses StyleSheet.create to style a centered “Hello Styling” text (font size 24, bold, primary color).
  2. Build a header–content–footer layout with Flexbox (flexDirection, justifyContent, alignItems) and distinct background colors.
  3. Convert inline styles in a component to a shared styles.js module and import them.
  4. Add a responsive container that pads horizontally by 16 on phones and 24 on tablets using Dimensions.
  5. Create a two-column grid of cards using Flexbox wrapping; maintain equal spacing.
  6. Style a <TextInput> with rounded corners and shadow/elevation; ensure shadow shows on iOS and elevation on Android.
  7. Add a StatusBar with dark content on light background and verify contrast.
  8. Use Platform.select to apply platform-specific fonts (e.g., System vs Roboto).
  9. Implement a pressable button that visually shows pressed state (opacity or scale) via Pressable style callback.
  10. Create a SafeAreaView wrapper and verify no content overlaps with notches.
  11. Use PixelRatio.getFontScale() to adjust a title’s font size for large accessibility settings.
  12. Add an image banner that maintains aspect ratio using resizeMode=”cover” inside a fixed-height container.
  13. Build a “tag” pill component with rounded background and uppercase text; reuse it in a list.
  14. Implement a divider component that draws a 1px hairline using StyleSheet.hairlineWidth.
  15. Create a reusable Spacer component with a size prop and use it between stacked items.
  16. Apply numberOfLines and ellipsizeMode=”tail” to truncate a long title elegantly.
  17. Add RTL support: set flexDirection based on I18nManager.isRTL and verify layout flips.
  18. Create a color constants file (theme/colors.ts|js) and replace hard-coded colors across one screen.
  19. Build a card with shadow on iOS and elevation on Android; verify parity visually.
  20. Add a KeyboardAvoidingView that shifts a form up, and keep the submit button pinned to bottom with Flexbox.

Intermediate Questions

  1. Create a responsive grid that shows 2 columns on narrow screens and 3 on wide screens using Dimensions and calculated item width.
  2. Implement scalable typography: write a scaleFont(size) helper using Dimensions/PixelRatio and apply to headings/body.
  3. Add dark mode support using the Appearance API; swap light/dark color palettes automatically.
  4. Provide a manual theme toggle button that overrides system theme via React Context (ThemeContext).
  5. Animate theme changes (background and text colors) using Animated.Value or react-native-reanimated.
  6. Build a reusable Button component that supports variant=”primary|secondary|ghost” with consistent padding, radius, and typography.
  7. Implement a skeleton loader (animated shimmer) placeholder for list items while content loads.
  8. Create a sticky header list using SectionList with styled section headers and subtle separators.
  9. Implement an image grid with lazy-loading thumbnails and a blurred placeholder until loaded.
  10. Extract spacing and radius into a theme/spacing & theme/radius scale; refactor one screen to use tokens only.
  11. Introduce semantic color tokens (e.g., background, surface, textPrimary, textSecondary, accent) and map to light/dark palettes.
  12. Build a settings page that previews theme changes live across sample components (buttons, text, cards).
  13. Add platform-consistent shadows: create a helper shadow(elevation) that returns iOS shadow props and Android elevation.
  14. Implement a Container component that constrains content to a max width and centers it on tablets.
  15. Use Pressable style callback to implement hover (web), focus (TV), and pressed states with different styles where supported.
  16. Create a “chip group” with selectable chips; selected chips change background and text color using theme tokens.
  17. Add a Modal with dimmed backdrop; ensure backdrop blocks touches and supports light/dark opacity.
  18. Implement a responsive hero banner: text on top of image for phones, side-by-side for tablets (orientation-aware).
  19. Build a ListItem with left icon, title, subtitle, and right accessory; ensure correct vertical rhythms (line heights).
  20. Generate a simple design audit: list every color and font size used on two screens and consolidate them into tokens.

Advanced Questions

  1. Create a full theming system using React Context or a library (e.g., react-native-paper/styled-components): light, dark, and high-contrast themes, with persistence (AsyncStorage).
  2. Implement dynamic color adaptation using iOS Material/semantic colors or Android dynamic color (where available) with graceful fallbacks.
  3. Build a virtualized masonry grid (variable card heights) with performant item renderers and recycled cells.
  4. Add code-splitting/lazy loading for heavy UI subtrees (e.g., charts) and show a themed fallback skeleton until loaded.
  5. Implement a perf-safe long list item: memoize row components, stabilize keyExtractor, and avoid inline closures to minimize re-renders.
  6. Create a theme-driven design system: Text, Heading, Button, Card, Surface, Input, each consuming tokens and supporting states (disabled, loading, error).
  7. Build an accessibility review overlay: toggle an overlay that highlights low-contrast text and missing hit-slope areas (<44×44) and logs issues to console.
  8. Add adaptive layouts for foldables/tablets: detect window segments and reposition panes accordingly.
  9. Implement runtime font loading (custom fonts) with fallback stacks; ensure text reflow doesn’t cause layout shift by precomputing metrics where possible.
  10. Final Hands-on Project:
    • Set up a token-based theme (colors, spacing, radius, typography) with light/dark + high-contrast variants
    • Provide system/dynamic theme detection with manual override and persistence
    • Build 3 sample screens (Dashboard, List, Details) using only design-system components
    • Add skeleton loaders, lazy-loaded heavy components, and responsive layouts for phone/tablet
    • Ensure accessibility (contrast, hit targets, semantics) and RTL layout parity
    • Profile re-renders and fix hotspots; document measurable improvements (FPS, memory, re-render counts)