Topic 10: Libraries (Image Picker, React Elements)

📖 6 min read · 🎯 Advanced · 🧭 Prerequisites: using-other-open-source-material, introduction-to-redux

Why this matters

Up until now, you've been building React Native screens that work — but they probably feel a bit plain. Here's the thing: real apps need more than working buttons and text. Users expect to pick files, see sharp images that load fast, and interact with polished UI components that look professional. Writing all of that from scratch would take weeks. That's exactly why we use libraries like react-native-fast-image, react-native-document-picker, and react-native-elements — they hand you production-ready pieces so you can focus on building your app, not reinventing the wheel. In this lesson, we wire all three together into one working screen.

What You'll Learn

• Install and use react-native-fast-image to display images with priority control and resize modes
• Install and use react-native-document-picker to let users select files from their device
• Install and use react-native-elements (with react-native-vector-icons) to build polished UI components
• Compose all three into a unified App.js with a ScrollView

The Analogy

Think of a React Native app as a food truck that serves one core dish — but to compete in the city market it needs specialty toppings from dedicated vendors. react-native-fast-image is the sauce vendor: they know everything about keeping condiments fresh in cache and delivering them at the right consistency. react-native-document-picker is the order-ticket system: it reaches into the customer's bag (their device storage) and pulls out exactly what they hand over. react-native-elements is the branding kit — matching cups, napkins, and signage that makes everything look intentional without reinventing the wheel. Each vendor plugs into the same truck (your app), and the truck assembles the final plate (App.js).

Chapter 1: Handling Images with react-native-fast-image

Standard <Image> in React Native is serviceable, but react-native-fast-image adds aggressive caching, request prioritisation, and reliable resize behaviour — exactly what a content-heavy Vizag app needs.

Step 1 — Install the library

npm install react-native-fast-image

Step 2 — Link the library (older React Native versions only)

Autolinking handles this on React Native ≥ 0.60. For older projects:

react-native link react-native-fast-image

Step 3 — Create ImageComponent.js

import React from 'react';
import { StyleSheet, View } from 'react-native';
import FastImage from 'react-native-fast-image';

const ImageComponent = () => {
  return (
    <View style={styles.container}>
      <FastImage
        style={styles.image}
        source={{
          uri: 'https://your-image-url.com/image.jpg',
          priority: FastImage.priority.normal,
        }}
        resizeMode={FastImage.resizeMode.cover}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: 200,
    height: 200,
  },
});

export default ImageComponent;

Key props to know:

• source.uri — the remote image URL
• source.priority — FastImage.priority.low | .normal | .high controls download queue position
• resizeMode — FastImage.resizeMode.cover | .contain | .stretch | .center

Chapter 2: Picking Files with react-native-document-picker

react-native-document-picker opens the native file browser on iOS and Android, letting users hand your app a file from device storage or cloud providers.

Step 1 — Install the library

npm install react-native-document-picker

Step 2 — Link the library (older React Native versions only)

react-native link react-native-document-picker

Step 3 — Create FilePickerComponent.js

import React, { useState } from 'react';
import { View, Button, Text, StyleSheet } from 'react-native';
import DocumentPicker from 'react-native-document-picker';

const FilePickerComponent = () => {
  const [file, setFile] = useState(null);

  const pickFile = async () => {
    try {
      const result = await DocumentPicker.pick({
        type: [DocumentPicker.types.allFiles],
      });
      setFile(result);
    } catch (err) {
      if (DocumentPicker.isCancel(err)) {
        console.log('User cancelled the picker');
      } else {
        console.log('Unknown error:', err);
      }
    }
  };

  return (
    <View style={styles.container}>
      <Button title="Pick a File" onPress={pickFile} />
      {file && (
        <Text style={styles.fileInfo}>
          {file.name} ({file.size} bytes)
        </Text>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  fileInfo: {
    marginTop: 20,
  },
});

export default FilePickerComponent;

Notable details:

• DocumentPicker.pick({ type: [...] }) returns a promise that resolves to the selected file object
• DocumentPicker.types.allFiles allows any file type; you can restrict to images, pdf, plainText, etc.
• DocumentPicker.isCancel(err) distinguishes a user dismissal from a real error — always check this before logging an unexpected error
• The result object exposes file.name and file.size (in bytes), plus file.uri and file.type

Chapter 3: Enhancing UI with react-native-elements

react-native-elements is a cross-platform UI toolkit that ships pre-styled Button, Card, Icon, Text, Input, and more — all consistent across iOS and Android. It relies on react-native-vector-icons for icon rendering.

Step 1 — Install both packages

npm install react-native-elements
npm install react-native-vector-icons

Step 2 — Create UIComponent.js

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { Button, Card, Icon, Text } from 'react-native-elements';

const UIComponent = () => {
  return (
    <View style={styles.container}>
      <Card>
        <Card.Title>React Native Elements</Card.Title>
        <Card.Divider />
        <Text style={styles.text}>
          This is a card with some text and a button.
        </Text>
        <Button
          icon={<Icon name="code" color="#ffffff" />}
          buttonStyle={styles.button}
          title="BUTTON"
        />
      </Card>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    marginBottom: 10,
  },
  button: {
    backgroundColor: '#03A9F4',
  },
});

export default UIComponent;

What each imported piece does:

Chapter 4: Combining All Components in App.js

With each feature isolated in its own file, App.js composes them inside a ScrollView so the screen remains scrollable on smaller devices.

import React from 'react';
import { StyleSheet, ScrollView, View } from 'react-native';
import ImageComponent from './ImageComponent';
import FilePickerComponent from './FilePickerComponent';
import UIComponent from './UIComponent';

export default function App() {
  return (
    <ScrollView contentContainerStyle={styles.container}>
      <ImageComponent />
      <FilePickerComponent />
      <UIComponent />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16,
  },
});

