New React Native / Expo templates not working - multiple errors #8727 | Support

0

improwise created 2 months ago

Output from Expo-doctor

npx expo-doctor

Enabled experimental React Native Directory checks. Unset the EXPO_DOCTOR_ENABLE_DIRECTORY_CHECK environment variable to disable this check.
✔ Check package.json for common issues
✔ Check Expo config for common issues
✔ Check native tooling versions
✔ Check if the project meets version requirements for submission to app stores
✔ Check for common project setup issues
✖ Check dependencies for packages that should not be installed directly
✔ Check for app config fields that may not be synced in a non-CNG project
✔ Check for issues with Metro config
✔ Check npm/ yarn versions
✖ Validate packages against React Native Directory package metadata
✖ Check Expo config (app.json/ app.config.js) schema
✔ Check that native modules do not use incompatible support packages
✔ Check for legacy global CLI installed locally
✔ Check that native modules use compatible support package versions for installed Expo SDK
✖ Check that packages match versions required by installed Expo SDK

Detailed check results:

Error: Problems validating fields in *********\react-native\app.json. Learn more: https://docs.expo.dev/workflow/configuration/
• Field: scheme - 'scheme' must match pattern "^[a-z][a-z0-9+.-]$".
• Field: scheme - must be array.
• Field: scheme - must match exactly one schema in oneOf.

The package "@types/react-native" should not be installed directly in your project, as types are included with the "react-native" package.

The following issues were found when validating your dependencies against React Native Directory:
Untested on New Architecture: react-native-chart-kit
Unmaintained: expo-random, react-native-chart-kit, reanimated-bottom-sheet, redux-persist
No metadata available: prop-types, react-native-base64, redux-saga, yup
Advice:

Use libraries that are actively maintained and support the New Architecture. Find alternative libraries with https://reactnative.directory.
Add packages to expo.doctor.reactNativeDirectoryCheck.exclude in package.json to selectively skip validations, if the warning is not relevant.
Update React Native Directory to include metadata for unknown packages. Alternatively, set expo.doctor.reactNativeDirectoryCheck.listUnknownPackages in package.json to false to skip warnings about packages with no metadata, if the warning is not relevant.

The following packages should be updated for best compatibility with the installed expo version:
react-native@0.76.5 - expected version: 0.76.6
react-native-screens@4.1.0 - expected version: ~4.4.0
Your project may not work correctly until you install the expected versions of the packages.
Found outdated dependencies
Advice: Use 'npx expo install --check' to review and upgrade your dependencies.

One or more checks failed, indicating possible issues with the project.

0

improwise created 2 months ago

As previously reported in the ABP 9 bug & features thread:

First error after having created a new project in ABP 0.9.22 and just running npx expo start and trying to browse Expo Web

Console:

Refused to execute script from 'http://localhost:8081/node_modules/expo/AppEntry.bundle?platform=web&dev=true&hot=false&transform.engine=hermes&transform.routerRoot=app&unstable_transformProfile=hermes-stable' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.

Terminal:

Web Bundling failed 6705ms node_modules\expo\AppEntry.js (2320 modules) Unable to resolve "normalize-css-color" from "node_modules\native-base\lib\module\utils\react-native-web-fucntions\normalizeColor.js"

0

improwise created 2 months ago

Linking to this ticked as well related to the same topic

https://abp.io/support/questions/8706/abp-studio-0922-not-downloading-correct-react-native-template-with-microservices-template

0

sumeyye.kurtulus created 2 months ago

Support Team Angular Expert

Thank you for sharing the output from Expo-doctor. I would like to assure you that the concerns mentioned, such as validation warnings and package compatibility, are being addressed in upcoming releases.

These issues should not disrupt the core functionality of the app directly in the current version, but we recommend keeping an eye out for the next updates, which will resolve these points and improve overall compatibility.

0

improwise created 2 months ago

These issues should not disrupt the core functionality of the app directly in the current version, but we recommend keeping an eye out for the next updates, which will resolve these points and improve overall compatibility.

This is probably true but mostly because of the fact that at least we could not get it to work at all. We only tried running Expo Web in a newly created project which turned out to be a no go so never tried getting it to run as a mobile app.

