I am using react-native-image-picker library to capture image code as follow:
launchImageLibrary({
includeExtra: false,
mediaType: "photo",
selectionLimit: 0,
quality: 1,
maxWidth: 1000,
maxHeight: 1500
}, (res)=>{
console.log(res);
});
When I am taking capture using android real device(portrait) getting image with following:
{
uri: "string",
height: 1000,
width: 750
}
Expected and correct response:
{
uri: "string",
height: 750,
width: 1000
}
can someone help me out?
I advice you to use react-native-image-crop-picker library.
The code below works for me. You can use it without cropping if you do not need it.
import ImagePicker from 'react-native-image-crop-picker';
ImagePicker.openCamera({
width: 768,
height: 1024,
cropping: false,
}).then(image => {
console.log(image)
})
Looks like we have same aspect ratio 3/4. So I guess it may help you.
On android, i have the same problem on cropping the photo. The width are inverted by the height on the new photo cropped.
I fix the problem by removing the original width and height.
(But for Ios, the original width and height are important)
import ImagePicker from 'react-native-image-crop-picker' try {
ImagePicker.openCropper({
path: uri,
// width:2048,
// height: 4096,
includeExif: true,
hideBottomControls: true,
waitAnimationEnd: false,
cropperChooseText: 'ok',
cropperCancelText: 'Cancel',
}).then(async image => {
callback(image.path)
})
Related
Has anyone faced similar issues where the camera image gets rotated by 90 degrees after being captured using expo-image-picker package ?
Below is my code
let result = await launchImageLibraryAsync({
mediaTypes: MediaTypeOptions.Images,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
})
console.log(result)
if (result.cancelled === false) {
setCurrentImage(result)
}
}
const takePicture = async () => {
const result = await launchCameraAsync({
allowsEditing: false,
aspect: [4, 3],
})
console.log(result)
if (result.cancelled === false) {
setCurrentImage(result)
}
}```
You can check the response that you get after take the picture and if the rotation is 90 you can use react-native-image-resizer to change it, maybe you only have this problem on Android or ios too?
Issue has been resolved by rebuilding my app after I install ImageManipulator
I'm trying to upload small files using react-native-image-crop-picker it's working fine but when I tried uploading large video/image file using react-native-image-crop-picker I'm getting Network error.
Note : Backend is working fine I'm able to upload file using Postman.
It's happening with large files only. I'm able to upload files that are smaller than 1MB
Code
import ImagePicker from 'react-native-image-crop-picker';
import axios from "axios";
function uploadFile(){
ImagePicker.openCamera({
mediaType: 'any',
}).then(file=> {
const body = new FormData();
body.append('vurl', {
name: file.fileName,
type: file.mime,
uri: Platform.OS === 'ios' ? file.path.replace('file://', '') : file.path,
});
axios({
method:"post",
url:"Server url",
data:body,
headers: {
Accept: 'application/json',
'Content-Type': "multipart/form-data",
}
})
.then((res) => {
console.log(JSON.stringify(res));
})
.catch((err) => {
console.log(err.response);
});
});
}
//calling here
<TouchableOpacity onPress={uploadFile}>
<Text>upload file</Text>
<TouchableOpacity>
Please check that you have set or not client_max_body_size in your backend for the server.
For Nginx :- /etc/nginx/proxy.conf
client_max_body_size 100M;
For more: Increasing client_max_body_size in Nginx conf on AWS Elastic Beanstalk
Make sure that you don't have a default timeout defined in the code like:
.defaults.timeout = x
https://www.npmjs.com/package/react-native-axios#config-defaults
I produced my suggestions by following directly from react-native-image-crop-picker example app repo here:
Set max height and width of what you're recording on camera. Example :
ImagePicker.openCamera({
mediaType: 'any',
cropping: cropping,
width: 500,
height: 500,
}).then(file=> {
Compressing the quality of an image that you are picking
ImagePicker.openPicker({
mediaType: 'any',
compressImageMaxWidth: 1000,
compressImageMaxHeight: 1000,
compressImageQuality: 1, ----> you can set the value between 0 and 1 e.g. 0.6.
})
.then(file=> {.....
Set a max size should not exceed e.g. 1MB (whatever number you want) when you get the response before handling it further. Again I obtained file.size in the response section of the link above
ImagePicker.openCamera({
mediaType: 'any',
}).then(file=> {
if (file.size > xxx) {
Alert.alert('File size too large!')
//dont forget to import alert from react-native
}
I am using react-native ImageEditor for image cropping as follows,
ImageEditor.cropImage(imageUri,
{
offset: { x: 0, y: 0 },
size: { width: response.width, height: response.height },
displaySize: { width: 50, height: 50 },
resizeMode: 'contain',
},
(uri) => { resolve(uri); console.log('resolved uri', resolve(uri));},
(error) => {console.log('error', error)},
);
but encountered with following error,
ExifInterface only supports saving attributes on JPEG formats.
This is happening with both JPEG and PNG images.
I am using "react-native": "0.54.2"
Not sure whether it is problem with react-native or android.
Any help is appreciated.
I have a problem with Animated.event with interpolate on scroll event. When I use Animated.event with
useNativeDriver: true
I receive next error:
Style property 'height' is not supported by native animated module
If I use opacity property - it works fine.
My code:
render() {
this.yOffset = new Animated.Value(0);
let event = Animated.event([
{
nativeEvent: {
contentOffset: {
y: this.yOffset
}
}
}
], {useNativeDriver: true});
let opacity = this.yOffset.interpolate({
inputRange: [0, 120],
outputRange: [1, 0],
});
let height = this.yOffset.interpolate({
inputRange: [0, 180],
outputRange: [200, 100],
});
return (
<View>
<Header
style={{
opacity,
height
}}
/>
<ScrollView
style={[
{
flexDirection: "column"
}
]}
scrollEventThrottle={1}
onScroll={event}
>
// some content
</ScrollView>
</View>
);
}
opacity - works.
height - didn't works.
Without useNativeDriver: true - all works fine.
Android Accelerated_x86 API 23
RN 0.43.0-rc.4
React 16.0.0-alpha.3
Problem exists also in RN 0.42.
As the React Native documentation says, you can only animate non-layout properties. Transform property is supported so you can use transform.scaleY instead of changing the height.
Not everything you can do with Animated is currently supported in
Native Animated. The main limitation is that you can only animate
non-layout properties, things like transform, opacity and
backgroundColor will work but flexbox and position properties won't.
Using Native Driver for Animated
This error comes from validateTransform function inside React Native lib.You can check the TRANSFORM_WHITELIST in NativeAnimatedHelper for the property supported by animated module.
Currently, there are these props supported
const TRANSFORM_WHITELIST = {
translateX: true,
translateY: true,
scale: true,
scaleX: true,
scaleY: true,
rotate: true,
rotateX: true,
rotateY: true,
rotateZ: true,
perspective: true,
};
'height' is not in TRANSFORM_WHITELIST; scaleY is.
Just change:
useNativeDriver: true
to
useNativeDriver: false
You can use another property, using gesture handler, there area a example on react-native-gesture handler with PanGestureHandler API:
<Animated.View style={{bottom: 0, transform: [{ translateY: this._translateY },] }}>...
<PanGestureHandler>...
<Animated.View>...
<View >....
Running RN v0.40.0 on a Physical device on Android 5.1. I'm trying to animate a text to appear with fade-in and slide up in the following way:
export default class Example extends PureComponent {
constructor(props) {
super(props);
this.translate = new Animated.Value(-15);
this.fade = new Animated.Value(0);
}
componentWillReceiveProps() {
setTimeout(() => {
Animated.timing(this.translate, {
toValue: 0,
duration: 800,
easing: Easing.inOut(Easing.ease),
}).start();
Animated.timing(this.fade, {
toValue: 1,
duration: 800,
easing: Easing.inOut(Easing.ease),
}
).start();
}, 150);
}
render() {
return (
<View>
<Animated.View
style={{
transform: [
{translateY: this.translate},
],
opacity: this.fade
}}
>
<Text>
{this.props.text}
</Text>
</Animated.View>
</View>
);
}
And after I reload JS bundle from the dev menu and go to that view app crashes with no error log, sometimes showing Application ... stopped working, sometimes not. If I start the app from the android menu again it loads ok, crashes only for the first time. It definitely has something to do with animations since before I introduced animations I had no crashes. There are no logs, no clues, please, give me some advice what could that be and what should I try and what should I check. Thanks.
Btw, on that view with animations I have a pretty heavy background image (~400k) could that be a problem?
UPD: I have narrowed it down to that it crashes when I'm trying to run animations in parallel, either with setTimeout or with Animation.parallel. What could be the problem?
Not sure what's causing the crash, but using Animated.parallel has worked for me:
Animated.parallel([
Animated.spring(
this.state.pan, {
...SPRING_CONFIG,
overshootClamping: true,
easing: Easing.linear,
toValue: {x: direction, y: -200}
}),
Animated.timing(
this.state.fadeAnim, {
toValue: 1,
easing: Easing.linear,
duration: 750,
}),
]).start();
where SPRING_CONFIG is something like
var SPRING_CONFIG = {bounciness: 0, speed: .5};//{tension: 2, friction: 3, velocity: 3};
and pan and fadeAnim values are set in the constructor this.state values as:
pan: new Animated.ValueXY(),
fadeAnim: new Animated.Value(0),
with the animated View as
<Animated.View style={this.getStyle()}>
<Text style={[styles.text, {color: this.state.textColor}]}>{this.state.theText}</Text>
</Animated.View>
and the getStyle function is
getStyle() {
return [
game_styles.word_container,
{opacity: this.state.fadeAnim},
{transform: this.state.pan.getTranslateTransform()}
];
}
This tutorial helped me set this up...good luck!