We Keep Coding

Invariant Violation: ViewPropTypes has been removed from React Native

Pls anyone help me how to fix this error "ERROR Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'."
i have tried many things like deleting node modules npm install deprecated-react-native-prop-types but nothing works for me how can i fix now
package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#react-native-community/masked-view": "0.1.10",
"#react-navigation/bottom-tabs": "^5.11.10",
"#react-navigation/compat": "^5.3.20",
"#react-navigation/native": "^5.9.4",
"#react-navigation/stack": "^5.14.4",
"deprecated-react-native-prop-types": "^2.3.0",
"expo": "^46.0.0",
"expo-av": "~12.0.4",
"expo-linear-gradient": "~11.4.0",
"expo-status-bar": "~1.4.0",
"haversine": "^1.1.1",
"invariant": "^2.2.4",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-native": "0.69.5",
"react-native-animatable": "^1.3.3",
"react-native-flexi-radio-button": "^0.2.2",
"react-native-fontawesome": "^7.0.0",
"react-native-gesture-handler": "~2.5.0",
"react-native-modal": "^13.0.0",
"react-native-modalize": "^2.0.8",
"react-native-progress-circle": "^2.1.0",
"react-native-reanimated": "~2.9.1",
"react-native-safe-area-context": "4.3.1",
"react-native-screens": "~3.15.0",
"react-native-snap-carousel": "^3.9.1",
"react-native-swiper": "^1.6.0",
"react-native-web": "~0.18.7",
"react-navigation": "^4.4.4",
"rn-sliding-up-panel": "^2.4.5"
},
"devDependencies": {
"#babel/core": "^7.18.6"
},
"private": true
}
babel.config.js
module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: ['react-native-reanimated/plugin'], };

You will need to check all of the downloaded dependencies in the node_modules folder which contains the following import statement.
import { ViewPropTypes } from 'react-native';
Change it imports from deprecated-react-native-prop-types manually.
import { ViewPropTypes } from 'deprecated-react-native-prop-types';

In addition to kiuQ's answer, react-native-progress-circle is most likely the problem here. It has been deprecated, and the ViewPropTypes is a known issue in that package.
Remove it from your project, or simply replace it with https://www.npmjs.com/package/progress-circle-react-native

Invalid Podfile file: "react-native-community/cli" type of error

