Is there an package, or another way to have a simple, let's say blue to blueish, radial gradient background, for one of the views?
I've tried react-native-radial-gradient, but it seems like it's outdated.
Probably you can use RadialGradient from my react-native-image-filter-kit package. Note that gradients from react-native-image-filter-kit are initially designed as primitives for blending with other images and your case is not something that was taken into account in the first place.
import { Image } from 'react-native'
import {
RadialGradient,
ImageBackgroundPlaceholder
} from 'react-native-image-filter-kit'
const imageStyle = { width: 320, height: 320 }
const gradient = (
<RadialGradient
colors={['red', '#00ff00', 'blue']}
stops={[0, 0.5, 1]}
image={
<ImageBackgroundPlaceholder style={imageStyle}>
/* your content here */
</ImageBackgroundPlaceholder>
}
/>
)
Related
I kind of new using animation, im using react native reanimated to create some animations, but i really dont understand how interpolate works, the input range, output range, the animation that i want its inside a scrollview, each item should has its own Animated.View, so the first one will be 100% width and the rest will be like 20%, i want to create this design:
for now my code is this:
const animatedWidth = useAnimatedStyle(() => {
const width_ = interpolate(
cardWidth,
[0,1, 2],
[4, 4, 5],
);
return {
width: width_,
};
});
return (
<>
<Animated.ScrollView horizontal = {true}>
{
extras.map((extra) => {
return (
<>
<Animated.View style = {[{height: 220, margin: 5}, animatedWidth]}>
<ImageBackground
source = {require("../assets/images/hawai.jpeg")}
style = {{width: "100%", height: "100%"}}
imageStyle = {{borderRadius: 30
}}>
[![</Animated.View][2]][2]>
)}
}
<Animated.ScrollView>
)
and this is the result:
i can scroll and it "works" and i want to make it work like the first design, the first full width and the others 20% width, but i really dont understand the interpol and the inputRange to make them appears, if someone knows and can explain to me in simple works really greateful, searched for videos and documentation but like i said still dont understand, thanks :)
Hy everyone, I'm building a react native applications but I'm facing a issue for long time which is that the app design is different in iOS devices. The devices work iPhone 6-iphone 8 design is same and iPhone X - iPhone 13 is same. But these both groups are different in design.
When you say they are different in design, do you mean their device dimensions? If so, there are some workarounds for that issue. Personally, I would recommend creating scale functions for the width and height of the device you use to develop your app. Applying the scale functions will keep your design consistent throughout different devices.
import {Dimensions, PixelRatio} from 'react-native';
const {width: SCREEN_WIDTH, height: SCREEN_HEIGHT} = Dimensions.get('window');
// based on iphone 11s's scale
const scalew = SCREEN_WIDTH / 828;
const scaleh = SCREEN_HEIGHT / 1792;
export function normalizeh(size) {
const newSize = size * scaleh;
return Math.round(PixelRatio.roundToNearestPixel(newSize));
}
export function normalizew(size) {
const newSize = size * scalew;
return Math.round(PixelRatio.roundToNearestPixel(newSize));
}
Then when styling,
menuBtn: {
width: normalizew(60),
color: '#212529',
marginRight: normalizew(30),
},
I am trying to have a repeating-linear-gradient for my view in React Native. However i couldn't find any information or library that would help me use it.
I found a library named react-native-linear-gradient but it seems to be helpful to only have simple linear gradient.
Thanks for your help in advance
CSS
background: repeating-linear-gradient(
-55deg,
#222,
#222 10px,
#333 10px,
#333 20px
);
In React, styles are specified with an object wherein the key is the camelCase version of the style name, and the value is the style’s value. If the value is not explicitly typeof 'number', the entire value must be a single string. Within that string, normal css style names can be used.
Here is an example:
<ExampleComponent
style={{
background: 'repeating-linear-gradient(-55deg, #222, #222 10px,#333 10px, #333 20px)',
backgroundSize: 'cover',
}}
/>
I have used react-native-linear-gradient for my splash screen
fist I have set 4 different colors and make it a gradient with white color.
const gradient1 = [Colors.secondary1Color, Colors.white];
const gradient2 = [Colors.primary1Color, Colors.white];
const gradient3 = [Colors.secondaryColor, Colors.white];
const gradient4 = [Colors.primaryColor, Colors.white];
I first set this.state = {changeGradient: true}
then I have this changeGradient function which changes the const gradient colors ever had a second
changeGradient = async () => {
console.log("changeGradient", await this.state.gradient);
if (this.state.changeGradient) {
setTimeout(async () => {
await this.setState(({ gradient }) => ({ gradient: gradient === gradient1 ? gradient2 : gradient === gradient2 ? gradient3 : gradient === gradient3 ? gradient4 : gradient1 }));
this.changeGradient();
}, 500);
}
};
Then, I render in the Lineargradient component
<LinearGradient colors={this.state.gradient} style={styles.container}>
</LinearGradient >
You're good to go!!!
Hope this helps you!
I'm trying to create an animated "parallax" image in React-Native. I have a static background image and two individual images as an overlay. The goal is to create something similar to the image found on this website http://www.digitalhands.net/ or https://www.galaxia.co/. Where do I even start with this? Initially I'd be happy with it moving just on itself from left to right and etc. Afterwards I want to make it so that it would use the gyroscope to get the x and y values for animating the image.
A parallax effect consists of images moving in different speeds and in the same direction, such that the 'closer' an object is, the faster it moves, which creates the illusion of three dimensions.
To achieve this effect in react-native, you can use the Animated library to interpolate the position of one image as a fraction of the position of another.
For the sake of an example, let's assume you want the parallax effect in the vertical direction, and that all images are positioned at 0 vertically.
First, you would need an animated value in your component's state:
this.state = {
...
imagePos: new Animated.Value(0)
}
Then, for each Image style you can add a transform on its y axis:
<Animated.Image src={...} style={[firstImageStyle, {
transform: [{translateY: this.state.imagePos.interpolate({
inputRange: [0, 1],
outputRange: [0, 100]
})}]
}]}
<Animated.Image src={...} style={[secondImageStyle, {
transform: [{translateY: this.state.imagePos.interpolate({
inputRange: [0, 1],
outputRange: [0, 50]
})}]
}]}
Note the use of Animated.Image instead of Image to make the image animatable.
This would cause the first image to move horizontally between 0-100 dp when imagePos has values between 0 and 1, and the second image to move between 0-50 dp.
To change the value of the animated value you can use any of the functions in the Animated library (timing, spring, decay, etc.) or you can attach it to some native event.
The animated library documentation has much more detail.
As for the use of the gyroscope, I haven't gone into the details, but you can probably use react-native-sensors or react-native-motion-manager to get the values you need, and attach them to the animation.
By using a package like https://github.com/react-native-sensors/react-native-sensors I managed to get the x, y, z values of the phones position and animate an image with it.
constructor() {
super();
this.state = {
x: 0,
y: 0,
z: 0,
};
}
componentWillMount() {
// Normal RxJS functions
accelerationObservable
.subscribe(({x, y, z}) => this.setState({
x: x,
y: y,
z: z,
}));
}
render() { return (
<Image style={{left: this.state.x + this.state.y, top: this.state.z}}
source={require('image.png')}/>
)
}
I have an app written initially for iPhone 6 symulator which has a componend syled with following example values:
const styles = StyleSheet.create({
headerNav: {
width: 40,
height: 40
},
headerLogoImage: {
width: 140,
height: 140
},
footerNavText: {
padding: 15,
fontSize: 25
}
});
Unfortunately when I launched the app on iPad symulator, the size proportions completely collapsed. I know that there is something like PixelRation but documentation is very limited and unclear.
Any idea / suggestions how can I translate these width / height / padding & fontSize to proper values using this PixelRatio class?
fontSize needs to be divided by PixelRatio.getFontScale(). This will account for different screen densities in iOS and Android.
footerNavText: {
fontSize: 25 / PixelRatio.getFontScale()
}
https://facebook.github.io/react-native/docs/pixelratio.html
You could do something like:
footerNavText: {
padding: PixelRatio.get()*3,
fontSize: PixelRatio.get()*4
}
Check what get() method returns for each of the devices you wish to use and style accordingly.
For more info visit https://facebook.github.io/react-native/docs/pixelratio.html
// create this utils.ts file
import { PixelRatio } from "react-native";
// dp(123) converts 123px (px as in your mockup design) to dp.
export const dp = (px: number) => {
return px / PixelRatio.get();
};
// sp(54) converts 54px (px as in your mockup design) to sp
export const sp = (px: number) => {
return px / (PixelRatio.getFontScale() * PixelRatio.get());
};
Use it like the following way in your styles
const styles = StyleSheet.create({
footerNavText: {
padding: dp(123),
fontSize: sp(54)
}
})
Note
Do not use dp for fontSize. dp just depends on device screen density (dpi)
sp is used for fontSize only. sp is also just like dp but the difference is that it also depends on user's font settings in his device along with the device screen density (dpi).