---
# System prepended metadata

title: React Native Notes for KGIB project
tags: [react native notes]

---

# React Native Notes for KGIB project
###### tags: `react native notes`
>MAIB uses react native to implement app version by packing the angular code into react native webview.
## [Getting Start](https://dev.azure.com/cdfh-app/MAIB-Dev/_wiki/wikis/MAIB.wiki/61/Getting-Started)
+ Familiar with React.js, React Native
+ Install Android Studio

## [Life Cycle:](https://zh-hant.reactjs.org/docs/react-component.html)
### Class Component
:::warning
:bulb:MAIB uses class component, however, functional component is more appreciated by recent react developers.
:::

+ If component first add into DOM
```javascript=
constructor(){
    //init your component here
    //do not setState here!!
}
render()
componentDidMount(){
   //do things after the component add to the DOM tree 
}
```
+ If props or state values change
```javascript=
componentDidUpdate(){
   //do things after the component add to the DOM tree 
}
```

### Functional Component
> using useEffect hook to implement lifecycles
#### useEffect
```javascript=
useEffect(()=>{
    //componentdidmount
    return ()=>{
    //componentwillUnmount  
    }
},[dependencies/* to implement componentdidUpdate*/])
```

## React Native Code Scanner
>github: [react-native-code-scanner](https://github.com/moaazsidat/react-native-qrcode-scanner#readme)
:::warning
:warning: Since RNCamera had been deprecated, this plugin use [Vision Camera](https://mrousavy.com/react-native-vision-camera/) to implement camera functions.
:::
### Brief Intro
 
:bulb:This plugin use [**FrameProcessor**](https://mrousavy.com/react-native-vision-camera/docs/guides/frame-processors/) which process every frame the camera sees.


### **0. Problems while setting up**
- [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation)
 
    - babel.config.js: 
        ![](https://i.imgur.com/mFHVl0r.png)
        
        
        1. any other plugin should be added **above** the "react-native-reanimated/plugin"
            
        3. Put it in **root of the project**, and **run build bundle script in the same dir**, if there are nested structure in the project, you could use babelrc.json to overwrite the configurations.
        
        - index.tsx / main.tsx
        ![](https://i.imgur.com/Mh4kuyq.png)
        - building gradle 
        if can't find **react-native-reanimated-XX.aac**, run **npm install react-native-reanimated@latest** to update the dependency.

### **1. Usage**
+ **request permission**: request to access camera permission
```javascript!=
const newCameraPermission = await Camera.requestCameraPermission()
const newMicrophonePermission = await Camera.requestMicrophonePermission()
```
+ **get permission**: get access camera permssion status
```javascript!=
const cameraPermission = await Camera.getCameraPermissionStatus()
const microphonePermission = await Camera.getMicrophonePermissionStatus()
```
+ **useScanBarcodes** (functional component): Use hook to get QRCodes array
```javascript=
const [frameProcessor, barcodes] = useScanBarcodes([BarcodeFormat.QR_CODE], {
    checkInverted: true,
  });
```



>#### 小筆記
>:bulb:在內層package.json中"\*"的意思是 "\*\*/\*",而 "/foo" = "foo/\*\*/\*"