flexGrow: 1 on contentContainerStyle (not style) ensures the inner content stretches to fill the viewport even when there isn't enough content to scroll — a common gotcha when using ScrollView as a layout wrapper.

flowchart TD
    A[App.js\nScrollView] --> B[ImageComponent\nreact-native-fast-image]
    A --> C[FilePickerComponent\nreact-native-document-picker]
    A --> D[UIComponent\nreact-native-elements]
    B --> B1[FastImage\ncached remote image]
    C --> C1[DocumentPicker.pick\nnative file browser]
    C1 --> C2[file.name + file.size\ndisplayed on screen]
    D --> D1[Card + Button + Icon\nconsistent cross-platform UI]

🧪 Try It Yourself

Task: Extend FilePickerComponent so that after a file is picked, its URI is displayed alongside the name and size — and if the user picks a second file, the display updates to show only the latest pick.

Success criterion: After picking a file you should see three lines of text:

• Name: <filename>
• Size: <bytes> bytes
• URI: <file-uri>

Picking a second file replaces all three lines with the new file's details.

Starter snippet:

{file && (
  <View style={styles.fileInfo}>
    <Text>Name: {file.name}</Text>
    <Text>Size: {file.size} bytes</Text>
    <Text>URI: {file.uri}</Text>
  </View>
)}

Replace the existing {file && <Text>...} block in FilePickerComponent.js with the snippet above, add a fileInfo style entry, and verify the output in your simulator.

🔍 Checkpoint Quiz

Q1. What is the purpose of FastImage.priority.high compared to FastImage.priority.normal?

A) It increases the rendered image resolution
B) It moves the image's download request to the front of the queue
C) It disables the cache for that image
D) It forces the image to reload on every render

Q2. Given this code, what is logged when the user dismisses the picker without selecting a file?

try {
  const result = await DocumentPicker.pick({
    type: [DocumentPicker.types.allFiles],
  });
  setFile(result);
} catch (err) {
  if (DocumentPicker.isCancel(err)) {
    console.log('User cancelled the picker');
  } else {
    console.log('Unknown error:', err);
  }
}

A) Nothing — dismissal does not throw
B) 'Unknown error:' followed by the error object
C) 'User cancelled the picker'
D) The component crashes because result is undefined

Q3. What is the role of react-native-vector-icons in the react-native-elements setup, and what happens if you skip installing it?

A) It provides the theme engine; skipping it causes all text to render with no styling
B) It provides icon fonts; skipping it causes <Icon> components to render nothing or throw
C) It provides layout utilities; skipping it breaks Card.Divider
D) It is optional and only needed for custom themes

Q4. You want to restrict DocumentPicker.pick so users can only select PDF files. Which change is correct?

A) type: [DocumentPicker.types.pdf]
B) filter: 'pdf'
C) accept: '.pdf'
D) mimeType: ['application/pdf']

A1. B — priority.high moves the download to the front of react-native-fast-image's internal request queue, useful for above-the-fold hero images. It does not affect resolution or caching behaviour.

A2. C — Dismissing the native picker throws a cancellation error. DocumentPicker.isCancel(err) returns true for that error, so the 'User cancelled the picker' branch executes.

A3. B — react-native-elements delegates icon rendering to react-native-vector-icons. Without it, any component that uses <Icon> will fail to render the icon, either silently or with a missing-font error depending on the platform.

A4. A — DocumentPicker.types.pdf is the correct named constant. The library uses its own type constants rather than raw MIME strings or file extensions in the standard API.

🪞 Recap

• react-native-fast-image wraps remote images with priority queuing and disk caching via source.uri, source.priority, and resizeMode.
• react-native-document-picker opens the native file browser with DocumentPicker.pick({ type: [...] }) and exposes name, size, uri, and type on the result.
• Always check DocumentPicker.isCancel(err) in the catch block to distinguish user dismissal from a real error.
• react-native-elements requires react-native-vector-icons as a peer dependency and provides ready-made Card, Button, Icon, Text, and more.
• Compose feature components inside a ScrollView with flexGrow: 1 on contentContainerStyle to keep layouts scrollable and full-height.

📚 Further Reading

• react-native-fast-image GitHub — the source of truth on priority levels, cache control, and preloading
• react-native-document-picker GitHub — full type constants list and multi-file selection API
• React Native Elements docs — component API reference and theming guide
• react-native-vector-icons directory — browse all available icon sets before picking one for production
• ⬅️ Previous: Introduction to Redux
• ➡️ Next: REST APIs