v2 not compatible with react-native 0.65

[majugurci]

When using [email protected] and [email protected] app is failing to start because of this error: "_reactNative.Keyboard.removeListener is not a function\n at ToastContainer.componentWillUnmount".

Could you please ship v2 fix since it is not trivial to upgrade to version 3?

[moyolvera]

I'm having also this issue when trying to update to latest react native version while using native base v2.13.15

[claudiozam]

@moyolvera you can create a patch for the Keyboard issue.

https://github.com/ds300/patch-package

diff --git a/node_modules/native-base/src/basic/ToastContainer.js b/node_modules/native-base/src/basic/ToastContainer.js
index 4bd57ac..88f1c49 100644
--- a/node_modules/native-base/src/basic/ToastContainer.js
+++ b/node_modules/native-base/src/basic/ToastContainer.js
@@ -59,13 +59,13 @@ class ToastContainer extends Component {
   }
 
   componentDidMount() {
-    Keyboard.addListener('keyboardDidShow', this.keyboardDidShow);
-    Keyboard.addListener('keyboardDidHide', this.keyboardDidHide);
+    this.kbDidShow = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow);
+    this.kbDidHide = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide);
   }
 
   componentWillUnmount() {
-    Keyboard.removeListener('keyboardDidShow', this.keyboardDidShow);
-    Keyboard.removeListener('keyboardDidHide', this.keyboardDidHide);
+    this.kbDidShow?.remove();
+    this.kbDidHide?.remove();
   }

[adhip94]

@claudiozam Even after applying the patch I still get the following error

 ERROR  TypeError: undefined is not a function

This error is located at:
    in ToastContainer (at connectStyle.js:392)
    in Styled(ToastContainer) (at Root.js:16)
    in RCTView (at View.js:32)
    in View (at Root.js:14)
    in Root (at connectStyle.js:392)
    in Styled(Root) (at App.js:8)
    in App (at App.js:32)
    in AppInitializer (at App.js:43)
    in Provider (at App.js:41)
    in Root (at renderApplication.js:48)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:32)
    in View (at react-native-root-siblings/index.js:32)
    in RootSiblingsWrapper (at AppContainer.js:121)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:133)
    in AppContainer (at renderApplication.js:41)
    in TestApplication(RootComponent) (at renderApplication.js:57), js engine: hermes
 ERROR  TypeError: undefined is not a function

This error is located at:
    in ToastContainer (at connectStyle.js:392)
    in Styled(ToastContainer) (at Root.js:16)
    in RCTView (at View.js:32)
    in View (at Root.js:14)
    in Root (at connectStyle.js:392)
    in Styled(Root) (at App.js:8)
    in App (at App.js:32)
    in AppInitializer (at App.js:43)
    in Provider (at App.js:41)
    in Root (at renderApplication.js:48)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:32)
    in View (at react-native-root-siblings/index.js:32)
    in RootSiblingsWrapper (at AppContainer.js:121)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:133)
    in AppContainer (at renderApplication.js:41)
    in TestApplication(RootComponent) (at renderApplication.js:57), js engine: hermes
 ERROR  Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in StartScreen (created by SceneView)
    in SceneView (created by SwitchView)
    in SwitchView (created by Navigator)
    in Navigator (created by NavigationContainer)
    in NavigationContainer (at TestApp.js:127)
    in TestApp (at App.js:24)
    in AppInitializer (at App.js:43)
    in Provider (at App.js:41)
    in Root (at renderApplication.js:48)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:32)
    in View (at react-native-root-siblings/index.js:32)
    in RootSiblingsWrapper (at AppContainer.js:121)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:133)
    in AppContainer (at renderApplication.js:41)
    in TestApplication(RootComponent) (at renderApplication.js:57)

Any idea what this means?

[claudiozam]

@adhip94 yes, is not working. I think the problem is related to the dist folder. Check this file at /node_modules/native-base/dist/src/basic/ToastContainer.js (I used flipper debugger). Maybe we must regenerate the .js files of native base?

[adhip94]

You could be right. Looks like the files in the dist folder are all minified, will try to change them.

[adhip94]

Ok, so I got it to work using patch-package, for anyone who needs, these are the contents of the patch-package native-base+2.15.2.patch

