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 :)
Related
enter image description here
Can anyone give idea how I can create this design in React-Native
here is the design image
Your array -
[item1, item2, item3, ....]
Modify it as -
[
{id, type:1, data:[item1, item2, item3] },
{id, type:2, data:[item4, item5, item6] },
{id, type:3, data:[item7, item8, item9] },
{id, type:1, data:[item10, item11, item12] }
{id, type:2, data:[item13, item14, item15] }
...
...
]
Like, Each item will have a type field and array of 3 items..
Use this data inside flatlist or scrollview and you can classify it according to the type(1,2,3) field.
If type == 1
return below component.
If type == 2
return
If type == 3
return
So the final result will look like what you are expecting..!
It's just an idea! Try to implement.
For better performance you can build data in this format before sending from the backend.(if the data is coming as part of any APIs)
data format function
const modifyData = (arr) => {
let finalData = [];
for (let i=0; i < arr.length; i+=3){
let j = 0;
let data = []
while(j<3){
arr[i+j] && data.push(arr[i+j]);
j+=1;
}
finalData.push({id: Math.random().toString(), type: (i/3)%3 + 1, data})
}
return finalData;
}
use some random id generator for id (crypto or Math.random().toString())
I found a similar thread hope this helps
Grid layout with different height items (React Native)
The markup will look like this:
<View style={styles.wrapper}>
<ScrollView contentContainerStyle={styles.container}>
<ListView
contentContainerStyle={styles.list}
dataSource={this.state.dataSourceColumn1}
/>
<ListView
contentContainerStyle={styles.list}
dataSource={this.state.dataSourceColumn2}
/>
<ListView
contentContainerStyle={styles.list}
dataSource={this.state.dataSourceColumn3}
/>
</ScrollView>
</View>
Wrapper View will help you stretch the block to fit the entire area. From the styling point of view you can resolve the task with flexbox:
wrapper: {
flex: 1
},
container: {
flexDirection: 'row',
paddingHorizontal: 5
},
list: {
flex: 1,
flexDirection: 'column',
paddingVertical: 10,
paddingHorizontal: 5
}
The trick is that we treat every column as a row inside the container. Play around with paddings and alignItems styling to achieve consistent spacing.
Note that the handy onEndReached that comes with the ListView won't be available here, so you'll have to catch the user reaching the end of the ScrollView in order to know when new fetch is required. But that's a different question which I believe has already been answered elsewhere.
In case the grid is finite and you don't need to throw more items into it, things are simpler. Just split the data the way described above and use 3 View-s with nested items instead of the ListView-s.
Now you can edit as per your requirements and easily find the way through this.
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!
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>
}
/>
)
im new to react native,i want to a stepIndicator exactly like in above picture.. But rn StepIndicator is not looking good even though i cant increase the seperator height and i cant add some text in middle of steps like payment date etc.., titles also not aligning straight and i can only change colors and width of steps and seperators. So i tried to make customized StepIndicator but im unable to it.
const labels = [{title:"Order Subscribed",},{title:"Payment",},{title:"Dispatched",},{title:"site",}];
const stepIndicatorStyles = {
stepIndicatorSize: 20,
currentStepIndicatorSize:20,
separatorStrokeWidth: 1,
currentStepStrokeWidth: 20,
stepStrokeCurrentColor: '#FFAA01',
separatorFinishedColor: '#aaaaaa',
separatorUnFinishedColor: '#aaaaaa',
stepIndicatorFinishedColor: '#FFAA01',
stepIndicatorUnFinishedColor: '#636363',
stepIndicatorCurrentColor: '#FFAA01',
stepIndicatorLabelFontSize: 0,
currentStepIndicatorLabelFontSize: 0,
stepIndicatorLabelCurrentColor: '#000000',
stepIndicatorLabelFinishedColor: '#FFAA01',
stepIndicatorLabelUnFinishedColor: 'rgba(255,255,255,0.5)',
labelColor: 'black',
labelSize: 18,
currentStepLabelColor: 'black'
}
In class in render() method..
<StepIndicator
customStyles={stepIndicatorStyles}
currentPosition={this.state.currentPosition}
stepCount={4}
direction='vertical'
labels={labels.map(title => title.title)}
/>
Please help me to solve this. Im trying to get achieve this from 2 weeks but failed. Thanks in advance..
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')}/>
)
}