How to start slideInDown from specific point

[yasir-netlinks]

I have a modal-like view, and I want to show a view when button clicked, is it possible to slideInDown from specific point in the view rather than sliding from the Top of the screen. and if not, what's the best way to achieve this, thanx

[kristerkari]

I would also need this feature.

I'm not familiar of the implementation details of this library, but I guess that the main issue is that React Native does not support setting transform-origin yet.

So, in CSS you can do this to change the starting point of the transition, e.g. center:

transform-origin: 50% 50%;

But as that's not available in RN, there would need to be some kind of custom implementation to support any kind of way of using transform-origin that in this library.

People have been requesting the support for React Native, but one of the issues have been that they haven't been able to implemented it in a way that is compatible with the CSS spec.

Some links:

• Closed Github issue (still getting +1 from people): https://github.com/facebook/react-native/issues/1964
• Unfinished implementation pull request of transform-origin: https://github.com/facebook/react-native/pull/2106
• Product Pains (a.k.a Canny) issue: https://react-native.canny.io/feature-requests/p/transforms-transform-origin-support
• Article that talks about implementing transform-origin for React Native: https://commitocracy.com/implementing-foldview-in-react-native-e970011f98b8

/cc @oblador

[keithics]

use transition

	<Animatable.View transition="top"  style={{position:'absolute',top:this.state.resultView || 320>
		<Text>testing</Text>
	</Animatable.View>	

simply change the state onPress event etc..

[nathantqn]

You customize the animation and define it as, for example:

const mySlideInDown = { from: { translateY: 30, }, to: { translateY: 0, }, }

Animatable.initializeRegistryWithDefinitions({ mySlideInDown, })

Then in component use: <Animatable.View iterationCount="infinite" direction="alternate" animation="mySlideInDown" > <View /> </Animatable.View>

[vijay-tiwari-wavemaker]

React Native v0.73 supports Transform Origin. Seems like this issue might get fixed after upgrading to RN v0.73 /cc @oblador