`<Content>` components not renders correctly on react-native 0.63.0 #3183

keima · 2020-07-10T05:27:52Z

I have gone through these following points

Check latest documentation: https://docs.nativebase.io/
Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
Check examples from NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink
For discussion purpose make use of NativeBase Slack: http://slack.nativebase.io/
For queries related to theme, check Theme Variables from Docs and live NativeBase Theme Editor http://nativebase.io/customizer/

Issue Description

node, npm, react-native, react and native-base version, expo version if used, xcode version

node 10.18.0
npm 6.14.3
react-native 0.63.0
react 16.13.1
native-base 2.13.12
XCode 11.5

Expected behaviour

<Content> components renders correctly.

Actual behaviour

<Text>Hi!</Text> is not rendered and output error log below:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Check the render method of `Content`.

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

Steps to reproduce

import React, { Component } from 'react'
import { Container, Content } from 'native-base'

const Foo = () => (
  <Container>
    <Content>
      <Text>Hi!</Text>
    </Content>
  </Container>
)

Is the bug present in both iOS and Android or in any one of them?

Both.

Any other additional info which would help us debug the issue quicker.

###Important

If you want your issue to be looked at quicker, attach a snack reproducible with your issue. Makes it easier for us!

The text was updated successfully, but these errors were encountered:

cristian-rita · 2020-07-10T11:02:25Z

This project is no longer maintained. They don't even make a build from master. Few issues are already fixed there.

younes200 · 2020-07-10T13:27:48Z

Probleme related to change in ScrollView APSL/react-native-keyboard-aware-scroll-view#429 once a PR merge in react-native-keyboard-aware-scroll-view this should be fixed.

rmgpinto · 2020-07-10T14:45:56Z

@cristian-rita do you recommend other ui lib that's properly maintained?

codler · 2020-07-11T16:54:32Z

I have the same issue.

…pgrade depencenciesFix for react native 0.63.0.

codler · 2020-07-12T09:26:14Z

I have forked the repo to fix this issue.

npm i @codler/native-base

You will need to remove old fonts in Copy Bundle Resources in Xcode after install

younes200 · 2020-07-12T12:53:34Z

Thanks @codler.
Why removing old fonts is required ? I have issues rending font on iOS is it the case for you too ?

codler · 2020-07-12T12:56:19Z

You will probably get duplicate output file error when building ios, https://medium.com/codespace69/xcode-reactnative-ios-xcode-build-error-with-duplicate-output-file-when-install-new-library-36dfbcb5d223, but if not, then you dont need to do that.

john-e · 2020-07-12T17:27:18Z

Thanks @codler

MartinMouritzen · 2020-07-13T13:08:12Z

I guess I didn't do my homework well enough, choosing Native-Base. It does seem a bit abandoned, which makes me sad. I too would like recommendations for UI projects that are maintained.

spdaly · 2020-07-13T17:00:20Z

@codler Thanks for the effort. Everything worked perfectly.

@MartinMouritzen Agree. I spent A LOT of time looking at a lot of different kits and decided on NB. Unfortunately, this has been my experience with the RN ecosystem. A lot of great libraries/kits/etc that have great promise but fall short.

muyaszed · 2020-07-13T17:54:33Z

LOL, I don't really realised this repo is kind of abandoned until I had this problem. But really it is quite a nice lib. Somebody should revive this one.

Aung-Myint-Thein · 2020-07-14T02:19:06Z

I have forked the repo to fix this issue.
npm i @codler/native-base
You will need to remove old fonts in Copy Bundle Resources in Xcode after install

I saw you forked rnkasv too. can I just install it but not the whole native-base? @codler

vadympetryshyn · 2020-07-14T05:34:11Z

This project is no longer maintained. They don't even make a build from master. Few issues are already fixed there.

Is it really true? New pull requests no longer be merged? I've just started new project with RNB, should I find another UI Kit?

jacargentina · 2020-07-15T14:05:39Z