I am failing to install iOS dependencies using pod install annd after pressing enter button to run pod install.
Node Version: v16.16.0
NPM Version: 8.11.0
Working Process which I followed:
First way to install pod: Firstly install npm then install pod
Second way to install pod: after deleting node_modules then run pod install
Failed to install to follow the both of rules as mentioned before and to check the error, please check the attached file.
The dependencies are install in our projects as given below as package.json file.
{
"name": "shohan",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-async-storage/async-storage": "^1.16.2",
"#react-native-community/blur": "^3.6.0",
"#react-native-community/cli-platform-ios": "^8.0.6",
"#react-native-community/clipboard": "^1.5.1",
"#react-native-community/datetimepicker": "^6.1.2",
"#react-native-masked-view/masked-view": "^0.2.6",
"#react-native-picker/picker": "^2.4.2",
"#react-navigation/bottom-tabs": "^6.2.0",
"#react-navigation/material-top-tabs": "^6.2.1",
"#react-navigation/native": "^6.0.8",
"#react-navigation/native-stack": "^6.5.0",
"#rneui/base": "^0.0.0-edge.2",
"#rneui/themed": "^0.0.0-edge.2",
"#twotalltotems/react-native-otp-input": "^1.3.11",
"axios": "^0.26.1",
"moment": "^2.29.2",
"radio-buttons-react-native": "^1.0.4",
"react": "17.0.2",
"react-hook-form": "^7.28.1",
"react-native": "0.67.3",
"react-native-animatable": "^1.3.3",
"react-native-audio-record": "^0.2.2",
"react-native-bar-chart": "^0.1.0",
"react-native-countdown-component": "^2.7.1",
"react-native-date-picker": "^4.2.0",
"react-native-datepicker": "^1.7.2",
"react-native-dropdown-picker": "^5.3.0",
"react-native-elevation": "^1.0.0",
"react-native-emoji-selector": "^0.2.0",
"react-native-fs": "^2.20.0",
"react-native-image-picker": "^4.8.4",
"react-native-infinite-scrolling": "^2.0.0",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-linear-gradient": "^2.5.6",
"react-native-loading-spinner-overlay": "^3.0.0",
"react-native-pager-view": "^5.4.15",
"react-native-paper": "^4.12.1",
"react-native-picker-select": "^8.0.4",
"react-native-pure-chart": "^0.0.24",
"react-native-render-html": "^6.3.4",
"react-native-safe-area-context": "^4.1.2",
"react-native-screens": "^3.13.1",
"react-native-skeleton-placeholder": "^5.0.0",
"react-native-snap-carousel": "^3.9.1",
"react-native-sound": "^0.11.2",
"react-native-step-indicator": "^1.0.3",
"react-native-super-grid": "^4.4.0",
"react-native-svg": "^12.4.0",
"react-native-swiper-flatlist": "^3.0.16",
"react-native-tab-view": "^3.1.1",
"react-native-text-gradient": "^0.1.7",
"react-native-vector-icons": "^9.1.0",
"react-native-video": "^2.3.1",
"react-native-video-player": "^0.12.0",
"react-native-webview": "^11.18.1",
"react-native-youtube-iframe": "^2.2.2",
"socket.io-client": "^4.5.1"
},
"devDependencies": {
"#babel/core": "^7.17.5",
"#babel/runtime": "^7.17.2",
"#react-native-community/eslint-config": "^3.0.1",
"babel-jest": "^27.5.1",
"eslint": "^8.11.0",
"jest": "^27.5.1",
"metro-react-native-babel-preset": "^0.69.0",
"react-test-renderer": "17.0.2"
},
"jest": {
"preset": "react-native"
}
}
Here is the Podfile's code is given below,
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/#react-native-community/cli-platform-ios/native_modules'
platform :ios, '11.0'
target 'shohan' do
config = use_native_modules!
use_react_native!(
:path => config[:reactNativePath],
# to enable hermes on iOS, change `false` to `true` and then install pods
:hermes_enabled => false
)
target 'shohanTests' do
inherit! :complete
# Pods for testing
end
# Enables Flipper.
#
# Note that if you have use_frameworks! enabled, Flipper will not work and
# you should disable the next line.
use_flipper!()
post_install do |installer|
react_native_post_install(installer)
__apply_Xcode_12_5_M1_post_install_workaround(installer)
end
end
The occurred error is given in the attached file please check it and help me.

Error importing a package that was forked and edited in a Next.JS project

