Adding a new image results in "Text strings must be rendered within a <Text> component"

[mraible]

trafficstars

Describe the bug

If I create an app using the following JDL, it throws an exception when I try to add a new photo entity.

https://github.com/mraible/mobile-jhipster/blob/main/app.jdl

Instructions To reproduce

Log in and go to Entities > Photo > New.

Error: Text strings must be rendered within a <Text> component.

This error is located at:
    in Formik (at jhi-form.js:35)
    in ForwardRef(_c) (at photo-edit-screen.js:151)
    in RCTScrollContentView (at ScrollView.js:1124)
    in RCTScrollView (at ScrollView.js:1260)

JHipster app's .yo-rc.json

https://github.com/mraible/mobile-jhipster/blob/main/backend/.yo-rc.json

Versions (please complete the following information):

• JHipster React Native Version: 4.2.1
• jhipster info output:

JHipster Version(s)

[email protected] /Users/mraible/dev/mobile-jhipster/backend
└── [email protected]

JHipster configuration, a .yo-rc.json file generated in the root folder

.yo-rc.json file

{
  "generator-jhipster": {
    "applicationType": "monolith",
    "baseName": "flickr2",
    "jhipsterVersion": "7.3.1",
    "skipClient": false,
    "skipServer": false,
    "skipUserManagement": true,
    "skipCheckLengthOfIdentifier": false,
    "skipFakeData": false,
    "jhiPrefix": "jhi",
    "entitySuffix": "",
    "dtoSuffix": "DTO",
    "testFrameworks": ["cypress"],
    "blueprints": [],
    "otherModules": [],
    "pages": [],
    "creationTimestamp": 1634022348068,
    "serviceDiscoveryType": "no",
    "reactive": false,
    "authenticationType": "oauth2",
    "packageName": "com.auth0.flickr2",
    "serverPort": "8080",
    "cacheProvider": "ehcache",
    "enableHibernateCache": true,
    "databaseType": "sql",
    "devDatabaseType": "h2Disk",
    "prodDatabaseType": "postgresql",
    "buildTool": "maven",
    "serverSideOptions": [],
    "websocket": false,
    "searchEngine": false,
    "messageBroker": false,
    "enableSwaggerCodegen": false,
    "clientFramework": "react",
    "withAdminUi": true,
    "clientTheme": "united",
    "clientThemeVariant": "dark",
    "enableTranslation": true,
    "nativeLanguage": "en",
    "devServerPort": 9060,
    "clientPackageManager": "npm",
    "languages": ["en", "pt-br"],
    "enableGradleEnterprise": false,
    "entities": ["Album", "Photo", "Tag"],
    "lastLiquibaseTimestamp": 1634025089000,
    "herokuAppName": "flickr-2",
    "herokuDeployType": "git",
    "herokuJavaVersion": "11",
    "useOkta": false
  }
}

JDL for the Entity configuration(s) entityName.json files generated in the .jhipster directory

JDL entity definitions

entity Album {
  title String required
  description TextBlob
  created Instant
}
entity Photo {
  title String required
  description TextBlob
  image ImageBlob required
  height Integer
  width Integer
  taken Instant
  uploaded Instant
}
entity Tag {
  name String required minlength(2)
}
relationship ManyToOne {
  Album{user(login)} to User
  Photo{album(title)} to Album
}
relationship ManyToMany {
  Photo{tag(name)} to Tag{photo}
}

paginate Album with pagination
paginate Photo, Tag with infinite-scroll

Environment and Tools

openjdk version "11.0.2" 2019-01-15 OpenJDK Runtime Environment 18.9 (build 11.0.2+9) OpenJDK 64-Bit Server VM 18.9 (build 11.0.2+9, mixed mode)

git version 2.30.1 (Apple Git-130)

node: v14.18.1

npm: 8.1.2

Docker version 20.10.8, build 3967b7d

Docker Compose version v2.0.0

[ruddell]

I wasn't able to reproduce this. I added that JDL as one of the E2E options and it passes fine https://github.com/jhipster/generator-jhipster-react-native/blob/5759146a2b5e2ff1fb7ab353570a82570fef3484/.github/workflows/ios.yml#L55-L58 https://github.com/jhipster/generator-jhipster-react-native/runs/4479422037?check_suite_focus=true

[mraible]

I tried this again today and was able to reproduce the issue.

git clone [email protected]:oktadev/okta-react-native-jhipster-example.git
cd okta-react-native-jhipster-example
# start keycloak
jhkeycloakup
cd backend
./mvnw

# open a new terminal
cd mobile
npm start

Run on iOS and click create image.

[mraible]

I'm also unable to log out with Auth0 via web or iOS. It looks like I'm logged out in the React Native app, but when I log in again, I'm not prompted for my credentials.

[mraible]

Fixed by #881.

[pascalgrimaud]

bounty requested here https://opencollective.com/generator-jhipster/expenses/92829 by @mraible : approved