0

I was just creating an Inbox page in React Native function and added react native material, when I just tried to use Floating Action Button from react native material for Add button, throws the below error.

Error: Attempting to run JS driven animation on animated node that has been moved to "native" earlier by starting an animation with useNativeDriver: true, js engine: hermes

I don't know how to resolve this error. I'm sure that the error comes only after adding FAB.

Click here! to see the screenshot of the error.

Appreciate any help. Thanks!

Component File:

import { Avatar, Box, FAB, Icon, Stack, Text } from "@react-native-material/core";
import { useState } from "react";
import {  Modal } from "react-native";
import React from 'react';

const Inbox = ({ navigation }) => {



    const [modalOpen, setModalOpen] = useState(false)

    const handlePress = () => {
        setModalOpen(!modalOpen)
    }

    return (

        <>
                <Modal visible={modalOpen} animationType="slide">
                    <Text>Compose Mail</Text>
                    <Stack fill justify="start" items="center" mt={20}>
                        <FAB icon={props => <Icon name="close" {...props} />} color="primary" onPress={handlePress} />
                    </Stack>
                </Modal>
                

            <Stack fill justify="start" items="center" mt={20}>
                <FAB icon={props => <Icon name="plus" {...props} />} color="primary" onPress={handlePress} />
            </Stack>

        </>
    );
}

package.json

{
  "name": "my-app",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-native-material/core": "^1.3.7",
    "@react-navigation/drawer": "^6.6.3",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/native-stack": "^6.9.13",
    "expo": "~48.0.18",
    "expo-status-bar": "~1.4.4",
    "native-base": "^3.4.28",
    "react": "18.2.0",
    "react-native": "0.71.8",
    "react-native-gesture-handler": "~2.9.0",
    "react-native-reanimated": "~2.14.4"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}
Hasan
  • 9
  • 2

1 Answers1

0

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. soruce

Another way is update the dependency to latest version which will solve this issue.

Harsh Patel
  • 688
  • 2
  • 5
  • 16
  • Can you please tell me, Where do I need to change `useNativeDriver:true`? And React Native material package is up to date... – Hasan Jun 29 '23 at 13:44
  • Please check this [answer](https://stackoverflow.com/a/61117885/13632102) – Harsh Patel Jun 29 '23 at 15:46
  • Yes, I already saw that answer. I don't know where to the animation config to change useNativeDriver:true – Hasan Jul 03 '23 at 05:04