https://github.com/interfacekit/react-native-image-picker-form
A React Native image picker for tcomb-form-native
https://github.com/interfacekit/react-native-image-picker-form
form image-picker react react-native tcomb-form-native
Last synced: 9 months ago
JSON representation
A React Native image picker for tcomb-form-native
- Host: GitHub
- URL: https://github.com/interfacekit/react-native-image-picker-form
- Owner: InterfaceKit
- License: mit
- Created: 2018-02-08T11:58:22.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T19:12:56.000Z (over 3 years ago)
- Last Synced: 2024-12-30T21:22:39.096Z (over 1 year ago)
- Topics: form, image-picker, react, react-native, tcomb-form-native
- Language: JavaScript
- Size: 19.4 MB
- Stars: 22
- Watchers: 4
- Forks: 7
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-image-picker-form
A React Native component factory to use with [`tcomb-form-native`](https://github.com/gcanti/tcomb-form-native) library. Currently using [`react-native-image-crop-picker`](https://github.com/ivpusic/react-native-image-crop-picker) to provide image selection.
## Getting started
```sh
$ yarn add react-native-image-picker-form
```
After that, follow the instructions on: https://github.com/ivpusic/react-native-image-crop-picker#install
## Usage
When configuring your `tcomb-form-native` form, use the `factory` option to set as `SelectImageFactory`.
You can change the text displayed on ActionSheet or BottomSheet setting a options value or change the title with title option on `config`.
Default locale is `en-US`:
```js
import React from 'react-native'
import t from 'tcomb-form-native'
import ImageFactory from 'react-native-image-picker-form'
const Form = t.form.Form
const DocumentFormStruct = t.struct({
image: t.String
})
type Props = {}
type State = {
value: Object,
options: Object
}
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
value: {},
options: {
fields: {
image: {
config: {
title: 'Select image',
options: ['Open camera', 'Select from gallery', 'Cancel']
// Used on Android to style BottomSheet
style: {
titleFontFamily: 'Roboto'
}
},
error: 'No image provided',
factory: ImageFactory
}
}
}
}
}
render() {
return (
{
this.form = ref
}}
type={DocumentFormStruct}
value={this.state.value}
options={this.state.options}
/>
)
}
}
```
## License
MIT License
Copyright (c) 2018 InterfaceKit
## Author
Antonio Moreno Valls ``
Built with 💛 by [APSL](https://github.com/apsl).