Attempting to run JS driven animation on animated node that has been moved to "native" earlier by starting an animation with `useNativeDriver: true`

[oldschoolstarsman66]

I am trying to implement the same appBar bottom variant as in https://www.react-native-material.com/docs/components/app-bar#bottom-app-bar and I am getting the following error: Attempting to run JS driven animation on animated node that has been moved to "native" earlier by starting an animation with useNativeDriver: true I cannot find any solution to this problem online. Any help would be appreciated.

Here is my App component import { AppBar, IconButton, FAB } from "@react-native-material/core"; import Icon from "@expo/vector-icons/MaterialCommunityIcons";

export default function App() {
  return (
    <>
      <AppBar
        variant="bottom"
        color="white"
        leading={(props) => (
          <IconButton
            icon={(props) => <Icon name="menu" {...props} />}
            {...props}
          />
        )}
        trailing={(props) => (
          <IconButton
            icon={(props) => <Icon name="magnify" {...props} />}
            {...props}
          />
        )}
        style={{ position: "absolute", start: 0, end: 0, bottom: 0 }}
      >
        <FAB
          color="black"
          icon={(props) => <Icon name="plus" {...props} />}
          style={{ position: "absolute", top: -28, alignSelf: "center" }}
        />
      </AppBar>
    </>
  );
}

[migfabio]

I have the same issue here

[oldschoolstarsman66]

damn, my issue was gone a moment and is now back. it seems to happen with the Fab button. i ended up creating my own Fab button :)

[szchiki]

Looks like there's a useEffect call in the FAB component which creates a non-native animation.

Changing animation to useNativeDriver:true solves the issue for me.

This PR could help other users get more control: #55