react-native-suno-scanner

React Native Suno Scanner

Installation

npm install react-native-suno-scanner

Usage

import { useEffect, useRef, useState } from 'react';
import { Button, StyleSheet, View } from 'react-native';
import {
  CameraType,
  SunoCamera,
  SunoCameraModule,
  TorchMode,
  type SunoCameraRef,
} from 'react-native-suno-scanner';

export default function App() {
  const cameraRef = useRef<SunoCameraRef>(null);
  const [permissionState, setPermissionState] =
    useState<string>('not-determined');

  useEffect(() => {
    initilize();
  }, []);

  const initilize = async () => {
    const permission = SunoCameraModule.getCameraPermissionStatus();
    if (permission !== 'authorized') {
      const result = await SunoCameraModule.requestCameraPermission();
      setPermissionState(result);
    } else {
      setPermissionState(permission);
    }
  };
  const setOnFlash = () => {
    cameraRef.current?.changeTorchMode(TorchMode.ON);
  };
  const setOffFlash = () => {
    cameraRef.current?.changeTorchMode(TorchMode.OFF);
  };
  const scan = () => {
    cameraRef.current?.startBarcodeScanner();
  };
  const requestPermission = async () => {
    const result = await SunoCameraModule.requestCameraPermission();
    setPermissionState(result);
  };
  const onReadCode = (code: string) => {
    console.log('onReadCode =>', code);
  };
  return (
    <View style={styles.container}>
      <View style={styles.row}>
        <Button title="Bật flash" onPress={setOnFlash} />
        <Button title="Tắt flash" onPress={setOffFlash} />
        <Button title="Scan barcode" onPress={scan} />
      </View>
      {permissionState === 'authorized' && (
        <SunoCamera
          hybridRef={{
            f: (ref) => {
              cameraRef.current = ref;
            },
          }}
          cameraType={CameraType.BACK}
          torchMode={TorchMode.OFF}
          onReadCode={{ f: onReadCode }}
          style={styles.camera}
        />
      )}
      {permissionState !== 'authorized' && (
        <Button title="Request permission" onPress={requestPermission} />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
  },
  row: {
    flexDirection: 'row',
    gap: 16,
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 16,
  },
  camera: {
    flex: 1,
  },
});

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library