{"pageContext":{"isCreatedByStatefulCreatePages":false,"pkg":{"name":"react-native-image-picker","codeHtml":"import React from 'react'\nimport {\n AppRegistry,\n Image,\n PixelRatio,\n StyleSheet,\n Text,\n TouchableOpacity,\n View,\n} from 'react-native'\nimport ImagePicker from 'react-native-image-picker'\n\nexport default class App extends React.Component {\n state = {\n avatarSource: null,\n videoSource: null,\n }\n\n constructor(props) {\n super(props)\n\n this.selectPhotoTapped = this.selectPhotoTapped.bind(this)\n this.selectVideoTapped = this.selectVideoTapped.bind(this)\n }\n\n selectPhotoTapped() {\n const options = {\n quality: 1.0,\n maxWidth: 500,\n maxHeight: 500,\n storageOptions: {\n skipBackup: true,\n },\n }\n\n ImagePicker.showImagePicker(options, response => {\n console.log('Response = ', response)\n\n if (response.didCancel) {\n console.log('User cancelled photo picker')\n } else if (response.error) {\n console.log('ImagePicker Error: ', response.error)\n } else if (response.customButton) {\n console.log('User tapped custom button: ', response.customButton)\n } else {\n const source = { uri: response.uri }\n\n this.setState({\n avatarSource: source,\n })\n }\n })\n }\n\n selectVideoTapped() {\n const options = {\n title: 'Video Picker',\n takePhotoButtonTitle: 'Take Video...',\n mediaType: 'video',\n videoQuality: 'medium',\n }\n\n ImagePicker.showImagePicker(options, response => {\n console.log('Response = ', response)\n\n if (response.didCancel) {\n console.log('User cancelled video picker')\n } else if (response.error) {\n console.log('ImagePicker Error: ', response.error)\n } else if (response.customButton) {\n console.log('User tapped custom button: ', response.customButton)\n } else {\n this.setState({\n videoSource: response.uri,\n })\n }\n })\n }\n\n render() {\n return (\n <View style={styles.container}>\n <TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>\n <View\n style={[\n styles.avatar,\n styles.avatarContainer,\n { marginBottom: 20 },\n ]}\n >\n {this.state.avatarSource === null ? (\n <Text>Select a Photo</Text>\n ) : (\n <Image style={styles.avatar} source={this.state.avatarSource} />\n )}\n </View>\n </TouchableOpacity>\n\n <TouchableOpacity onPress={this.selectVideoTapped.bind(this)}>\n <View style={[styles.avatar, styles.avatarContainer]}>\n <Text>Select a Video</Text>\n </View>\n </TouchableOpacity>\n\n {this.state.videoSource && (\n <Text style={{ margin: 8, textAlign: 'center' }}>\n {this.state.videoSource}\n </Text>\n )}\n </View>\n )\n }\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n backgroundColor: '#F5FCFF',\n },\n avatarContainer: {\n borderColor: '#9B9B9B',\n borderWidth: 1 / PixelRatio.get(),\n justifyContent: 'center',\n alignItems: 'center',\n },\n avatar: {\n borderRadius: 75,\n width: 150,\n height: 150,\n },\n})\n","exampleFilesJSON":"{\"path\":\"\",\"name\":\"react-native-image-picker\",\"children\":[{\"path\":\"App.js\",\"name\":\"App.js\",\"extension\":\".js\",\"size\":3401,\"isFile\":true,\"codeHtml\":\"import React from 'react'\\nimport {\\n AppRegistry,\\n Image,\\n PixelRatio,\\n StyleSheet,\\n Text,\\n TouchableOpacity,\\n View,\\n} from 'react-native'\\nimport ImagePicker from 'react-native-image-picker'\\n\\nexport default class App extends React.Component {\\n state = {\\n avatarSource: null,\\n videoSource: null,\\n }\\n\\n constructor(props) {\\n super(props)\\n\\n this.selectPhotoTapped = this.selectPhotoTapped.bind(this)\\n this.selectVideoTapped = this.selectVideoTapped.bind(this)\\n }\\n\\n selectPhotoTapped() {\\n const options = {\\n quality: 1.0,\\n maxWidth: 500,\\n maxHeight: 500,\\n storageOptions: {\\n skipBackup: true,\\n },\\n }\\n\\n ImagePicker.showImagePicker(options, response => {\\n console.log('Response = ', response)\\n\\n if (response.didCancel) {\\n console.log('User cancelled photo picker')\\n } else if (response.error) {\\n console.log('ImagePicker Error: ', response.error)\\n } else if (response.customButton) {\\n console.log('User tapped custom button: ', response.customButton)\\n } else {\\n const source = { uri: response.uri }\\n\\n this.setState({\\n avatarSource: source,\\n })\\n }\\n })\\n }\\n\\n selectVideoTapped() {\\n const options = {\\n title: 'Video Picker',\\n takePhotoButtonTitle: 'Take Video...',\\n mediaType: 'video',\\n videoQuality: 'medium',\\n }\\n\\n ImagePicker.showImagePicker(options, response => {\\n console.log('Response = ', response)\\n\\n if (response.didCancel) {\\n console.log('User cancelled video picker')\\n } else if (response.error) {\\n console.log('ImagePicker Error: ', response.error)\\n } else if (response.customButton) {\\n console.log('User tapped custom button: ', response.customButton)\\n } else {\\n this.setState({\\n videoSource: response.uri,\\n })\\n }\\n })\\n }\\n\\n render() {\\n return (\\n <View style={styles.container}>\\n <TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>\\n <View\\n style={[\\n styles.avatar,\\n styles.avatarContainer,\\n { marginBottom: 20 },\\n ]}\\n >\\n {this.state.avatarSource === null ? (\\n <Text>Select a Photo</Text>\\n ) : (\\n <Image style={styles.avatar} source={this.state.avatarSource} />\\n )}\\n </View>\\n </TouchableOpacity>\\n\\n <TouchableOpacity onPress={this.selectVideoTapped.bind(this)}>\\n <View style={[styles.avatar, styles.avatarContainer]}>\\n <Text>Select a Video</Text>\\n </View>\\n </TouchableOpacity>\\n\\n {this.state.videoSource && (\\n <Text style={{ margin: 8, textAlign: 'center' }}>\\n {this.state.videoSource}\\n </Text>\\n )}\\n </View>\\n )\\n }\\n}\\n\\nconst styles = StyleSheet.create({\\n container: {\\n flex: 1,\\n justifyContent: 'center',\\n alignItems: 'center',\\n backgroundColor: '#F5FCFF',\\n },\\n avatarContainer: {\\n borderColor: '#9B9B9B',\\n borderWidth: 1 / PixelRatio.get(),\\n justifyContent: 'center',\\n alignItems: 'center',\\n },\\n avatar: {\\n borderRadius: 75,\\n width: 150,\\n height: 150,\\n },\\n})\\n\"}],\"isFile\":false,\"size\":3401}","gallery":[{"src":"https://raw.githubusercontent.com/react-community/react-native-image-picker/master/images/android-image.png","width":542,"height":453},{"src":"https://raw.githubusercontent.com/react-community/react-native-image-picker/master/images/ios-image.png","width":750,"height":403}]}}}