CODEWITHSUNDEEP
reactjsreact-nativeexpocarouselreact-native-snap-carousel
Subhamay Nath
Subhamay Nath

Reputation: 11

react-native-sap-carousel not working(Invariant Violation)

I don't know why it is not working

whenever I add carousel to the return section, it is showing a error that ViewProptypes is removed
I'm getting the following error:

ERROR  Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.
 ERROR  Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.

here is the code :

import React, { useContext, useState } from "react";
import {
  Dimensions,
  Text,
  View,
  StyleSheet,
  TouchableOpacity,
} from "react-native";
import { NewsContext } from '../API/context'
import SingleNews from "../components/SingleNews";
import Carousel from "react-native-snap-carousel";



const NewsScreen = () => {
  const {
    news: { articles }
  } = useContext(NewsContext);

  const [activeIndex, setActiveIndex] = useState();

  const windowHeight = Dimensions.get("window").height;

 
  return (
    <View style={styles.carousel}>
      {articles && (
        <Carousel
          layout={"stack"}
          data={articles.slice(0, 10)}
          sliderHeight={300}
          itemHeight={windowHeight}
          vertical={true}
          renderItem={({ item, index }) => (
            <SingleNews item={item} index={index} />
          )}
          onSnapToItem={(index) => setActiveIndex(index)}
        />
      )}
    </View>
  );
};
export default NewsScreen;

const styles = StyleSheet.create({
  carousel: {
    flex: 1,
    backgroundColor: "black",
  },
  text:{
    color: "white",
    fontSize: 20,
  }
});

package.json devDependencies:

  "dependencies": {
    "@expo/vector-icons": "^13.0.0",
    "@types/react-native-snap-carousel": "^3.8.5",
    "axios": "^0.27.2",
    "expo": "~46.0.9",
    "expo-status-bar": "~1.4.0",
    "react": "18.0.0",
    "react-native": "0.69.5",
    "react-native-pager-view": "5.4.24",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-tab-view": "^3.1.1"
  }

Someone please help me out!! Also I didn't find any other reason of this error

Upvotes: 1

Views: 1316

Answers (1)

Ovidiu Cristescu
Ovidiu Cristescu

Reputation: 1053

react-native-snap-carousel is quite deprecated and has lots of issues. You should try the react-native-reanimated-carousel which is the way to go nowadays. It solves all the issues that react-native-snap-carousel has and it uses react-native-reanimated for better performance (by running animations on the UI thread, rather than on JS thread)

Upvotes: 1

Related Questions