using lottie.js gives error TypeError: Attempted to assign to readonly property

Question

i have created a loader animation i have install lottie.js and then i download loader.json file and then i created component ActivityIndicatior like this

import React from "react";
import LottieView from "lottie-react-native";

function ActivityIndicator({ visible = false }) {
  if (!visible) return null;

  return (
    <LottieView autoPlay loop source={require("../animation/loader.json")} />
  );
}

export default ActivityIndicator;

and then i import this in listing screen and i define it const [loading, setLoading] = useState(false);

export default function ListingsScreens({ navigation }) {
  const [listings, setListing] = useState([]);
  const [error, setError] = useState(false);
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    loadListings();
  }, []);
  const loadListings = async () => {
    setLoading(true);
    const response = await listingApi.getListings();
    setLoading(false);

    if (!response.ok) return setError(true);

    setError(false);

    setListing(response.data);
  };
  return (
    <ExpoScreen style={styles.screen}>
      {error && (
        <>
          <AppText> Could not retrieve the listings</AppText>
          <Button title="retry" onPress={loadListings} />
        </>
      )}
      <ActivityIndicator visible={true} />
      {/* <FlatList
        data={listings}
        keyExtractor={(listings) => listings.id.toString()}
        renderItem={({ item }) => (
          <CardList
            title={item.title}
            subtitle={"$" + item.price}
            imageUrl={item.images[0].url}
            onPress={() => navigation.navigate("ListingDetails", item)}
          />
        )}
      /> */}
    </ExpoScreen>
  );
}

Answer 1

Restarting your server resolves the error. I also had this same issue.

Answer 2

Make sure you are using the latest version of the lottie-react-native. Upgrading to 3.4.0 fixed this for me.