Transition for React Native components?

[athenawisdoms]

Is it possible to use Motion to animate the transitions of react-native components like TextInput and Pressable?

For example, lets say we have a TextInput component and a Pressablecomponent inside a <View className="flex"> container. TextInput has className="flex-grow" so when the Pressable component is hidden, its width will grow if the Pressable is removed/hidden. How can Motion be used to animate this transition?

Tried the following

import { createMotionComponent } from "@legendapp/motion";
import {
  Pressable,
  TextInput,
} from "react-native";

const AnimatedPressable = createMotionComponent(Pressable);
const AnimatedTextInput = createMotionComponent(TextInput);

...

<View className="flex flex-row ....">
  <AnimatedTextInput/>
  <AnimatedPressable className="flex-grow ...">
    <Something />
  </AnimatedPressable>
</View>

but the console is throwing a warning mesesages like:

WARN measure cannot find view with tag #1839

Packages used:

• @legendapp/motion@2.2.0
• nativewind@2.0.11
• tailwindcss@3.2.7
• react-native@0.71.4

Thanks!