When will the new release be available ?

Thanks.

0

sumeyye.kurtulus created 2 months ago

Support Team Angular Expert

You can follow the release notes that is announced here.

0

improwise created 2 months ago

You can follow the release notes that is announced here.

Thanks, but that does not answer my question about when updated templates will be available :)

Have you confirmed that the produced projects from the current template works as mobile apps even though they do not seem to work as Expo Web (which is the only thing we tried so far)?

Thanks.

0

sumeyye.kurtulus created 2 months ago

Support Team Angular Expert

Hi again @improwise, I appreciate your follow-up.

We have run the necessary tests, and the projects generated from the current template do work as mobile apps. While we acknowledge the issue with Expo Web, we can confirm that this does not impact mobile functionality.

We will proceed with small fixes that do not disrupt the expected flow, ensuring a smooth experience. Once we have completed the necessary maintenance—including the aspects you mentioned—these updates will be included in the release notes.

0

improwise created 2 months ago

Please fix the problem that tickets get closed even though you just reopened them

0

sumeyye.kurtulus created 2 months ago

Support Team Angular Expert

We do not typically close tickets unless they are fully resolved or inactive for some time. We understand the issue you are facing and are actively working on a fix to prevent this from happening again. Thanks for your patience.

0

improwise created 2 months ago

We do not typically close tickets unless they are fully resolved or inactive for some time. We understand the issue you are facing and are actively working on a fix to prevent this from happening again. Thanks for your patience.

The problem seems to be an overzealous bot with really poor patience that decides to close even unresolved ticket way too early.

0

sumeyye.kurtulus created 2 months ago

Support Team Angular Expert

Hello again, I understand your frustration regarding the ticket closure. We are continuously working on improving our processes, including refining our support automation to prevent premature closures.

As for the React Native templates, the work is in progress, and we appreciate your patience and cooperation. If you need any further updates or have any concerns, feel free to reach out—we are happy to assist.

0

improwise created about a month ago

Reopened once again.....

0

smansuri created about a month ago

Do we have any update on fixing the expo web issue?

0

improwise created 25 days ago

What is the status of this?

0

sumeyye.kurtulus created 25 days ago

Support Team Angular Expert

Thank you for your patience! We understand how important this is for your project, and we appreciate your efforts in keeping the discussion going.

The issues you've reported are being considered for upcoming releases, but in the meantime, here are a couple of adjustments that might help:

Try adding the normalize-css-color dependency, as the error seems specific to web builds.
Modify the following file to help mitigate potential web-related issues:

// react-native/src/components/Common/NoRecordSvg.tsx
import React from 'react';
import { View } from 'react-native';
import Svg, { Path, G, Mask } from 'react-native-svg';

