@@ -77,6 +77,72 @@ test('animate marginLeft layout prop', () => {
7777 ) ;
7878} ) ;
7979
80+ // A layout animation on one view must not push the other views of the
81+ // surface through a shadow tree commit: their non-layout props keep taking
82+ // the direct path to the mounted views.
83+ test ( 'non-layout props stay on the direct path while another view animates layout' , ( ) => {
84+ const movingRef = createRef < HostInstance > ( ) ;
85+
86+ let _translateX ;
87+ let _translateXAnimation ;
88+ let _siblingHeight ;
89+ let _siblingHeightAnimation ;
90+
91+ function MyApp ( ) {
92+ const translateX = useAnimatedValue ( 0 ) ;
93+ const siblingHeight = useAnimatedValue ( 10 ) ;
94+ _translateX = translateX ;
95+ _siblingHeight = siblingHeight ;
96+ return (
97+ < View collapsable = { false } >
98+ < Animated . View
99+ ref = { movingRef }
100+ style = { { width : 100 , height : 100 , transform : [ { translateX} ] } }
101+ />
102+ < Animated . View style = { { width : 100 , height : siblingHeight } } />
103+ </ View >
104+ ) ;
105+ }
106+
107+ const root = Fantom . createRoot ( ) ;
108+
109+ Fantom . runTask ( ( ) => {
110+ root . render ( < MyApp /> ) ;
111+ } ) ;
112+
113+ Fantom . runTask ( ( ) => {
114+ _translateXAnimation = Animated . timing ( _translateX , {
115+ toValue : 100 ,
116+ duration : 200 ,
117+ useNativeDriver : true ,
118+ } ) . start ( ) ;
119+ _siblingHeightAnimation = Animated . timing ( _siblingHeight , {
120+ toValue : 110 ,
121+ duration : 200 ,
122+ useNativeDriver : true ,
123+ } ) . start ( ) ;
124+ } ) ;
125+
126+ Fantom . unstable_produceFramesForDuration ( 100 ) ;
127+
128+ // The sibling's height went through a commit; the transform did not.
129+ expect ( root . getRenderedOutput ( { props : [ 'height' ] } ) . toJSX ( ) ) . toEqual (
130+ < rn-view >
131+ < rn-view key = { 0 } height = "100" />
132+ < rn-view key = { 1 } height = "60" />
133+ </ rn-view > ,
134+ ) ;
135+ expect (
136+ Fantom . unstable_getDirectManipulationProps ( nullthrows ( movingRef . current ) )
137+ . transform ,
138+ ) . toEqual ( [ { translateX : 50 } ] ) ;
139+
140+ Fantom . runTask ( ( ) => {
141+ _translateXAnimation ?. stop ( ) ;
142+ _siblingHeightAnimation ?. stop ( ) ;
143+ } ) ;
144+ } ) ;
145+
80146test ( 'animated opacity' , ( ) => {
81147 let _opacity ;
82148 let _opacityAnimation ;
0 commit comments