diff --git a/node_modules/native-base/dist/src/basic/ToastContainer.js b/node_modules/native-base/dist/src/basic/ToastContainer.js
index 832b3e8..3a7dc00 100644
--- a/node_modules/native-base/dist/src/basic/ToastContainer.js
+++ b/node_modules/native-base/dist/src/basic/ToastContainer.js
@@ -1,2 +1,2 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.ToastContainer=undefined;var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};var _jsxFileName='src/basic/ToastContainer.js';var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();var _react=require('react');var _react2=_interopRequireDefault(_react);var _reactNative=require('react-native');var _nativeBaseShoutemTheme=require('native-base-shoutem-theme');var _mapPropsToStyleNames=require('../utils/mapPropsToStyleNames');var _mapPropsToStyleNames2=_interopRequireDefault(_mapPropsToStyleNames);var _commonColor=require('../theme/variables/commonColor');var _Text=require('./Text');var _Button=require('./Button');var _Toast=require('./Toast');function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _objectWithoutProperties(obj,keys){var target={};for(var i in obj){if(keys.indexOf(i)>=0)continue;if(!Object.prototype.hasOwnProperty.call(obj,i))continue;target[i]=obj[i];}return target;}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call&&(typeof call==="object"||typeof call==="function")?call:self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;}var POSITION={ABSOLUTE:'absolute',BOTTOM:'bottom',TOP:'top'};var ToastContainer=function(_Component){_inherits(ToastContainer,_Component);_createClass(ToastContainer,null,[{key:'show',value:function show(_ref){var config=_objectWithoutProperties(_ref,[]);this.toastInstance._root.showToast({config:config});}},{key:'hide',value:function hide(){if(this.toastInstance._root.getModalState()){this.toastInstance._root.closeToast('functionCall');}}}]);function ToastContainer(props){_classCallCheck(this,ToastContainer);var _this=_possibleConstructorReturn(this,(ToastContainer.__proto__||Object.getPrototypeOf(ToastContainer)).call(this,props));_this.closeModal=function(reason){_this.setState({modalVisible:false});var onClose=_this.state.onClose;if(onClose&&typeof onClose==='function'){onClose(reason);}};_this.state={fadeAnim:new _reactNative.Animated.Value(0),pan:new _reactNative.Animated.ValueXY({x:0,y:0}),keyboardHeight:0,isKeyboardVisible:false,modalVisible:false};_this.keyboardDidHide=_this.keyboardDidHide.bind(_this);_this.keyboardDidShow=_this.keyboardDidShow.bind(_this);_this._panResponder=_reactNative.PanResponder.create({onMoveShouldSetPanResponderCapture:function onMoveShouldSetPanResponderCapture(){return true;},onPanResponderRelease:function onPanResponderRelease(evt,_ref2){var dx=_ref2.dx;if(dx!==0){_reactNative.Animated.timing(_this.state.pan,{toValue:{x:dx,y:0},duration:100,useNativeDriver:false}).start(function(){return _this.closeToast('swipe');});}}});return _this;}_createClass(ToastContainer,[{key:'componentDidMount',value:function componentDidMount(){_reactNative.Keyboard.addListener('keyboardDidShow',this.keyboardDidShow);_reactNative.Keyboard.addListener('keyboardDidHide',this.keyboardDidHide);}},{key:'componentWillUnmount',value:function componentWillUnmount(){_reactNative.Keyboard.removeListener('keyboardDidShow',this.keyboardDidShow);_reactNative.Keyboard.removeListener('keyboardDidHide',this.keyboardDidHide);}},{key:'getToastStyle',value:function getToastStyle(){return{position:POSITION.ABSOLUTE,opacity:this.state.fadeAnim,width:'100%',elevation:9,paddingHorizontal:_reactNative.Platform.OS===_commonColor.PLATFORM.IOS?20:0,top:this.state.position===POSITION.TOP?30:undefined,bottom:this.state.position===POSITION.BOTTOM?this.getTop():undefined};}},{key:'getTop',value:function getTop(){if(_reactNative.Platform.OS===_commonColor.PLATFORM.IOS){if(this.state.isKeyboardVisible){return this.state.keyboardHeight;}return 30;}return 0;}},{key:'getButtonText',value:function getButtonText(buttonText){if(buttonText){if(buttonText.trim().length===0){return undefined;}return buttonText;}return undefined;}},{key:'getModalState',value:function getModalState(){return this.state.modalVisible;}},{key:'keyboardDidHide',value:function keyboardDidHide(){this.setState({keyboardHeight:0,isKeyboardVisible:false});}},{key:'keyboardDidShow',value:function keyboardDidShow(e){this.setState({keyboardHeight:e.endCoordinates.height,isKeyboardVisible:true});}},{key:'showToast',value:function showToast(_ref3){var config=_ref3.config;this.setState({modalVisible:true,text:config.text,buttonText:this.getButtonText(config.buttonText),type:config.type,position:config.position?config.position:POSITION.BOTTOM,supportedOrientations:config.supportedOrientations,style:config.style,buttonTextStyle:config.buttonTextStyle,buttonStyle:config.buttonStyle,textStyle:config.textStyle,onClose:config.onClose,swipeDisabled:config.swipeDisabled||false});if(this.closeTimeout){clearTimeout(this.closeTimeout);}if(config.duration!==0){var duration=config.duration>0?config.duration:1500;this.closeTimeout=setTimeout(this.closeToast.bind(this,'timeout'),duration);}_reactNative.Animated.timing(this.state.fadeAnim,{toValue:1,duration:200,useNativeDriver:false}).start();}},{key:'closeToast',value:function closeToast(reason){var _this2=this;clearTimeout(this.closeTimeout);_reactNative.Animated.timing(this.state.fadeAnim,{toValue:0,duration:200,useNativeDriver:false}).start(function(){_this2.closeModal(reason);_this2.state.pan.setValue({x:0,y:0});});}},{key:'render',value:function render(){var _this3=this;if(this.state.modalVisible){var _state$pan=this.state.pan,x=_state$pan.x,y=_state$pan.y;return _react2.default.createElement(_reactNative.Animated.View,_extends({},this.state.swipeDisabled?{}:this._panResponder.panHandlers,{style:[this.getToastStyle(),{transform:[{translateX:x},{translateY:y}]}],__source:{fileName:_jsxFileName,lineNumber:182}}),_react2.default.createElement(_Toast.Toast,{style:[this.state.style],danger:this.state.type==='danger',success:this.state.type==='success',warning:this.state.type==='warning',__source:{fileName:_jsxFileName,lineNumber:189}},_react2.default.createElement(_Text.Text,{style:this.state.textStyle,__source:{fileName:_jsxFileName,lineNumber:195}},this.state.text),this.state.buttonText&&_react2.default.createElement(_Button.Button,{style:this.state.buttonStyle,onPress:function onPress(){return _this3.closeToast('user');},__source:{fileName:_jsxFileName,lineNumber:197}},_react2.default.createElement(_Text.Text,{style:this.state.buttonTextStyle,__source:{fileName:_jsxFileName,lineNumber:201}},this.state.buttonText))));}return null;}}]);return ToastContainer;}(_react.Component);ToastContainer.propTypes=_extends({},_reactNative.ViewPropTypes);var StyledToastContainer=(0,_nativeBaseShoutemTheme.connectStyle)('NativeBase.ToastContainer',{},_mapPropsToStyleNames2.default)(ToastContainer);exports.ToastContainer=StyledToastContainer;
+Object.defineProperty(exports,"__esModule",{value:true});exports.ToastContainer=undefined;var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};var _jsxFileName='src/basic/ToastContainer.js';var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();var _react=require('react');var _react2=_interopRequireDefault(_react);var _reactNative=require('react-native');var _nativeBaseShoutemTheme=require('native-base-shoutem-theme');var _mapPropsToStyleNames=require('../utils/mapPropsToStyleNames');var _mapPropsToStyleNames2=_interopRequireDefault(_mapPropsToStyleNames);var _commonColor=require('../theme/variables/commonColor');var _Text=require('./Text');var _Button=require('./Button');var _Toast=require('./Toast');function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _objectWithoutProperties(obj,keys){var target={};for(var i in obj){if(keys.indexOf(i)>=0)continue;if(!Object.prototype.hasOwnProperty.call(obj,i))continue;target[i]=obj[i];}return target;}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call&&(typeof call==="object"||typeof call==="function")?call:self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;}var POSITION={ABSOLUTE:'absolute',BOTTOM:'bottom',TOP:'top'};var ToastContainer=function(_Component){_inherits(ToastContainer,_Component);_createClass(ToastContainer,null,[{key:'show',value:function show(_ref){var config=_objectWithoutProperties(_ref,[]);this.toastInstance._root.showToast({config:config});}},{key:'hide',value:function hide(){if(this.toastInstance._root.getModalState()){this.toastInstance._root.closeToast('functionCall');}}}]);function ToastContainer(props){_classCallCheck(this,ToastContainer);var _this=_possibleConstructorReturn(this,(ToastContainer.__proto__||Object.getPrototypeOf(ToastContainer)).call(this,props));_this.closeModal=function(reason){_this.setState({modalVisible:false});var onClose=_this.state.onClose;if(onClose&&typeof onClose==='function'){onClose(reason);}};_this.state={fadeAnim:new _reactNative.Animated.Value(0),pan:new _reactNative.Animated.ValueXY({x:0,y:0}),keyboardHeight:0,isKeyboardVisible:false,modalVisible:false};_this.keyboardDidHide=_this.keyboardDidHide.bind(_this);_this.keyboardDidShow=_this.keyboardDidShow.bind(_this);_this._panResponder=_reactNative.PanResponder.create({onMoveShouldSetPanResponderCapture:function onMoveShouldSetPanResponderCapture(){return true;},onPanResponderRelease:function onPanResponderRelease(evt,_ref2){var dx=_ref2.dx;if(dx!==0){_reactNative.Animated.timing(_this.state.pan,{toValue:{x:dx,y:0},duration:100,useNativeDriver:false}).start(function(){return _this.closeToast('swipe');});}}});return _this;}_createClass(ToastContainer,[{key:'componentDidMount',value:function componentDidMount(){this.kbDidShow = _reactNative.Keyboard.addListener('keyboardDidShow',this.keyboardDidShow);this.kbDidHide = _reactNative.Keyboard.addListener('keyboardDidHide',this.keyboardDidHide);}},{key:'componentWillUnmount',value:function componentWillUnmount(){this.kbDidShow?.remove();this.kbDidHide?.remove();}},{key:'getToastStyle',value:function getToastStyle(){return{position:POSITION.ABSOLUTE,opacity:this.state.fadeAnim,width:'100%',elevation:9,paddingHorizontal:_reactNative.Platform.OS===_commonColor.PLATFORM.IOS?20:0,top:this.state.position===POSITION.TOP?30:undefined,bottom:this.state.position===POSITION.BOTTOM?this.getTop():undefined};}},{key:'getTop',value:function getTop(){if(_reactNative.Platform.OS===_commonColor.PLATFORM.IOS){if(this.state.isKeyboardVisible){return this.state.keyboardHeight;}return 30;}return 0;}},{key:'getButtonText',value:function getButtonText(buttonText){if(buttonText){if(buttonText.trim().length===0){return undefined;}return buttonText;}return undefined;}},{key:'getModalState',value:function getModalState(){return this.state.modalVisible;}},{key:'keyboardDidHide',value:function keyboardDidHide(){this.setState({keyboardHeight:0,isKeyboardVisible:false});}},{key:'keyboardDidShow',value:function keyboardDidShow(e){this.setState({keyboardHeight:e.endCoordinates.height,isKeyboardVisible:true});}},{key:'showToast',value:function showToast(_ref3){var config=_ref3.config;this.setState({modalVisible:true,text:config.text,buttonText:this.getButtonText(config.buttonText),type:config.type,position:config.position?config.position:POSITION.BOTTOM,supportedOrientations:config.supportedOrientations,style:config.style,buttonTextStyle:config.buttonTextStyle,buttonStyle:config.buttonStyle,textStyle:config.textStyle,onClose:config.onClose,swipeDisabled:config.swipeDisabled||false});if(this.closeTimeout){clearTimeout(this.closeTimeout);}if(config.duration!==0){var duration=config.duration>0?config.duration:1500;this.closeTimeout=setTimeout(this.closeToast.bind(this,'timeout'),duration);}_reactNative.Animated.timing(this.state.fadeAnim,{toValue:1,duration:200,useNativeDriver:false}).start();}},{key:'closeToast',value:function closeToast(reason){var _this2=this;clearTimeout(this.closeTimeout);_reactNative.Animated.timing(this.state.fadeAnim,{toValue:0,duration:200,useNativeDriver:false}).start(function(){_this2.closeModal(reason);_this2.state.pan.setValue({x:0,y:0});});}},{key:'render',value:function render(){var _this3=this;if(this.state.modalVisible){var _state$pan=this.state.pan,x=_state$pan.x,y=_state$pan.y;return _react2.default.createElement(_reactNative.Animated.View,_extends({},this.state.swipeDisabled?{}:this._panResponder.panHandlers,{style:[this.getToastStyle(),{transform:[{translateX:x},{translateY:y}]}],__source:{fileName:_jsxFileName,lineNumber:182}}),_react2.default.createElement(_Toast.Toast,{style:[this.state.style],danger:this.state.type==='danger',success:this.state.type==='success',warning:this.state.type==='warning',__source:{fileName:_jsxFileName,lineNumber:189}},_react2.default.createElement(_Text.Text,{style:this.state.textStyle,__source:{fileName:_jsxFileName,lineNumber:195}},this.state.text),this.state.buttonText&&_react2.default.createElement(_Button.Button,{style:this.state.buttonStyle,onPress:function onPress(){return _this3.closeToast('user');},__source:{fileName:_jsxFileName,lineNumber:197}},_react2.default.createElement(_Text.Text,{style:this.state.buttonTextStyle,__source:{fileName:_jsxFileName,lineNumber:201}},this.state.buttonText))));}return null;}}]);return ToastContainer;}(_react.Component);ToastContainer.propTypes=_extends({},_reactNative.ViewPropTypes);var StyledToastContainer=(0,_nativeBaseShoutemTheme.connectStyle)('NativeBase.ToastContainer',{},_mapPropsToStyleNames2.default)(ToastContainer);exports.ToastContainer=StyledToastContainer;
 //# sourceMappingURL=ToastContainer.js.map