function NoRecordSvg() {
  return (
    <View>
      <Svg width={250} height={250} fill="none">
        <G id="Group 36278">
          <G id="Group 36277">
            <Mask
              id="mask0_134_2295"
              mask-type="luminance"
              maskUnits="userSpaceOnUse"
              x="0"
              y="0"
              width="244"
              height="244">
              <G id="clipPath1535">
                <Path id="path1533" d="M0 0H243.339V243.339H0V0Z" fill="white" />
              </G>
            </Mask>
            <G mask="url(#mask0_134_2295)">
              <G id="g1531">
                <G id="g1537">
                  <Path
                    id="path1539"
                    d="M239.78 109.371H182.633"
                    stroke="#1E2025"
                    strokeWidth="7"
                    strokeMiterlimit="10"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </G>
                <G id="g1541">
                  <Path
                    id="path1543"
                    d="M133.676 209.136V224.555C133.676 226.99 135.65 228.964 138.085 228.964H167.101"
                    stroke="#1E2025"
                    strokeWidth="7"
                    strokeMiterlimit="10"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </G>
                <G id="g1545">
                  <Path
                    id="path1547"
                    d="M163.305 228.964H235.368C237.802 228.964 239.777 226.99 239.777 224.555V88.6199C239.777 86.1847 237.802 84.2104 235.368 84.2104H183.295"
                    stroke="#1E2025"
                    strokeWidth="7"
                    strokeMiterlimit="10"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </G>
                <G id="g1549">
                  <Path
                    id="path1551"
                    d="M58.004 109.371H3.57031"
                    stroke="#1E2025"
                    strokeWidth="7"
                    strokeMiterlimit="10"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </G>
                <G id="g1553">
                  <Path
                    id="path1555"
                    d="M57.9994 84.2096H45.1719"
                    stroke="#1E2025"
                    strokeWidth="7"
                    strokeMiterlimit="10"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </G>
                <G id="g1557">
                  <Path
                    id="path1559"
                    d="M46.1142 84.2104H7.9794C5.54459 84.2104 3.57031 86.1847 3.57031 88.6199V224.555C3.57031 226.99 5.54459 228.964 7.9794 228.964H105.268C107.704 228.964 109.678 226.99 109.678 224.555V209.136"
                    stroke="#1E2025"
                    strokeWidth="7"
                    strokeMiterlimit="10"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </G>
                <G id="g1561">
                  <Path
                    id="path1563"
                    d="M178.714 70.026H59.1602"
                    stroke="#1E2025"
                    strokeWidth="7"
                    strokeMiterlimit="10"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </G>
                <G id="g1565">
                  <Path
                    id="path1567"
                    d="M157.66 40.9259H64.2593C61.4434 40.9259 59.1602 43.2091 59.1602 46.0256V166.389"
                    stroke="#1E2025"
                    strokeWidth="7"
                    strokeMiterlimit="10"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </G>
                <G id="g1569">
                  <Path
                    id="path1571"
                    d="M181.878 93.5016V46.0263C181.878 43.2099 179.595 40.9267 176.778 40.9267H157.445"
                    stroke="#1E2025"
                    strokeWidth="7"
                    strokeMiterlimit="10"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </G>
                <G id="g1573">
                  <Path
                    id="path1575"
                    d="M59.1603 163.313V203.243C59.1603 206.059 61.4435 208.342 64.26 208.342H176.78C179.597 208.342 181.88 206.059 181.88 203.243V92.0845"
                    stroke="#1E2025"
                    strokeWidth="7"
                    strokeMiterlimit="10"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </G>
                <G id="g1593">
                  <Path
                    id="path1595"
                    d="M77.2734 55.4459H77.3185"
                    stroke="#1E2025"
                    strokeWidth="7"
                    strokeMiterlimit="10"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </G>
                <G id="g1597">
                  <Path
                    id="path1599"
                    d="M77.2734 55.4469H77.3176"
                    stroke="#1E2025"
                    strokeWidth="7"
                    strokeMiterlimit="10"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </G>
                <G id="g1601">
                  <Path
                    id="path1603"
                    d="M88.0547 55.4469H88.0988"
                    stroke="#1E2025"
                    strokeWidth="7"
                    strokeMiterlimit="10"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </G>
                <G id="g1605">
                  <Path
                    id="path1607"
                    d="M98.8438 55.4469H98.8879"
                    stroke="#1E2025"
                    strokeWidth="7"
                    strokeMiterlimit="10"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </G>
              </G>
            </G>
          </G>
          <G id="Add User">
            <Path
              id="Fill 1"
              opacity="0.8"
              d="M144.811 133.157H141.752V130.166C141.752 128.889 140.728 127.848 139.466 127.848C138.206 127.848 137.18 128.889 137.18 130.166V133.157H134.126C132.864 133.157 131.84 134.198 131.84 135.475C131.84 136.752 132.864 137.793 134.126 137.793H137.18V140.787C137.18 142.064 138.206 143.105 139.466 143.105C140.728 143.105 141.752 142.064 141.752 140.787V137.793H144.811C146.07 137.793 147.097 136.752 147.097 135.475C147.097 134.198 146.07 133.157 144.811 133.157Z"
              fill="#1E2025"
            />
            <Path
              id="Fill 4"
              d="M115.313 146.959C105.026 146.959 96.2422 148.604 96.2422 155.176C96.2422 161.744 104.972 163.448 115.313 163.448C125.598 163.448 134.384 161.804 134.384 155.232C134.384 148.661 125.654 146.959 115.313 146.959Z"
              fill="#1E2025"
            />
            <Path
              id="Fill 7"
              opacity="0.6"
              d="M115.318 140.7C122.323 140.7 127.937 135.013 127.937 127.919C127.937 120.824 122.323 115.134 115.318 115.134C108.314 115.134 102.699 120.824 102.699 127.919C102.699 135.013 108.314 140.7 115.318 140.7Z"
              fill="#1E2025"
            />
          </G>
        </G>
      </Svg>
    </View>
  );
}