@hanykumar https://github.com/APSL/react-native-keyboard-aware-scroll-view/releases/tag/v0.9.2 just released!
Please update dependency and bump for new release ?

raazatul7 · 2020-07-16T10:12:12Z

Is this issue fixed??
Please fix it asap and close it!

madhumurugan89 · 2020-07-17T10:18:22Z

will this issue be fixed ? If not please suggest another UI library for react native

ilya-bmi · 2020-07-17T10:20:46Z

Please fix the issue!

Aung-Myint-Thein · 2020-07-19T08:44:22Z

APSL/react-native-keyboard-aware-scroll-view#443 (comment)

npm install https://github.com/APSL/react-native-keyboard-aware-scroll-view#v0.9.2

I updated the react-native-keyboard-aware-scroll-view with the command from the comment and <Content> is working again :D Hope this solves you guys too.

jacargentina · 2020-07-19T15:06:42Z

I've tried @Aung-Myint-Thein but didn't work.

Then i've tried this on my package.json:

  "resolutions": {
    "native-base/react-native-keyboard-aware-scroll-view": "https://github.com/APSL/react-native-keyboard-aware-scroll-view#v0.9.2"
  }

Then yarn install and it worked!
While i wait for a proper native-base release. Cheers!

Aung-Myint-Thein · 2020-07-19T16:15:24Z

I've tried @Aung-Myint-Thein but didn't work.

Then i've tried this on my package.json:
  "resolutions": {
    "native-base/react-native-keyboard-aware-scroll-view": "https://github.com/APSL/react-native-keyboard-aware-scroll-view#v0.9.2"
  }
Then yarn install and it works!�
While i wait for a proper native-base release. Cheers!

Weird. It is not working for me after fresh npm install. I tried the resolutions method and it is still not working for me. Which React Native, Native Base versions are you using? @jacargentina ?

jacargentina · 2020-07-19T19:47:18Z

@Aung-Myint-Thein i'm using yarn, not npm (i dont think npm supports the resolutions feature); BTW i'm with rn 0.63 and latest published native-base

yogesh1623 · 2020-07-20T08:36:33Z

Please fix this issue Asap!

JerakRus · 2020-07-20T12:32:06Z

@sankhadeeproy007
is the repository really failing anymore? and will this critical issue be fixed?

sankhadeeproy007 · 2020-07-20T12:43:05Z

Guys, is there a PR for this anywhere?
I'll do a release quickly if I there's one.

