MIME Types Utility for React Native

2.5.0 · active · verified Sun Apr 19

react-native-mime-types is a focused utility for identifying and managing MIME (Multipurpose Internet Mail Extensions) types within React Native applications. It provides core functions like `lookup` to determine content types from file extensions or paths, `contentType` to construct full Content-Type headers, and `extension` to find the default file extension for a given MIME type. Unlike the general-purpose `node-mime` library, this package explicitly returns `false` for unknown types instead of providing naive fallbacks, requiring developers to implement their own fallback logic. It operates purely functionally, eschewing `new Mime()` constructors or a `.define()` API for adding custom types; all type definitions are sourced from the comprehensive `mime-db` project. The current stable version is 2.5.0, and it receives updates as needed, often reflecting changes in `mime-db`. Its primary differentiator is its simplicity and explicit behavior regarding unknown types, making it predictable for React Native environments.

Common errors

```
TypeError: mime.define is not a function
```
cause Attempting to use a `.define()` method to add custom MIME types, which this library does not support.

fix This library does not allow runtime definition of MIME types. Rely on `mime-db` for definitions or manage custom types manually.
```
TypeError: Cannot read properties of undefined (reading 'lookup')
```
cause The `mime` object was not imported correctly, or an attempt was made to destructure named exports that do not exist.

fix Ensure the library is imported as a namespace object (ESM: `import * as mime from 'react-native-mime-types';`) or the full module object (CommonJS: `const mime = require('react-native-mime-types');`). All functions are properties of the `mime` object.

Warnings

gotcha Unlike some MIME libraries (e.g., node-mime), `react-native-mime-types` returns `false` for unrecognized or invalid input, rather than providing a default fallback like 'application/octet-stream'. You must explicitly handle `false` returns.
Fix: Implement custom fallback logic: `const type = mime.lookup(path) || 'application/octet-stream';`
gotcha The library does not expose a constructor; do not attempt to use `new mime()` or `new Mime()` patterns. It's a purely functional API.
Fix: All functions are accessed directly from the imported `mime` object (e.g., `mime.lookup()`).
gotcha `react-native-mime-types` does not provide a `.define()` method to add custom MIME types at runtime. All type definitions are based on `mime-db`.
Fix: To add new or custom MIME types, contribute them to the `mime-db` project, or manage a separate, custom mapping within your application code.

Install

npm install react-native-mime-types npm
yarn add react-native-mime-types yarn
pnpm add react-native-mime-types pnpm

Imports

mime
wrong:
```
import mime from 'react-native-mime-types';
```
correct:
```
import * as mime from 'react-native-mime-types';
```
The library exports a namespace object, not a default export. Access functions via `mime.lookup`, `mime.contentType`, etc.

mime

wrong:

const { lookup, contentType } = require('react-native-mime-types');

correct:

const mime = require('react-native-mime-types');

For CommonJS environments, the entire API is exposed as properties of the `mime` object.

mime.lookup

wrong:

import { lookup } from 'react-native-mime-types';
lookup('file.json');

correct:

import * as mime from 'react-native-mime-types';
mime.lookup('file.json');

Functions like `lookup` and `contentType` are properties of the main `mime` object and are not directly named exports.

Quickstart

Demonstrates common MIME type lookups by extension or path, content-type header generation, extension retrieval, and direct map access, including handling unrecognized types.

import * as mime from 'react-native-mime-types';

console.log('--- MIME Type Lookups ---');
console.log('JSON file type:', mime.lookup('json')); // 'application/json'
console.log('Markdown file type:', mime.lookup('.md')); // 'text/x-markdown'
console.log('HTML file type:', mime.lookup('file.html')); // 'text/html'
console.log('JavaScript file type:', mime.lookup('folder/file.js')); // 'application/javascript'
console.log('Unrecognized file type (should be false):', mime.lookup('cats')); // false

console.log('\n--- Content-Type Header Creation ---');
console.log('Markdown content type header:', mime.contentType('markdown')); // 'text/x-markdown; charset=utf-8'
console.log('JSON content type header:', mime.contentType('file.json')); // 'application/json; charset=utf-8'

console.log('\n--- Extension Lookup ---');
console.log('Extension for octet-stream:', mime.extension('application/octet-stream')); // 'bin'

console.log('\n--- Direct Maps ---');
console.log('Type for .txt:', mime.types['txt']); // 'text/plain'
console.log('Extensions for text/html:', mime.extensions['text/html']); // ['html', 'htm']

view raw JSON →