Is there a way to conditionally render components without a forceful animation?

Issue

A way to get around react rendering method?

i.e When a new component is conditionally rendered, the components below move further down to accommodate the new entry, but the animation feels forceful, as opposed to something like Transform: translateY etc.

e.g Home.js

return (
<View>

   <View>
      <Text>Render Something </Text>
   </View>

   { showmore ? <Tasks /> : null}


   <TouchableOpacity>
        <Text> Button </Text>
   </TouchableOpacity>


   </View>
)

Tasks.js

return(
  <View> 
     <Text> render some  more things </Text>
     <Text> render some  more things </Text>
     <Text> render some  more things </Text>
     <Text> render some  more things </Text>
     <Text> render some  more things </Text>
</View> 

)

In the above code, on "Showmore is truthy", Touchableopacity is forced down to accommodate the tasks, i understand the need to rerender the layout, as that space was precviously assigned to = null. But i need it a lot more fluid than it is.

I have tried tried hard coded values like:

 { showmore ? <Tasks /> : <View style ={{marginVertical: 50}} />}

which provides better entry for the Tasks without the "forceful" need to push down components below as the space was already accounted for (but bad practise i am guessing)

-- I also tried onLayout in <Tasks> to perhaps transform : translateY the position of components below, from the derived height of height but the output of the has been rendered before i could even get the value to work within Home.js.

I am lost as to another alternative to work around this. Any suggestions???

Solution

I found a straightforward approach using the Layout Animation API that handles all use cases I have tried thus far.

import { 
   Animated,
   Easing, 
   withTiming, 
   useSharedValue, 
   useAnimatedStyle 
   }  from 'react-native-reanimated';

  const translateYValue = useSharedValue(0);

  useEffect(() => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
    translateYValue.value = withTiming(50, {
      duration: 100,
      easing: Easing.ease,
    });

  }, [showmore])

Add all states that you would typically like to cause a change to the layout of the screen in the dependencies of the useEffect.

Answered By - abic17