React Native Assignment– 6

Custom Components and UI Design

Basic Questions

  1. Create a presentational (dumb) component AppHeader that only receives a title as a prop and displays it.
  2. Build a container (smart) component UserListContainer that fetches users from an API and passes them down to a dumb UserList.
  3. Create a reusable Button component with customizable props: label, color, and onPress.
  4. Extend the Button to accept an optional icon (using react-native-vector-icons).
  5. Build a reusable Input component (TextInput) that accepts placeholder, secureTextEntry, and onChangeText.
  6. Create a Card component that accepts title, description, and image props and render them.
  7. Add a Modal component that accepts dynamic content via children props.
  8. Create a reusable Toast component with message and type (success | error) props.
  9. Build a controlled component: Input with internal state for value and a Submit button that calls onSubmit(value).
  10. Build an uncontrolled component: Input that exposes ref for parent access to value.
  11. Demonstrate prop drilling by passing a theme color from App → Parent → Child → Grandchild.
  12. Refactor the above to use React Context instead of prop drilling.
  13. Add custom event handlers: create a Form component that fires onSubmit with all field values.
  14. Add a Button with multiple variants (primary, secondary, outline) by styling based on a prop.
  15. Implement a reusable Modal with fade-in animation using Animated.
  16. Create a Dropdown component that accepts an array of options and fires onSelect(option).
  17. Add a Badge component that displays a count and can be styled via props.
  18. Create a Tab component with two tabs; active tab is highlighted.
  19. Build an Accordion component with expand/collapse functionality for sections.
  20. Memoize a heavy Card component with React.memo and confirm re-render optimization.

Intermediate Questions

  1. Build a Higher-Order Component (HOC) withAuth that only renders a wrapped component if the user is authenticated.
  2. Create a Render Props component DataProvider that fetches JSON and allows consumers to decide how to render it.
  3. Build a Compound Component pattern: Tabs, Tabs.Tab, and Tabs.Content to manage active state internally.
  4. Create a ThemeProvider using Context to pass theme colors; use it across multiple components.
  5. Build a ProfileCard component and split it into subcomponents: ProfileCard.Header, ProfileCard.Body, ProfileCard.Footer.
  6. Organize a reusable Button component into folder structure: Button/index.js, Button.styles.js, and test file.
  7. Refactor a large Form component into smaller subcomponents: Form.Input, Form.Button.
  8. Add React.memo to a ListItem component and measure reduced re-renders in FlatList.
  9. Install react-native-paper and use its Button and TextInput components in a login form.
  10. Customize the react-native-paper Button with brand colors.
  11. Install react-native-elements and create a product list using its Card component.
  12. Override styles of the react-native-elements Card for a unique brand theme.
  13. Install native-base and use its Button and Badge components in a sample screen.
  14. Add dark mode and light mode themes using react-native-paper’s theme provider.
  15. Create a custom theme with react-native-elements and apply it globally.
  16. Extend a react-native-paper TextInput to accept a new errorMessage prop and display error text.
  17. Build a screen mixing components from all three libraries (paper, elements, native-base).
  18. Create a Modal using react-native-paper but override its padding and background color.
  19. Add responsive font scaling with react-native-size-matters for Button text.
  20. Test accessibility by enabling larger font settings and confirm text scales correctly.

Advanced Questions

  1. Add custom Google Fonts (Poppins, Roboto) to your project: configure for both iOS and Android.
  2. Replace default fonts in a ThemeProvider with your custom fonts.
  3. Add multiple font weights (regular, bold, medium) and apply them across Text components.
  4. Install react-native-vector-icons and display FontAwesome icons inside Buttons.
  5. Create a NotificationIcon with a badge counter using MaterialIcons.
  6. Build a reusable IconButton that accepts iconName, library, and onPress.
  7. Add a responsive font scaling hook useResponsiveFontSize() using Dimensions & PixelRatio.
  8. Create a branded button that extends react-native-paper Button with custom padding, radius, and font.
  9. Build a Dashboard screen that uses Cards, Modals, Toasts, and Tabs with consistent theming.
  10. Final Hands-on Project:
    • Create a design system with reusable components (Button, Card, Input, Modal, Toast, Tabs, Accordion)
    • Add themes (light/dark + brand colors) via Context or library theming
    • Integrate third-party UI libraries and override their styles for consistency
    • Add custom fonts and icons globally with dynamic scaling for accessibility
    • Build a complete sample screen (e.g., E-commerce Product Page) using your custom + library components