I am utilizing on React Native and Expo go.
This error instantly occurred whereas working as normal with React Native.
I do not bear in mind precisely what step it was, but it surely appears to have began to happen after I created a hook referred to as useProductFetch for useState variables or features declared inside a practical part.
To resolve this downside, I created a brand new challenge folder, moved the information, and reinstalled the dependencies. However I have been getting this error repeatedly, and I have been in search of a technique to repair this for about two days. And to unravel the error “Invariant Violation: “most important” has not been registered”, i checked my “identify” in app.json and package deal.json. there weren’t any issues.
Right here is my codes.
{
"identify": "frontend",
"model": "1.0.0",
"most important": "node_modules/expo/AppEntry.js",
"scripts": {
"begin": "expo begin",
"android": "expo begin --android",
"ios": "expo begin --ios",
"net": "expo begin --web"
},
"dependencies": {
"@expo/vector-icons": "^14.0.0",
"@react-native-async-storage/async-storage": "1.21.0",
"@react-navigation/bottom-tabs": "^6.5.20",
"@react-navigation/native": "^6.1.17",
"@react-navigation/native-stack": "^6.9.26",
"@reduxjs/toolkit": "^2.2.3",
"axios": "^1.6.8",
"expo": "~50.0.14",
"expo-checkbox": "~2.7.0",
"expo-image-picker": "~14.7.1",
"expo-linear-gradient": "~12.7.2",
"expo-location": "~16.5.5",
"expo-media-library": "~15.9.2",
"expo-radio-button": "^1.0.8",
"expo-status-bar": "~1.11.1",
"react": "18.2.0",
"react-native": "0.73.6",
"react-native-gesture-handler": "~2.14.0",
"react-native-modal": "^13.0.1",
"react-native-reanimated": "~3.6.2",
"react-redux": "^9.1.1"
},
"devDependencies": {
"@babel/core": "^7.20.0"
},
"personal": true
}
That is the half the place a customized hook was used within the aforementioned part.
import { useProductFetch } from './useProductFetch';
import { primary_gray } from '../../types/frequent/colours';
import { TouchMenu } from './touch_menu';
import { CreateReview } from './CreateReview';
import { AntDesign } from '@expo/vector-icons';
export const ProductDetail = () => {
const {
currentPage,
currentProduct,
handleHeart,
handleHorizontalScroll,
coronary heart,
isUsers,
token,
consumer,
borderWidths,
handlePress,
activeMenu,
navigation,
} = useProductFetch();
//...
...//
}
And the customized hook code:
export const useProductFetch = () => {
const [heart, setHeart] = useState({});
const { selectedProductId, currentProduct } = useSelector((state) => state.merchandise);
const [isUsers, setIsUsers] = useState(false);
const dispatch = useDispatch();
const navigation = useNavigation();
const { consumer, token } = useSelector((state) => state.userAuth);
const [currentPage, setCurrentPage] = useState(0);
const [activeMenu, setActiveMenu] = useState(0);
const borderWidths = [...Array(3)].map(() => useSharedValue(0));
const { width } = Dimensions.get('window');
const handleHorizontalScroll = (occasion) => {
const contentOffsetX = occasion.nativeEvent.contentOffset.x;
const currentPageIndex = Math.spherical(contentOffsetX / width);
setCurrentPage(currentPageIndex);
};
const fetchDetail = useCallback(() => {
if (selectedProductId) {
attempt {
dispatch(findProduct({ product_id: selectedProductId }));
if (token) {
ProductApi.isUsersProduct(token, selectedProductId).then((response) => {
setIsUsers(response.information);
});
}
} catch (error) {
if (error.response) {
swap (error.response.standing) {
case 400:
case 500:
navigation.navigate('Residence');
}
}
}
}
}, [selectedProductId]);
useEffect(() => {
borderWidths[activeMenu].worth = withTiming(3, { length: 500 });
}, []);
const handlePress = (index) => {
setActiveMenu(index);
borderWidths[index].worth = withTiming(3, { length: 500 });
};
useEffect(() => {
fetchDetail();
}, [fetchDetail]);
useEffect(() => {
if (currentProduct) {
if (token && consumer) {
if (currentProduct.likedBy.size > 0) {
const isLiked = currentProduct.likedBy.some((val) => val.userId === consumer.id);
setHeart((prevHeart) => ({
...prevHeart,
[currentProduct.id]: isLiked,
}));
} else
setHeart((prevHeart) => ({
...prevHeart,
[currentProduct.id]: false,
}));
}
}
}, [currentProduct]);
const handleHeart = () => {
if (token && consumer && currentProduct) {
setHeart((prevState) => ({ ...prevState, [currentProduct.id]: !coronary heart[currentProduct.id] }));
const information = { [currentProduct.id]: !coronary heart[currentProduct.id] };
attempt {
dispatch(updateProductLike({ token, likes: information }));
} catch (error) {
if (error.response) {
swap (error.response.standing) {
case 400:
case 401:
case 500:
navigation.navigate('Residence');
}
}
}
} else {
alert('로그인이 필요합니다');
navigation.navigate('Login');
return;
}
};
return {
currentProduct,
currentPage,
handleHeart,
handleHorizontalScroll,
coronary heart,
isUsers,
handlePress,
borderWidths,
activeMenu,
navigation,
consumer,
token,
};
};
If there aren’t any issues with the above code, I might guess that there could also be a compatibility challenge with the put in dependencies. I have not posted many questions on StackOverflow, so please perceive my awkwardness.
I wish to resolve the issue shortly and deal with coding.