I have an element(red) in the center of Screen and is able for drag and drop. I make it only move Vertical. I want when move/drag the element down of up, get h (new position - default/first position).
How can find h?
onPanResponderMove:
Animated.event([
null,
{
dx: pan.x,
dy: pan.y,
},
],{useNativeDriver: false}),
onPanResponderRelease: () => {
Animated.spring(
pan, // Auto-multiplexed
{ toValue: { x: 0, y: 0 }, useNativeDriver: false } // Back to zero
).start();
},
});
I try this but the element isn't able to drag/move.
onPanResponderMove: (event, gestureState) => {
alert(gestureState.dy)
Animated.event([
null,
{
dx: pan.x,
dy: pan.y,
},
],{useNativeDriver: false})
},
Related
I have this piece of code:
onPanResponderRelease: (e, gesture) => {
if (gesture.dy > 155) {
Animated.spring(
this.state.panBottomModal,
{
toValue: { x: 0, y: 0 },
useNativeDriver: false
},
).stop();
} else {
Animated.spring(
this.state.panBottomModal,
{
toValue: { x: 0, y: 0 },
useNativeDriver: false
},
).start();
}
},
as you can see, I want the bottom sheet to be completely hidden once it exceeds gesture.dy > 155. It doesnt hide, instead it just stays at the bottom.
Can someone help on this?
I'm trying to animate some components on scroll, using
const scrollY = useRef(new Animated.Value(0)).current; for tracking the value.
This code below works:
<Animated.ScrollView
onScroll={Animated.event(
[
{
nativeEvent: {
contentOffset: {
y: scrollY,
},
},
},
],
{
useNativeDriver: false,
}
)}
></Animated.ScrollView>;
But I want to be able to extract Animated.event function within the onScroll prop to its own independent function. This code below doesnt seem to update scrollY:
// My onScroll handler
const handleScroll = ({ nativeEvent }) => {
// Some other code here...
return Animated.event(
[
{
nativeEvent: {
contentOffset: {
y: scrollY,
},
},
},
],
{
useNativeDriver: false,
}
);
};
// Scrollview component
<Animated.ScrollView onScroll={handleScroll}></Animated.ScrollView>;
Not sure if you ever figured it out, but this will work:
const handleScroll =
scrollY && (() => {
console.log('hey');
return Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
useNativeDriver: true,
});
}
)();
I have the following animated.event
Animated.event(
[
null,
{
dx: pan.x,
dy: pan.y,
},
],
{
useNativeDriver: false,
}
)
is there a way to set a condition so that dx is only added to pan.x if the resultant pan.x + width doesnt go out of bound of the parent view?
something like this for example:
Animated.event(
[
null,
{
dx: pan.x + animatedWidth > parentViewX + parentViewWidth ? //dont add : pan.x,
dy: pan.y,
},
],
{
useNativeDriver: false,
}
)
I am not interested in actual code just want to know if there is a way to set a condition to prevent animated.event from mapping a value?
I'm trying to select multiple elements inside the pan component. I seacrhed a lot and now I can get the scrool coordinates, but with this x and y coordinate values I can't understand which one is selected.
HourComponent.js (so simple just one text)
<View
height={35}
marginVertical={8}
width={Dimensions.get("window").width / 3 }
borderRadius={10}
alignItems="center"
justifyContent="center"
bg={this.props.isSelected ? "green" : "#F0F2F6"}
marginHorizontal={6}
>
<Text>{this.props.hourText}</Text>
</View>;
constructor
constructor(props) {
super(props);
const panResponder = PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => true,
onMoveShouldSetPanResponder: (evt, gestureState) => true,
onPanResponderMove: (event, gesture) => {
var witdh = 110;// I find that with console.log ,the component box sizes
var height = 30;
var x = gesture.moveX / witdh;
var y = gesture.moveY / height;
console.log('gesture.moveY', gesture.moveY);
console.log('x: ' + x + ' y: ' + y);
},
});
this.state = {
hours: [
{isSelected: false, hourText: '10:00'},
{isSelected: false, hourText: '10:20'},
{isSelected: false, hourText: '10:40'},
{isSelected: false, hourText: '11:00'},
{isSelected: false, hourText: '11:20'},
{isSelected: false, hourText: '11:40'},
{isSelected: false, hourText: '12:00'},
{isSelected: false, hourText: '12:20'},
{isSelected: false, hourText: '12:40'},
],
panResponder,
};
}
In render section
<Box
flex={1}
mt={20}
alignItems={"flex-start"}
justifyContent={"center"}
flexDirection={"row"}
flexWrap={"wrap"}
flexDirection="row"
>
{this.state.hours.map((hours, index) => {
return (
<View
style={{
backgroundColor: "red",
}}
{...this.state.panResponder.panHandlers}
>
<TouchableOpacity
style={{ backgroundColor: "blue" }}
onPress={() => {
this.hourSelect(hours, index);
}}
>
<HoursComponent
hoursText={hours.hoursText}
isSelected={hours.isSelected}
hours={hours}
/>
</TouchableOpacity>
</View>
);
})}
</Box>;
Render Result
Console logs
My problem is how to get selected component.I can't make it with coordinates .Thank you
I can't get the selected values ,just can get coordiantes
I'm still having this problem
I have an animation in my login screen which is supposed to slide down the buttons when the sign in button is clicked and slide up the email and password input boxes at the same time, i have a duration of 2000 milliseconds but the positions change instantly instead of smoothly sliding.
The Animation is in a functional component, so to stop the animation from reverting back before i click to reverse it so i am using useState() to hold the position.( Previously before i was using useState(), when i changed the text in the input boxes, the animation would reset back to the original position)
Here is the Animation
const [Buttons, setButtons] = useState(200);
const [Input, setInput] = useState(800);
const AnimatedButtons = new Animated.ValueXY({ x: 0, y: Buttons })
const AnimatedInputs = new Animated.ValueXY({ x: 0, y: Input })
const StartAnmation = () => {
setButtons(800);
Animated.timing(
AnimatedButtons, {
toValue: { x: AnimatedButtons.x, y: AnimatedButtons.y },
duration: 2000,
useNativeDriver: true,
}).start()
setInput(-100);
Animated.timing(AnimatedInputs, {
toValue: { x: AnimatedInputs.x, y: AnimatedButtons.y },
duration: 2000,
useNativeDriver: true,
}).start()
}
const ReverseAnimation = () => {
setButtons(200)
Animated.timing(
AnimatedButtons, {
toValue: { x: AnimatedButtons.x, y: AnimatedButtons.y },
duration: 2000,
useNativeDriver: true,
}).start()
setInput(800)
Animated.timing(AnimatedInputs, {
toValue: { x: AnimatedInputs.x, y: AnimatedInputs.y },
duration: 2000,
useNativeDriver: true,
}).start()
}
I have 2 button onPress() that call the animations and have 2 Views which change positions, The positions change alright but i doesnt slide out gradually , just instantly change
Thanks