bsimagepicker
v2.0.1
Published
## Getting started
Downloads
55
Maintainers
Readme
BSImagePicker
Getting started
$ npm install bsimagepicker --save
Mostly automatic installation
$ react-native link bsimagepicker
Windows
- In Visual Studio add the
RNBsImagePicker.sln
innode_modules/react-native-bs-image-picker/windows/RNBsImagePicker.sln
folder to their solution, reference from their app. - Open up your
MainPage.cs
app
- Add
using Bs.Image.Picker.RNBsImagePicker;
to the usings at the top of the file - Add
new RNBsImagePickerPackage()
to theList<IReactPackage>
returned by thePackages
method
Your JS File
import RNBImagePicker, {PickerSheet, Button} from 'bsimagepicker';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
visible: false,
imgSource: null
}
}
onCancel() {
console.log("CANCEL")
this.setState({visible:false});
}
onOpen() {
console.log("OPEN")
this.setState({visible:true});
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.onOpen.bind(this)}>
<View style={styles.instructions}>
<Text>Pick Image</Text>
</View>
</TouchableOpacity>
<PickerSheet visible={this.state.visible} onCancel={this.onCancel.bind(this)}>
<Button onPress={()=>{
this.onCancel();
setTimeout(() => {
RNBImagePicker.openPhotos()
.then((response) => {
console.log(response);
this.setState({
imgSource:response
})
})
},300);
}}>Choose From Photos</Button>
<Button onPress={()=>{
this.onCancel();
setTimeout(() => {
RNBImagePicker.takePhoto()
.then((response) => {
console.log(response);
this.setState({
imgSource:response
})
})
},300);
}}>Take Photo</Button>
<Button onPress={()=>{
this.onCancel();
}}>Cancel</Button>
</PickerSheet>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
position: 'absolute',
width: '100%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
bottom: 0
},
instructions: {
flex: 1,
marginTop: 20,
marginBottom: 20,
},
});