https://github.com/tiaanduplessis/react-native-view-finder

A flexible little View Finder component to be used in conjunction with react-native-camera
https://github.com/tiaanduplessis/react-native-view-finder

camera component react react-native viewfinder

Last synced: 9 months ago
JSON representation

A flexible little View Finder component to be used in conjunction with react-native-camera

• Host: GitHub
• URL: https://github.com/tiaanduplessis/react-native-view-finder
• Owner: tiaanduplessis
• License: mit
• Created: 2017-10-19T12:06:12.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2020-10-31T07:50:41.000Z (over 5 years ago)
• Last Synced: 2025-09-30T21:55:54.542Z (9 months ago)
• Topics: camera, component, react, react-native, viewfinder
• Language: JavaScript
• Size: 83 KB
• Stars: 6
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          

react-native-view-finder



  A flexible little View Finder component to be used in conjunction with react-native-camera








  

    

  

  

  

  

  

    

  

  

    

     

    

  

  

  

    

  

  

    

  

  

    

  








  

    

  

  

    

  

  

    

  








  Built with ❤︎ by tiaanduplessis and contributors



Table of Contents


  Table of Contents

  
Install

  
Usage

  
Contribute

  
License


## Install

```sh

$ npm install react-native-view-finder

# OR

$ yarn add react-native-view-finder

```

## Usage

```jsx

import {View, StyleSheet} from 'react-native'

import ViewFinder from 'react-native-view-finder'

const Example = () => (

  

    

  

)

const styles = StyleSheet.create({

  container: { flex: 1 }

})

```

This will result in:



  



## Props

Prop | Description | Type | Defualt

------ | ------ | ------ | ------

**`containerStyle`** | Array Container Styles | Array |  **`{}`**

**`backgroundColor`** | String for Background color of View Finder. | String | **`transparent`**

**`color`** | String for Color of the View finder edges | String | **`#FFF`**

**`height`** | Number for Height of View Finder | Number | **`200`**

**`width`** | Number for Width of View Finder | Number | **`200`**

**`borderWidth`** | Number for Border with of View Finder edges | Number | **`3`**

**`borderRadius`** | Number for Border Radius of View Finder edges | Number | **`0`**

**`borderLength `** | Number for Border length of View Finder edges | Number | **`25`**

**`loading`** | Bool for the indicate if loading indicator should be shown | Bool | **`false`**

**`loadingColor`** | String for Color of the loading indicator | String | **`#FFF`**

**`loadingBelowVF`** | Bool for the indicate if loading indicator should be shown under View Finder | Bool | **`false`**

## Contributing

Contributions are welcome!

1. Fork it.

2. Create your feature branch: `git checkout -b my-new-feature`

3. Commit your changes: `git commit -am 'Add some feature'`

4. Push to the branch: `git push origin my-new-feature`

5. Submit a pull request :D

Or open up [a issue](https://github.com/tiaanduplessis/react-native-view-finder/issues).

## License

Licensed under the MIT License.