\ No newline at end of file
diff --git a/node_modules/native-base/src/basic/ToastContainer.js b/node_modules/native-base/src/basic/ToastContainer.js
index 4bd57ac..88f1c49 100644
--- a/node_modules/native-base/src/basic/ToastContainer.js
+++ b/node_modules/native-base/src/basic/ToastContainer.js
@@ -59,13 +59,13 @@ class ToastContainer extends Component {
   }
 
   componentDidMount() {
-    Keyboard.addListener('keyboardDidShow', this.keyboardDidShow);
-    Keyboard.addListener('keyboardDidHide', this.keyboardDidHide);
+    this.kbDidShow = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow);
+    this.kbDidHide = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide);
   }
 
   componentWillUnmount() {
-    Keyboard.removeListener('keyboardDidShow', this.keyboardDidShow);
-    Keyboard.removeListener('keyboardDidHide', this.keyboardDidHide);
+    this.kbDidShow?.remove();
+    this.kbDidHide?.remove();
   }
 
   getToastStyle() {

Thanks @claudiozam for the suggestion.

[claudiozam]

@adhip94 thanks for your quick reply. Maybe a more elegant solution is inside the native-base build script.

package.json

  "scripts": {
    "compile": "rm -rf dist/* && babel . --out-dir dist --ignore node_modules,dist --source-maps ",
    "lint": "eslint \"src/**/*.{js, json}\"",
    "transpile": "npm run compile && cp src/basic/Icon/selection.json dist/src/basic/Icon/selection.json && cp src/basic/Icon/NBIcons.json dist/src/basic/Icon",
    "prepublish": "npm run transpile",
    "postinstall": "node addEjectScript.js && opencollective-postinstall",
    "flow": "flow"
  },

[adhip94]

I did not understand, what do we change in the package.json. From what I have seen when doing an npm i, the native-base dist folder is already present.

[claudiozam]

@adhip94 the idea is to compile and generate a new /dist from the source. i don't feel comfortable touching the minified file. Maybe it's time to remove native base from my project.

[wilson208]

@adhip94 that patch worked perfectly, thanks for that!

I'm going to attempt to open a PR with a more permanent fix for this if I have time this weekend, patch-package is a great workaround, but the fact its on a minified file makes me think this will change quite often and will bite me in future.

For me the upgrade to V3 is non-trivial in a fairly complex app so its no on the roadmap right now

[adhip94]

@wilson208 Are they even maintaining v2? I wanted to submit a PR but I doubt they are maintaining v2. Anyways as @claudiozam mentioned previously, I have started replacing all my native-base components with react native components, so I will be removing native-base soon...

[majugurci]

20 days have passed and no one from the core team could give at least some answer. Version 3 looks nice but it's time to say goodbye to NativeBase since support has always been pretty slow.

[adhip94]

@majugurci I have already said bye :) I removed all the native-base components from my app last week and uninstalled native-base as well. I think you might as well close this issue...

