TypeError: Cannot read property 'style' of undefined

[davidbiller]

React Native WEB:

Module.../../../react-native-circular-progress/src/CircularProgress.js node_modules/react-native-circular-progress/src/CircularProgress.js:130

[RonAmihai]

This issue appears with many RN libraries which are still using ViewPropTypes (like react-native-router-flux for example).

Those libraries should remove ViewPropTypes usage (it's deprecated by RN anyway) or simply do runtime availability check: (ViewPropTypes ? ViewPropTypes.style : PropTypes.object)

However, as temporary fix, the above can be done in a post-install script (this can be simplified even more, this code is just for demonstration):

 /* eslint-disable @typescript-eslint/no-var-requires */
const projectRootPath = require("app-root-path");
const path = require("path");
const fixFiles = require("replace-in-file");

const nodeModulesPath = path.join(projectRootPath.toString(), "node_modules");

const fixViewPropTypesStyleOptions = {
    from: /ViewPropTypes.style/g,
    to: "(ViewPropTypes ? ViewPropTypes.style : PropTypes.object)",
};

const fixReactNativeRouterFluxViewPropTypesStyleOptions = {
    files: path.join(nodeModulesPath, "react-native-router-flux/**/*"),
    ...fixViewPropTypesStyleOptions,
};

const fixReactNativeCircularProgressPropTypesStyleOptions = {
    files: path.join(nodeModulesPath, "react-native-circular-progress/**/*"),
    ...fixViewPropTypesStyleOptions,
};

async function fixReactNativeRouterFlux() {
    try {
        await fixFiles.replaceInFile(fixReactNativeRouterFluxViewPropTypesStyleOptions);
        console.log("Fixed react-native-router-flux successfully");
    } catch (error) {
        console.error("Failed to fix react-native-router-flux with the following error:", error);
    }
}

async function fixReactNativeCircularProgress() {
    try {
        await fixFiles.replaceInFile(fixReactNativeCircularProgressPropTypesStyleOptions);
        console.log("Fixed react-native-circular-progress successfully");
    } catch (error) {
        console.error("Failed to fix react-native-circular-progress with the following error:", error);
    }
}

(async function postInstall() {
    await fixReactNativeRouterFlux();
    await fixReactNativeCircularProgress();
})();