I'm new to React Native. Could someone point me in the right direction here? I'm trying to accomplish the following: given some image, I want to slice it up so that each slice can be touched individually, and the slice is saved as an image.
Original image
Slices
That is one image. Each square is a <View> with <Image source={IMAGE} style={{ resizeMode:'stretch' width:origImageWidth, height:origImageHeight, top:CALC_ME, left:CALC_ME }}/> but each image is offset to make a part of it show.
Related
I want modify the contrast, sharpness, etc. of images. I am testing that with react-native-color-matrix-image-filters which seems to work fine. But I am not sure how to save the resulting images to the camera roll or how to get the base64 result. The following code will convert the original image to a greyscale image. How can I save the result?
import {
Grayscale,
Sepia,
Tint,
ColorMatrix,
concatColorMatrices,
invert,
contrast,
saturate
} from 'react-native-color-matrix-image-filters'
<View>
<Grayscale>
<Image style={styles.imgstyle}
source={{
uri: sourceImage,
}}
/>
</Grayscale>
</View>
These module doesn't support save images (see here), you can use a combination of this module or react-native-image-filter-kit (for filters) and https://github.com/gre/react-native-view-shot to be able to download the image from your app
I am using react-native-photo-view-ex library to zoom in and out the images. After zooming the image I am getting scale size from onScale callback function.After than I saved this picture and when I want to open saved image again for re-edit with same scale size as I saved the image displayed very small.I adjust minZoom = 0.5 and maxZoom = 10.
This code works perfectly in android and when open images for re-edit in android image displayed on accurate position with given scale. Also I have implemented this feature with gesture handler and ScrollView Zoomable but get same results. Can anyone help me?
<PhotoView
source={{uri: selectedData.url}}
scale={imageScale}
minimumZoomScale={0.5}
maximumZoomScale={10}
onScale={e => {
setImage(e.nativeEvent.scale);
}}
onLoad={() => setImageScale(selectedData.scale, false)}
style={
styles.resizeImageWrapper
}
/>
I want to use this code :
background: linear-gradient(306.57deg, #8C25DE 29.82%, #F36BFF 115.65%);
in react native with <LinearGradient />
how can i handle this ?
You could get close to the design by using the following configuration.
<LinearGradient
useAngle={true}
angle={306.57}
locations={[.29, 1.15]}
colors={['#F36BFF', '#8C25DE']}>
<Text style={{padding: 20}}></Text>
</LinearGradient>
useAngle and angle allows you to set the angle(in deg in Figma).
colors define the two colors. You can use more colors if needed.
location defines where each of the colors are in the gradient stops. This should be the same values that are defined in the percentages in the Figma CSS.
You can have a play around with the final output here: https://snack.expo.io/#nipuna777/gradients
I would like to retrieve an image from an url, and insert it inside a View adapting the size to the container.
This is an expo where I tried to do it.
https://snack.expo.io/Hk1rsfaHU
How you can see there are 3 columns having the same width(flex 1), in the first there is the image.
I wish this Image was contained inside the View, adapting the width to the container and maintaining the correct aspect ratio.
Any suggestions?
You need to change src to source in your <Image />:
<Image source={{uri: 'https://i2.wp.com/www.xpeppers.com/wp-content/uploads/2016/06/react-native-preview.png?resize=580%2C357'}}
resizeMode='contain' style={styles.image}
/>
Output:
Working Demo:
https://snack.expo.io/SJdlzQTr8
I want to display a loader image till my image is loaded to the react-native Image. Back is an image which is stored locally and it has been imported to the screen.
This code gives me a blank screen for 'Back' image. When I set the source as source={Back} it works. But the following doesn't work. What am I doing wrong here?
<View style={styles.imageWrapper}>
<NonClickableImage
source={this.state.loaded ? Back : {uri: detailedMovement.image}}
resizeMode="stretch"
width={width - 20}
height={200}
onLoad={() => this._onMovementImageLoaded()}
/>
</View>
I think your logic needs to be:
{!this.state.loaded ? Back : {uri: detailedMovement.image}}
Because you want to show the Back icon when the state is NOT loaded. Currently, if the state is loaded, then you display Back.