export default NoRecordSvg;

Since project configurations can impact npx expo-doctor results, providing a minimal reproducible example would allow us to assist more effectively.

Let us know how it goes, and we will do our best to support you!

0

improwise created 25 days ago

Since project configurations can impact npx expo-doctor results, providing a minimal reproducible example would allow us to assist more effectively.

Unless something has changed since I created this thread, just create a new ABP project and try to run the Expo Web is enough.

0

improwise created 23 days ago

Having looked at this again more in detail, we still feel that the React Native / Expo template provided is still no where near production ready. Lots of configuration error, dependency on modules that have been deprecated for a long time etc. Honestly, I don't see how this could be missed in this supposed new and updated React Native/Expo template when just running Expo doctor would show many of the problems immediately.

0

improwise created 12 days ago

Any news on this? Sorry to be that guy but I honestly think ABP should consider for the time being remove the claimed support för React Native / Expo as I can't imagine anyone using the current template with the problem it has. Also the fact that it hasn't really been a working template for months now.

At least provide us with an update from management team if React Native / Expo is even a priority anymore. This "coming soon" is starting to feel more like never. Thanks.

0

sumeyye.kurtulus created 11 days ago

Support Team Angular Expert

Thank you for reaching out again. The current React Native template remains supported, and the issues you’ve pointed out are actively being managed. There should be no problem with using and publishing apps at this time. Running the expo doctor command can help ensure compatibility with the latest updates.

That said, the template continues to be a priority, and we are consistently testing and refining it. We appreciate your patience and feedback.

0

improwise created 7 days ago

Thank you for reaching out again. The current React Native template remains supported, and the issues you’ve pointed out are actively being managed. There should be no problem with using and publishing apps at this time. Running the expo doctor command can help ensure compatibility with the latest updates.

That said, the template continues to be a priority, and we are consistently testing and refining it. We appreciate your patience and feedback.

After some struggle we were at least able to get this running (except for the Web version as reported above). There are a few things missing in the docs on https://abp.io/docs/latest/framework/ui/react-native on how to do it. This is from memory so could be a few more steps I am missing here

You need to run Expo Doctor ("npx expo-doctor", not "expo doctor") and fix the most obvious problems
As mentioned in the docs, you need to user your local IP instead of localhost. Besides what is mentioned in the docs, you also need to update the config for the _Mobile Application in DBMigrator (replace localhost with same IP)
You need to make sure that the API can actually be reached using HTTP and not only HTTPS as that is what is used by the Expo app. Just getting your web browser to accept the SSL cert is not enough.
Note that the Expo app is setup to be run on port 19000 by default and the config is setup to match this. This is mentioned in the docs but might still not be obvious to anyone used to doing "npx expo start" etc. You could probably change ports in config as well an run it normally also or just specify port in npx expo command.

Some things we could not get to work

Web. This needs to be fixed as it makes it much more efficient to develop, at least assuming your app is something that works in the web like CRUD.
We were not able to get the development build running, only Expo Go. Did not look too much into why but this needs to be fixed (assuming it is an ABP problem) as Expo Go is far from ideal for serious development. Edit: We were able to get this working with some tinkering.

New React Native / Expo templates not working - multiple errors #8727

21 Answer(s)

ABP Live Training
Packages

Do you need assistance from an ABP expert?

Mastering
ABP Framework

New React Native / Expo templates not working - multiple errors #8727

21 Answer(s)

ABP Live TrainingPackages

Do you need assistance from an ABP expert?

MasteringABP Framework

ABP Live Training
Packages

Mastering
ABP Framework