…sFix for react native 0.63.0. (#3185)

ankitghosh · 2020-07-20T15:38:11Z

This has been fixed after the latest update! You guys can update the nativebase package and it will work

sankhadeeproy007 · 2020-07-20T15:40:29Z

Thanks to @codler for their help in fixing this.

Aung-Myint-Thein · 2020-07-22T15:28:45Z

It is working now in my dev but my release apk is crashing upon start with

Name FATAL EXCEPTION: mqt_native_modules
Reason java.lang.ClassCastException: com.facebook.react.bridge.ReadableNativeMap cannot be cast to java.lang.String

Is it happening the same for you guys?..

nozbwang · 2020-08-10T14:12:08Z

please fix it asap, thank you.
It spends me a lot of time finding my problem is caused by this lovely native-base package. I have to roll back to older native-base version (v2.6.1) so i can continue my work.

oriharel · 2020-09-30T06:20:14Z

If this repo is not being maintained anymore, maybe Paper?

Ar7profacex · 2020-10-02T12:37:58Z

@codler Thank you very much, it worked perfectly, greetings from Chile

impactcolor · 2020-10-09T20:13:52Z

I dumped content

...

To
<>
....
</>

IamMasterWayne · 2020-11-30T17:45:51Z

+1

Florido14 · 2021-11-05T18:19:59Z

please fix it asap, thank you. It spends me a lot of time finding my problem is caused by this lovely native-base package. I have to roll back to older native-base version (v2.6.1) so i can continue my work.

I have the same issue, you can fix it?

nozbwang · 2021-11-08T05:30:21Z

please fix it asap, thank you. It spends me a lot of time finding my problem is caused by this lovely native-base package. I have to roll back to older native-base version (v2.6.1) so i can continue my work.

I have the same issue, you can fix it?

I fixed it by changing native-base version in my project ( for example changing to the lower version v2.6.1)。

You can upgrade the native-base package to the lastest stable version to find out whether the problem is fixed.

stale · 2022-02-02T04:56:28Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

codler added a commit to codler/NativeBase that referenced this issue Jul 12, 2020

Fix GeekyAnts#3179, GeekyAnts#3183, for broken react-native 0.63.0, u…

fbaaae9

…pgrade depencenciesFix for react native 0.63.0.

droM4X mentioned this issue Jul 18, 2020

ref Error of Content.js on React Native 0.63.1 #3189

Closed

sankhadeeproy007 pushed a commit that referenced this issue Jul 20, 2020

Fix #3179, #3183, for broken react-native 0.63.0, upgrade depencencie…

8a3fe48

…sFix for react native 0.63.0. (#3185)

nlaitanatix mentioned this issue Mar 29, 2021

fix: round participant view ong-bitcoin-argentina/DIDI-Ronda#143

Merged

stale bot added the stale label Feb 2, 2022

stale bot closed this as completed Apr 9, 2022

<Content> components not renders correctly on react-native 0.63.0 #3183

<Content> components not renders correctly on react-native 0.63.0 #3183

Comments

keima commented Jul 10, 2020

I have gone through these following points

Issue Description

node, npm, react-native, react and native-base version, expo version if used, xcode version

Expected behaviour

Actual behaviour

Steps to reproduce

Is the bug present in both iOS and Android or in any one of them?

Any other additional info which would help us debug the issue quicker.

cristian-rita commented Jul 10, 2020

younes200 commented Jul 10, 2020 • edited Loading

rmgpinto commented Jul 10, 2020

codler commented Jul 11, 2020

codler commented Jul 12, 2020

younes200 commented Jul 12, 2020

codler commented Jul 12, 2020

john-e commented Jul 12, 2020

MartinMouritzen commented Jul 13, 2020

spdaly commented Jul 13, 2020

muyaszed commented Jul 13, 2020

Aung-Myint-Thein commented Jul 14, 2020

vadympetryshyn commented Jul 14, 2020

jacargentina commented Jul 15, 2020

raazatul7 commented Jul 16, 2020

madhumurugan89 commented Jul 17, 2020

ilya-bmi commented Jul 17, 2020

Aung-Myint-Thein commented Jul 19, 2020 • edited Loading

jacargentina commented Jul 19, 2020 • edited Loading

Aung-Myint-Thein commented Jul 19, 2020

jacargentina commented Jul 19, 2020 • edited Loading

yogesh1623 commented Jul 20, 2020 • edited Loading

JerakRus commented Jul 20, 2020

sankhadeeproy007 commented Jul 20, 2020

ankitghosh commented Jul 20, 2020

sankhadeeproy007 commented Jul 20, 2020

Aung-Myint-Thein commented Jul 22, 2020

nozbwang commented Aug 10, 2020 • edited Loading

oriharel commented Sep 30, 2020

Ar7profacex commented Oct 2, 2020

impactcolor commented Oct 9, 2020

IamMasterWayne commented Nov 30, 2020

Florido14 commented Nov 5, 2021

nozbwang commented Nov 8, 2021

stale bot commented Feb 2, 2022

`<Content>` components not renders correctly on react-native 0.63.0 #3183

`<Content>` components not renders correctly on react-native 0.63.0 #3183

younes200 commented Jul 10, 2020 •

edited

Loading

Aung-Myint-Thein commented Jul 19, 2020 •

edited

Loading

jacargentina commented Jul 19, 2020 •

edited

Loading

jacargentina commented Jul 19, 2020 •

edited

Loading

yogesh1623 commented Jul 20, 2020 •

edited

Loading

nozbwang commented Aug 10, 2020 •

edited

Loading