femotizo / react-native-view-finder

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

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

$ npm install react-native-view-finder
# OR
$ yarn add react-native-view-finder

Usage

import {View, StyleSheet} from 'react-native'
import ViewFinder from 'react-native-view-finder'

const Example = () => (
  <View style={styles.container}>
    <ViewFinder backgroundColor="#333" loading />
  </View>
)

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.

License

Licensed under the MIT License.