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
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
BorderBottomStyle is not working in the React native and as well as styled-components. BorderStyle is working fine. But BorderBottomStyle-dashed is not working and getting Component Exception.
<LocationText>BORDERBOTTOMSTYLE</LocationText>
LocationText = styled.Text`
margin-left:2%;
font-family:metropolisRegular;
font-size:20px;
padding-left:2px;
border-bottom-color:rgba(0,0,0,0.3);
border-bottom-width:2px;
border-bottom-style:dashed;
`;
https://i.stack.imgur.com/GzzUU.png
Any Better idea to style only the border Bottom with dashed in React native??
In react-native, you can't style many components directly as this is not necessary. Often times the better approach is to put the component inside a container and then style the container.
If you're a beginner, then how you attach the styles to the "View" is something you can google and not important, but this is an example of just showing the one style attached inline.
<View style={{ border-bottom-style: "dashed"}}>
<LocationText>BORDERBOTTOMSTYLE</LocationText>
</View>
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've just switch from react-native-maps-osmdroid to react-native-mapbox-gl and havn't succeed to change pitch yet.
I've tried to set pitch in differents ways :
- directly on MapView component
- on Camera component with props "pitch" and "followPitch"
- on Camera component with props "defaultSettings"
- with ref on Camera and call this.camera.setCamera()
However none of this ways seems to work, the only way that I succeed to change pitch is from the app with three fingers.
<MapboxGL.MapView style={{ flex: 1 }}>
<MapboxGL.Camera
followPitch={15}
zoomLevel={16}
followUserLocation
/>
<MapboxGL.UserLocation />
</MapboxGL.MapView>
No error message whatever the way I change pitch but map don't change.
Someone know how to programatically change pitch?
Looks like set followUserLocation to true overide others settings (like centerCoordinates, pitch, heading).
I probably need to handle Camera movement by myself to follow user with pitch.
Let me know if you find another solution.
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.