how to scale image manually?

[kunalailani]

hey admin, Thanks for this awesome Component. I want to scale image through sliding but not able to scale, i have set the transform property.

Code

<Gestures key={i} maxScale={6} styles={{ position: 'absolute', top: 10, left: 0, zIndex: 2, transform: [{scale: this.state.addScale}] }} > <Image source={{uri: image.path}} style={{ width: 60, height: 60 }} /> </Gestures>

and this is how i added slider

<Slider minimumValue={1} maximumValue={6} {...this.props} onValueChange={(value) => this.setState({addScale: value})} />

Please help me to achieve this. Thank You.

[DaBs]

Hi @kunalailani, if only scaling and not responding to pan and drag events are in your interest, I think using this module is overkill. Otherwise, you'd have to be a little more specific in how your issue pertains to this module for people to help you.

[kunalailani]

Hi @DaBs Thanks for your reply. Sorry for any inconvenience caused. No not only scaling, i want the existing functionality(working as expected) but with one additional thing to scale the image through slider. Let me rephrase my problem. I've one slider in which i'm updating state of addScale variable on its onValueChange event, and setting its value in transform property of gesture but when i slide the image is not scaling.

[DaBs]

Hm, but you are also scaling it with touches? If so, we'd need to provide functionality to override the pinchStyles somehow. If not, you could simply disable scaling on the gestures component by setting scalable to false.

[kunalailani]

Yes, I've already tried by setting scalable property to false but not working.

[jburich]

Is this something you still need? I think the issue I put in #11 would need the exact same solution of providing a way to merge with pinchStyles. I'm going to start looking at adding that right now.

At first glance I think I'm going to add a scale and rotation prop and merging those into the pinchStyle prop so that somebody doesn't accidentally overwrite other values held inside pinchStyle.