I'm using react-headroom for this project and needed to edit its code so the <header> wouldn't adjust height for pages. Therefore, I forked the original repo and made the change on my version so I could install it in my project using yarn add <my-git-repo-url> and then normally import it as any other library:
// src/components/layout.js
import { useState } from "react"
import { Box, Flex } from "#chakra-ui/react"
import Footer from "../footer"
import Header from "../header"
import Headroom from "react-headroom" // react-headroom imported here
(...)
However, I'm getting this error telling me that module was not found:
I'm not sure if there's any mistake with this process (I think not) but was unable to fix this. I ran yarn install in both ./ and ./node_modules/react-headroom with no changes at all for this result.
As #novonimo asked, here it is the module's package.json:
{
"name": "react-headroom",
"description": "Hide your header until you need it. React.js port of headroom.js",
"version": "3.2.0",
"author": "Kyle Mathews <mathews.kyle#gmail.com>",
"bugs": {
"url": "https://github.com/KyleAMathews/react-headroom/issues"
},
"dependencies": {
"prop-types": "^15.5.8",
"raf": "^3.3.0",
"shallowequal": "^1.1.0"
},
"devDependencies": {
"babel-cli": "^6.16.0",
"babel-core": "^6.17.0",
"babel-eslint": "^7.0.0",
"babel-loader": "^6.2.5",
"babel-plugin-transform-undefined-to-void": "^6.8.0",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-1": "^6.16.0",
"chai": "^3.5.0",
"eslint": "^3.8.0",
"eslint-config-airbnb": "^12.0.0",
"eslint-config-airbnb-base": "^9.0.0",
"eslint-config-prettier": "^6.13.0",
"eslint-plugin-import": "^2.0.1",
"eslint-plugin-jsx-a11y": "^2.2.3",
"eslint-plugin-react": "^6.4.1",
"mocha": "^3.1.2",
"mocha-unfunk-reporter": "^0.4.0",
"pre-commit": "^1.0.5",
"prettier": "2.1.2"
},
"directories": {
"example": "examples"
},
"homepage": "https://github.com/KyleAMathews/react-headroom",
"keywords": [
"headroom",
"react",
"react-component"
],
"license": "MIT",
"main": "dist/index.js",
"peerDependencies": {
"react": "^16.3.0 || ^17"
},
"repository": {
"type": "git",
"url": "https://github.com/KyleAMathews/react-headroom.git"
},
"scripts": {
"build": "babel --copy-files src --out-dir dist",
"test-watch": "NODE_ENV=test node_modules/.bin/mocha -w --recursive --compilers coffee:babel-core/register -R mocha-unfunk-reporter",
"unit-test": "NODE_ENV=test node_modules/.bin/mocha --recursive --compilers coffee:babel-core/register -R mocha-unfunk-reporter",
"test": "npm run unit-test && npm run lint",
"watch": "./node_modules/.bin/webpack-dev-server --hot",
"publish-patch": "npm run build && npm version patch && npm publish; git push; git push --tags",
"lint": "eslint --ignore-path .gitignore src/*",
"lint:fix": "eslint --ignore-path .gitignore . --fix",
"format": "prettier --config .prettierrc --write 'src/**/*.{js,jsx}'"
}
}

You have forgotten to build your forked library with the build command.
So, build it:
npm build
// or
yarn build
Now use it without any issues on your application:
import Headroom from "react-headroom"
Note: you need to run the above command in your forked directory not the root of your project.

Task :expo-permissions:compileReleaseKotlin FAILED