[n0mer]

@adhip94 did you switch to react-native-elements or react-native-paper?

[adhip94]

@adhip94 did you switch to react-native-elements or react-native-paper?

Nope, I actually removed native-base completely from my project and I am using default react native components.

[stale[bot]]

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.

[JoseMPersichini]

My workaround to solve the issue is generate a file, for example in /scripts/native-base-solve-error.js

var fs = require('fs');

const baseReplacements = [
    [/Keyboard\.removeListener\('keyboardDidShow', *this\.keyboardDidShow\)/g, `this.kbDidShow?.remove()`],
    [/Keyboard\.removeListener\('keyboardDidHide', *this\.keyboardDidHide\)/g, `this.kbDidHide?.remove()`],
    [/Keyboard\.addListener\('keyboardDidShow', *this\.keyboardDidShow\)/g, `this.kbDidShow = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow)`],
    [/Keyboard\.addListener\('keyboardDidHide', *this\.keyboardDidHide\)/g, `this.kbDidHide = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide)`],
];

const replaces = {
  'node_modules/native-base/src/basic/ToastContainer.js': baseReplacements,
  'node_modules/native-base/dist/src/basic/ToastContainer.js.map':baseReplacements,
  'node_modules/native-base/dist/src/basic/ToastContainer.js': 
    [
        [/(_reactNative\.)?Keyboard\.removeListener\('keyboardDidShow', *this\.keyboardDidShow\)/g, `this.kbDidShow?.remove()`],
        [/(_reactNative\.)?Keyboard\.removeListener\('keyboardDidHide', *this\.keyboardDidHide\)/g, `this.kbDidHide?.remove()`],
        [/(_reactNative\.)?Keyboard\.addListener\('keyboardDidShow', *this\.keyboardDidShow\)/g, `this.kbDidShow = _reactNative.Keyboard.addListener('keyboardDidShow', this.keyboardDidShow)`],
        [/(_reactNative\.)?Keyboard\.addListener\('keyboardDidHide', *this\.keyboardDidHide\)/g, `this.kbDidHide = _reactNative.Keyboard.addListener('keyboardDidHide', this.keyboardDidHide)`],
    ]
};

