NativeBase: `` components not renders correctly on react-native 0.63.0

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!

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 26
Comments: 35 (6 by maintainers)

Commits related to this issue

Fix #3179, #3183, for broken react-native 0.63.0, upgrade depencenciesFix for react native 0.63.0. — committed to codler/NativeBase by codler 4 years ago
Fix #3179, #3183, for broken react-native 0.63.0, upgrade depencenciesFix for react native 0.63.0. (#3185) — committed to GeekyAnts/NativeBase by codler 4 years ago

Most upvoted comments

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

+15

codler on Jul 12, 2020

Thanks to @codler for their help in fixing this.

sankhadeeproy007 on Jul 20, 2020

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.

MartinMouritzen on Jul 13, 2020

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

cristian-rita on Jul 10, 2020

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

ankitghosh on Jul 20, 2020

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!

jacargentina on Jul 19, 2020

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

raazatul7 on Jul 16, 2020

@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 ?

jacargentina on Jul 15, 2020

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.

nozbwang on Nov 8, 2021

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

JerakRus on Jul 20, 2020

@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.

spdaly on Jul 13, 2020

I have the same issue.

codler on Jul 11, 2020

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

rmgpinto on Jul 10, 2020

I dumped content <Content> … </Content>

To <> … </>

impactcolor on Oct 9, 2020

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.

微信图片_20200810221549

nozbwang on Aug 10, 2020

@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

jacargentina on Jul 19, 2020