I want to create an apk . i am using expo bare project and i am using this command to create the apk for android
cd android && ./gradlew assembleRelease
and i am getting this error every time when i run the command .
here is the error
I have also tried to create the apk for a boilerplate app and that's working fine
but i am getting the error from this one i was using this command before
expo build:android
but by using this command by has a large size so i want to decrease its size that's why i am using
cd android && ./gradlew assembleRelease
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':expo-permissions:compileReleaseKotlin'.
> Compilation error. See log for more details
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
* Get more help at https://help.gradle.org
Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/6.3/userguide/command_line_interface.html#sec:command_line_warnings
Package.json
{
"main": "index.js",
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"web": "expo start --web",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"#expo-google-fonts/montserrat": "^0.1.0",
"#expo-google-fonts/oswald": "^0.1.0",
"#expo-google-fonts/playfair-display": "^0.1.0",
"#react-native-community/cli-platform-ios": "^4.13.0",
"#react-native-community/masked-view": "^0.1.10",
"#react-native-community/netinfo": "^5.9.2",
"#react-native-community/slider": "^3.0.0",
"#react-navigation/bottom-tabs": "^5.11.1",
"#react-navigation/drawer": "^5.9.0",
"#react-navigation/material-top-tabs": "^5.3.10",
"#react-navigation/native": "^5.6.1",
"#react-navigation/stack": "^5.6.2",
"#unimodules/core": "~6.0.0",
"base64-arraybuffer": "^0.2.0",
"expo": "~40.0.0",
"expo-av": "~8.7.0",
"expo-camera": "~9.1.0",
"expo-constants": "~9.3.3",
"expo-file-system": "~9.3.0",
"expo-image-picker": "~9.2.0",
"expo-linear-gradient": "^8.4.0",
"expo-localization": "~9.1.0",
"expo-location": "~10.0.0",
"expo-media-library": "~10.0.0",
"expo-splash-screen": "~0.8.0",
"expo-status-bar": "~1.0.3",
"expo-updates": "~0.4.0",
"i18n-js": "^3.8.0",
"import": "^0.0.6",
"localstorage-polyfill": "^1.0.1",
"moment": "^2.29.1",
"native-base": "^2.13.14",
"query-string": "^6.13.7",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "~0.63.4",
"react-native-deck-swiper": "^2.0.5",
"react-native-dropdown-picker": "^3.7.6",
"react-native-easy-grid": "^0.2.2",
"react-native-gesture-handler": "~1.8.0",
"react-native-keyboard-aware-scroll-view": "^0.9.2",
"react-native-material-menu": "^1.2.0",
"react-native-paper": "^4.1.0",
"react-native-reanimated": "~1.13.0",
"react-native-responsive-fontsize": "^0.5.0",
"react-native-responsive-screen": "^1.4.1",
"react-native-safe-area-context": "~3.1.9",
"react-native-screens": "~2.15.0",
"react-native-size-matters": "^0.3.1",
"react-native-step-indicator": "^1.0.3",
"react-native-svg": "^12.1.0",
"react-native-tab-view": "^2.15.2",
"react-native-unimodules": "~0.12.0",
"react-native-web": "~0.13.12",
"react-native-webview": "^11.0.0",
"react-navigation": "^4.4.0",
"socket.io-client": "^2.3.0"
},
"devDependencies": {
"#babel/core": "~7.9.0",
"babel-jest": "~25.2.6",
"jest": "~25.2.6",
"react-test-renderer": "~16.13.1"
},
"jest": {
"preset": "react-native"
},
"private": true
}

For bare workflow, you have to exclude expo-permissions module:
android/app/build.gradle:
Replace:
addUnimodulesDependencies()
with
addUnimodulesDependencies([exclude: ['expo-permissions']])
for iOS in Podfile:
Replace:
use_unimodules!
with
use_unimodules!(exclude: ['expo-permissions'])
The solution was posted here : https://github.com/expo/expo/issues/10283

License conflicts in nuxt

I'm facing an issue when I build my nuxt app.
When I run 'npm run build', it says:
WARNING in The comment file "LICENSES" conflicts with an existing asset, this may lead to code corruption, please use a different name.
Here's my package.json file:
{
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
},
"dependencies": {
"#nuxtjs/axios": "^5.3.6",
"babel-runtime": "^6.26.0",
"marked": "^0.8.2",
"node-sass": "^4.13.1",
"nuxt": "^2.0.0",
"sass-loader": "^8.0.2",
"vue-fragment": "^1.5.1",
"vue-pdf": "^4.0.7",
"vue-slick-carousel": "^1.0.2",
"vue-youtube": "^1.4.0",
"vuelidate": "^0.7.5"
},
"devDependencies": {
"#nuxtjs/eslint-config": "^1.0.1",
"#nuxtjs/eslint-module": "^1.0.0",
"#nuxtjs/vuetify": "^1.10.2",
"babel-eslint": "^10.0.1",
"eslint": "^6.1.0",
"eslint-config-prettier": "^4.1.0",
"eslint-plugin-nuxt": ">=0.4.2",
"eslint-plugin-prettier": "^3.0.1",
"license-webpack-plugin": "^2.1.4",
"prettier": "^1.16.4"
}
}
Here's the console output:
How can I know which packages conflict with license files?

For me the culprit was the terser webpack plugin. Disabling the terser.extractComments option in build config under nuxt.config.js got rid of the warnings.
nuxt.config.js
export default {
// ... other nuxt config,
build: {
// ... other build config,
terser: {
extractComments: false // default was LICENSES
}
}
}