# @hashiprobr/expo-use-scanner

> A React Hook for simplifying the barcode scanning features of expo-camera

Latest version **1.0.12** (published 2022-07-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install @hashiprobr/expo-use-scanner
pnpm add @hashiprobr/expo-use-scanner
yarn add @hashiprobr/expo-use-scanner
bun add @hashiprobr/expo-use-scanner
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.12 |
| Published | 2022-07-24 |
| First published | 2022-01-11 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Marcelo Hashimoto |
| Maintainers | hashiprobr |
| Keywords | JavaScript, React, React Hook, React Native, Expo, Camera, expo-camera |

## Links

- npm: https://www.npmjs.com/package/@hashiprobr/expo-use-scanner
- Repository: https://github.com/hashiprobr/expo-use-scanner
- Homepage: https://github.com/hashiprobr/expo-use-scanner#readme
- Issues: https://github.com/hashiprobr/expo-use-scanner/issues
- npm.io page: https://npm.io/package/@hashiprobr/expo-use-scanner

## Recent versions

- 1.0.12 (latest) — 2022-07-24
- 1.0.11 — 2022-05-08
- 1.0.10 — 2022-01-19
- 1.0.9 — 2022-01-13
- 1.0.8 — 2022-01-13
- 1.0.7 — 2022-01-13
- 1.0.6 — 2022-01-12
- 1.0.5 — 2022-01-12
- 1.0.4 — 2022-01-12
- 1.0.3 — 2022-01-12
- 1.0.2 — 2022-01-12
- 1.0.1 — 2022-01-11
- 1.0.0 — 2022-01-11

## README

expo-use-scanner
================

**A React Hook for simplifying the barcode scanning features of
[expo-camera](https://docs.expo.dev/versions/latest/sdk/camera/)**

This hook returns an object and an component.

The object has two properties:

* a boolean state `active`;

* an asynchronous method `activate`, that asks for permission to access the
  camera, sets the aforementioned state to `true` if it is granted, and throws
  an error otherwise;

* a synchronous method `deactivate`, that sets the aforementioned state to
  `false`.

The component is a [modified
version](https://www.npmjs.com/package/@hashiprobr/expo-camera) of
[expo-camera](https://docs.expo.dev/versions/latest/sdk/camera/).


Peer dependencies
-----------------

``` json
{
    "@hashiprobr/expo-camera": "1.0.9",
    "expo": "45.0.0",
    "react": "17.0.2",
    "react-native": "0.68.2"
}
```


Install
-------

With npm:

```
npm install @hashiprobr/expo-use-scanner
```

With yarn:

```
yarn add @hashiprobr/expo-use-scanner
```

With expo:

```
expo install @hashiprobr/expo-use-scanner
```


Example
-------

``` js
import React, { useState } from 'react';

import { View, Text, Button } from 'react-native';

import useScanner from '@hashiprobr/expo-use-scanner';

export default function MyComponent() {
    const [data, setData] = useState(null);

    const [scanner, Preview] = useScanner();

    async function onPressScan() {
        try {
            await scanner.activate();
        } catch (error) {
            console.error(error);
        }
    }

    function onPressCancel() {
        scanner.deactivate();
    }

    function onBarCodeScanned(result) {
        setData(result.data);
        scanner.deactivate();
    }

    return (
        <View
            style={{
                flexGrow: 1,
                justifyContent: 'center',
                alignItems: 'center',
            }}
        >
            {scanner.active ? (
                <Preview
                    style={{
                        flexGrow: 1,
                        alignSelf: 'stretch',
                        justifyContent: 'flex-end',
                    }}
                    onBarCodeScanned={onBarCodeScanned}
                >
                    <Button title="cancel" onPress={onPressCancel} />
                </Preview>
            ) : (
                <>
                    {data && (
                        <Text>{data}</Text>
                    )}
                    <Button title="scan" onPress={onPressScan} />
                </>
            )}
        </View>
    );
}
```

---
_Source: https://npm.io/package/@hashiprobr/expo-use-scanner · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._