React Native Assignment– 2

Core Components & Layouts

Basic Questions

  1. Create a simple app with a <View> container and a <Text> inside that says “Hello Core Components”.
  2. Nest two <View> components and style them with different background colors.
  3. Add multiple <Text> components with different font sizes and colors using inline styles.
  4. Use StyleSheet.create to define styles for <Text> and apply bold + center alignment.
  5. Render a local image using <Image> (from the assets folder).
  6. Render a remote image from a URL using <Image>.
  7. Create a ScrollView with 20 <Text> items that are scrollable vertically.
  8. Add horizontal scrolling to a ScrollView with images placed side by side.
  9. Create a basic form with <TextInput> for username and password fields.
  10. Configure TextInput with placeholder and secureTextEntry.
  11. Add a numeric-only TextInput using keyboardType=”numeric”.
  12. Create a <TouchableOpacity> button that changes text on press.
  13. Create a <TouchableHighlight> button with a background highlight effect on press.
  14. Use <Pressable> to show “Pressed” or “Not Pressed” text based on press state.
  15. Create a styled button with TouchableOpacity to increment a counter.
  16. Define multiple styles in StyleSheet and apply them conditionally.
  17. Create a layout with Flexbox: a row of 3 boxes evenly spaced.
  18. Create a stacked column of 3 <View> boxes with different colors.
  19. Fetch screen width/height using Dimensions.get(“window”) and display them in a <Text>.
  20. Add responsive font size using react-native-responsive-dimensions library.

Intermediate Questions

  1. Build a layout with a header, content, and footer using Flexbox.
  2. Create a two-column grid layout using Flexbox with flexDirection=”row”.
  3. Add an image gallery inside a ScrollView that scrolls horizontally.
  4. Create a controlled TextInput that updates state as the user types.
  5. Validate input: show an error message if TextInput is empty on submit.
  6. Build a FlatList rendering 10 items with unique keys using keyExtractor.
  7. Add initialNumToRender={5} to FlatList and measure rendering optimization.
  8. Update FlatList items dynamically using extraData state.
  9. Create a SectionList that groups a list of fruits into categories (Citrus, Berries, etc.).
  10. Add a custom header and footer to SectionList.
  11. Implement getItemLayout in SectionList for performance optimization.
  12. Use TouchableOpacity to build a custom button with rounded corners and shadow.
  13. Use Pressable to apply scaling animation (zoom in/out) when pressed.
  14. Build a login form with TextInput fields and a submit button.
  15. Use KeyboardAvoidingView to adjust form position when the keyboard is open.
  16. Add logic to dismiss the keyboard when tapping outside TextInput.
  17. Create a Flexbox layout with justifyContent=”space-between” and 3 items.
  18. Create a Flexbox layout with alignItems=”center” and multiple children.
  19. Build a responsive grid of 6 images that adapts to screen width.
  20. Compare inline styles vs StyleSheet performance by rendering 100 styled <Text> elements.

Advanced Questions

  1. Build a chat UI: FlatList showing messages with Text and timestamp in different styled bubbles.
  2. Create a SectionList contact list with alphabet headers (A–Z).
  3. Implement lazy-loading images with <Image> by rendering placeholders until load.
  4. Create a multi-field form with validation (email format, password length, etc.) using useReducer.
  5. Build a form that resets all TextInput values when pressing a reset button.
  6. Implement a ScrollView form that automatically scrolls to the next field on submit.
  7. Create a Pressable card component with different background colors for pressed, hovered, and focused states.
  8. Build a responsive layout: header + 2-column content + footer, adapting for portrait and landscape.
  9. Create a shopping cart UI with FlatList: render items, allow deletion, update total dynamically.
  10. Final Hands-on Project:
    • Build a mini registration app
    • Layout: Header (title), Body (form), Footer (submit button) using Flexbox
    • Use multiple TextInput fields (name, email, password, phone) with validation
    • Dismiss keyboard on tap outside + use KeyboardAvoidingView
    • Display entered data in a FlatList below the form
    • Add responsive styles (Dimensions + responsive-dimensions)