for(let file of Object.keys(replaces)) {
    fs.readFile(file, 'utf8', function (err, data) {
        if (err) 
            return console.log(err);
        
        var result = data;
        for(var i=0; i<replaces[file].length; i++)     
            result = result.replace(replaces[file][i][0], replaces[file][i][1]);

        fs.writeFile(file, result, 'utf8', function (err) {
            if (err) return console.log(err);
        });
    }
)};

And then use it in your package.json

...
"scripts": {
    "postinstall": "node scripts/native-base-solve-error.js",
    ...
}
...

So after executing yarn install the script in package.json modifies the three files which uses removeListener.

My environment: native-base 2.15.2 and react-native 0.66.0

[stale[bot]]

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.

[rctay]

Hi, I ran into this as well, but when I was running tests. This issue popped up because of the use of <Root> from native-base. Here's an alternative fix that doesn't require patching node_modules. Place this in the test file where you are seeing the error:

In TypeScript:

jest.mock('native-base', () => {
  const library = jest.requireActual('native-base');
  const { View } = library;
  const DummyRoot: React.FC<PropsWithChildren<void>> = ({ children }) => {
    return <View>{children}</View>;
  };
  return {
    ...library,
    Root: DummyRoot,
  };
});

In JavaScript:

jest.mock('native-base', () => {
  const library = jest.requireActual('native-base');
  const { View } = library;
  const DummyRoot = ({ children }) => {
    return <View>{children}</View>;
  };
  return {
    ...library,
    Root: DummyRoot,
  };
});

Hope this helps anyone!

[claudiozam]

I migrated my app to https://github.com/react-native-elements/react-native-elements

Also it has a similar component model, similar to [email protected]

No more problems.

[adamalexander]

I agree with @claudiozam. React native elements is more reliable. I'm happy finally be free of Nativebase's issues.