From 2ff660ca6263e9c415fdbd8f40f570fdd27376a6 Mon Sep 17 00:00:00 2001 From: phuocasura Date: Tue, 11 May 2021 03:49:38 +0700 Subject: [PATCH 1/3] disable KeyboardAvoidingView when keyboard is floating --- dist/src/basic/Container.js | 2 +- dist/src/basic/Container.js.map | 2 +- src/basic/Container.js | 128 +++++++++++++------------------- 3 files changed, 52 insertions(+), 80 deletions(-) diff --git a/dist/src/basic/Container.js b/dist/src/basic/Container.js index 71c7c2e73..2a8175070 100644 --- a/dist/src/basic/Container.js +++ b/dist/src/basic/Container.js @@ -1,2 +1,2 @@ -Object.defineProperty(exports,"__esModule",{value:true});exports.Container=undefined;var _extends=Object.assign||function(target){for(var i=1;i {\n const [isFloating, setFloating] = useState(false);\n const windowWidth = Dimensions.get('window').width;\n const onKeyboardWillChangeFrame = event => {\n setFloating(event.endCoordinates.width !== windowWidth);\n };\n\n useEffect(() => {\n Keyboard.addListener('keyboardWillChangeFrame', onKeyboardWillChangeFrame);\n return () => {\n Keyboard.removeListener(\n 'keyboardWillChangeFrame',\n onKeyboardWillChangeFrame\n );\n };\n }, []);\n\n return isFloating;\n};\n\nclass Container extends Component {\n render() {\n if (this.props.noSafeArea) {\n return Platform.OS === 'ios' ? (\n \n {frame => (\n (this._root = c)}\n {...this.props}\n >\n {this.props.children}\n \n )}\n \n ) : (\n \n {frame => (\n (this._root = c)}\n {...this.props}\n >\n {this.props.children}\n \n )}\n \n );\n }\n return Platform.OS === 'ios' ? (\n \n {frame => (\n (this._root = c)}\n {...this.props}\n >\n \n {this.props.children}\n \n \n )}\n \n ) : (\n \n {frame => (\n (this._root = c)}\n {...this.props}\n >\n {this.props.children}\n \n )}\n \n );\n }\n}\n\nContainer.propTypes = {\n ...ViewPropTypes,\n style: PropTypes.oneOfType([\n PropTypes.object,\n PropTypes.number,\n PropTypes.array\n ]),\n noSafeArea: PropTypes.bool\n};\n\nconst StyledContainer = connectStyle(\n 'NativeBase.Container',\n {},\n mapPropsToStyleNames\n)(Container);\n\nexport { StyledContainer as Container };\n"]} \ No newline at end of file +{"version":3,"sources":["../../../src/basic/Container.js"],"names":["Container","state","keyboardFloating","_onKeyboardWillChangeFrame","event","windowWidth","Dimensions","get","width","setState","endCoordinates","keyboardWillChangeFrameListener","Keyboard","addListener","remove","props","noSafeArea","Platform","OS","frame","flex","height","c","_root","children","Component","propTypes","ViewPropTypes","style","PropTypes","oneOfType","object","number","array","bool","StyledContainer","mapPropsToStyleNames"],"mappings":"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","file":"Container.js","sourcesContent":["import React, { Component } from \"react\"\nimport { KeyboardAvoidingView, View, Platform, Keyboard, Dimensions } from \"react-native\"\nimport { SafeAreaView, SafeAreaFrameContext } from \"react-native-safe-area-context\"\nimport PropTypes from \"prop-types\"\nimport { connectStyle } from \"native-base-shoutem-theme\"\n\nimport { ViewPropTypes } from \"../utils\"\nimport mapPropsToStyleNames from \"../utils/mapPropsToStyleNames\"\n\nclass Container extends Component {\n state = {\n keyboardFloating: false,\n }\n componentDidMount() {\n this.keyboardWillChangeFrameListener = Keyboard.addListener(\n \"keyboardWillChangeFrame\",\n this._onKeyboardWillChangeFrame,\n )\n }\n\n componentWillUnmount() {\n this.keyboardWillChangeFrameListener.remove()\n }\n\n _onKeyboardWillChangeFrame = (event) => {\n const windowWidth = Dimensions.get(\"window\").width\n this.setState({\n keyboardFloating: event.endCoordinates.width !== windowWidth,\n })\n }\n render() {\n if (this.props.noSafeArea) {\n return Platform.OS === \"ios\" ? (\n \n {(frame) => (\n (this._root = c)}\n {...this.props}\n >\n {this.props.children}\n \n )}\n \n ) : (\n \n {(frame) => (\n (this._root = c)}\n {...this.props}\n >\n {this.props.children}\n \n )}\n \n )\n }\n return Platform.OS === \"ios\" ? (\n \n {(frame) => (\n (this._root = c)}\n {...this.props}\n >\n \n {this.props.children}\n \n \n )}\n \n ) : (\n \n {(frame) => (\n (this._root = c)}\n {...this.props}\n >\n {this.props.children}\n \n )}\n \n )\n }\n}\n\nContainer.propTypes = {\n ...ViewPropTypes,\n style: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),\n noSafeArea: PropTypes.bool,\n}\n\nconst StyledContainer = connectStyle(\"NativeBase.Container\", {}, mapPropsToStyleNames)(Container)\n\nexport { StyledContainer as Container }\n"]} \ No newline at end of file diff --git a/src/basic/Container.js b/src/basic/Container.js index d36272ff5..e5e973328 100644 --- a/src/basic/Container.js +++ b/src/basic/Container.js @@ -1,56 +1,46 @@ -import React, { Component } from 'react'; -import { - KeyboardAvoidingView, - View, - Platform, - useState, - Dimensions, - useEffect, - Keyboard -} from 'react-native'; -import { - SafeAreaView, - SafeAreaFrameContext -} from 'react-native-safe-area-context'; -import PropTypes from 'prop-types'; -import { connectStyle } from 'native-base-shoutem-theme'; +import React, { Component } from "react" +import { KeyboardAvoidingView, View, Platform, Keyboard, Dimensions } from "react-native" +import { SafeAreaView, SafeAreaFrameContext } from "react-native-safe-area-context" +import PropTypes from "prop-types" +import { connectStyle } from "native-base-shoutem-theme" -import { ViewPropTypes } from '../utils'; -import mapPropsToStyleNames from '../utils/mapPropsToStyleNames'; +import { ViewPropTypes } from "../utils" +import mapPropsToStyleNames from "../utils/mapPropsToStyleNames" -const useIsFloatingKeyboard = () => { - const [isFloating, setFloating] = useState(false); - const windowWidth = Dimensions.get('window').width; - const onKeyboardWillChangeFrame = event => { - setFloating(event.endCoordinates.width !== windowWidth); - }; - - useEffect(() => { - Keyboard.addListener('keyboardWillChangeFrame', onKeyboardWillChangeFrame); - return () => { - Keyboard.removeListener( - 'keyboardWillChangeFrame', - onKeyboardWillChangeFrame - ); - }; - }, []); +class Container extends Component { + state = { + keyboardFloating: false, + } + componentDidMount() { + this.keyboardWillChangeFrameListener = Keyboard.addListener( + "keyboardWillChangeFrame", + this._onKeyboardWillChangeFrame, + ) + } - return isFloating; -}; + componentWillUnmount() { + this.keyboardWillChangeFrameListener.remove() + } -class Container extends Component { + _onKeyboardWillChangeFrame = (event) => { + const windowWidth = Dimensions.get("window").width + this.setState({ + keyboardFloating: event.endCoordinates.width !== windowWidth, + }) + } render() { if (this.props.noSafeArea) { - return Platform.OS === 'ios' ? ( + return Platform.OS === "ios" ? ( - {frame => ( + {(frame) => ( (this._root = c)} + ref={(c) => (this._root = c)} {...this.props} > {this.props.children} @@ -59,38 +49,33 @@ class Container extends Component { ) : ( - {frame => ( + {(frame) => ( (this._root = c)} + ref={(c) => (this._root = c)} {...this.props} > {this.props.children} )} - ); + ) } - return Platform.OS === 'ios' ? ( + return Platform.OS === "ios" ? ( - {frame => ( + {(frame) => ( (this._root = c)} + ref={(c) => (this._root = c)} {...this.props} > - + {this.props.children} @@ -98,42 +83,29 @@ class Container extends Component { ) : ( - {frame => ( + {(frame) => ( (this._root = c)} + ref={(c) => (this._root = c)} {...this.props} > {this.props.children} )} - ); + ) } } Container.propTypes = { ...ViewPropTypes, - style: PropTypes.oneOfType([ - PropTypes.object, - PropTypes.number, - PropTypes.array - ]), - noSafeArea: PropTypes.bool -}; + style: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]), + noSafeArea: PropTypes.bool, +} -const StyledContainer = connectStyle( - 'NativeBase.Container', - {}, - mapPropsToStyleNames -)(Container); +const StyledContainer = connectStyle("NativeBase.Container", {}, mapPropsToStyleNames)(Container) -export { StyledContainer as Container }; +export { StyledContainer as Container } From 1a64d310bf342218dee09e870ce432da26f441f5 Mon Sep 17 00:00:00 2001 From: afonsopbarros Date: Tue, 1 Jun 2021 11:54:20 +0100 Subject: [PATCH 2/3] add back hasBottomTabBar --- dist/src/basic/Container.js | 2 +- dist/src/basic/Container.js.map | 2 +- src/basic/Container.js | 112 ++++++++++++++++++++------------ 3 files changed, 74 insertions(+), 42 deletions(-) diff --git a/dist/src/basic/Container.js b/dist/src/basic/Container.js index 2a8175070..b4d005fcb 100644 --- a/dist/src/basic/Container.js +++ b/dist/src/basic/Container.js @@ -1,2 +1,2 @@ -Object.defineProperty(exports,"__esModule",{value:true});exports.Container=undefined;var _extends=Object.assign||function(target){for(var i=1;i {\n const windowWidth = Dimensions.get(\"window\").width\n this.setState({\n keyboardFloating: event.endCoordinates.width !== windowWidth,\n })\n }\n render() {\n if (this.props.noSafeArea) {\n return Platform.OS === \"ios\" ? (\n \n {(frame) => (\n (this._root = c)}\n {...this.props}\n >\n {this.props.children}\n \n )}\n \n ) : (\n \n {(frame) => (\n (this._root = c)}\n {...this.props}\n >\n {this.props.children}\n \n )}\n \n )\n }\n return Platform.OS === \"ios\" ? (\n \n {(frame) => (\n (this._root = c)}\n {...this.props}\n >\n \n {this.props.children}\n \n \n )}\n \n ) : (\n \n {(frame) => (\n (this._root = c)}\n {...this.props}\n >\n {this.props.children}\n \n )}\n \n )\n }\n}\n\nContainer.propTypes = {\n ...ViewPropTypes,\n style: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),\n noSafeArea: PropTypes.bool,\n}\n\nconst StyledContainer = connectStyle(\"NativeBase.Container\", {}, mapPropsToStyleNames)(Container)\n\nexport { StyledContainer as Container }\n"]} \ No newline at end of file +{"version":3,"sources":["../../../src/basic/Container.js"],"names":["Container","state","keyboardFloating","_onKeyboardWillChangeFrame","windowWidth","Dimensions","get","width","setState","event","endCoordinates","keyboardWillChangeFrameListener","Keyboard","addListener","remove","props","noSafeArea","Platform","OS","flex","height","frame","_root","c","children","hasBottomTabBar","Component","propTypes","ViewPropTypes","style","PropTypes","oneOfType","object","number","array","bool","StyledContainer","mapPropsToStyleNames"],"mappings":"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","file":"Container.js","sourcesContent":["import React, { Component } from 'react';\nimport {\n KeyboardAvoidingView,\n View,\n Platform,\n Keyboard,\n Dimensions\n} from 'react-native';\nimport {\n SafeAreaView,\n SafeAreaFrameContext\n} from 'react-native-safe-area-context';\nimport PropTypes from 'prop-types';\nimport { connectStyle } from 'native-base-shoutem-theme';\n\nimport { ViewPropTypes } from '../utils';\nimport mapPropsToStyleNames from '../utils/mapPropsToStyleNames';\n\nclass Container extends Component {\n state = {\n keyboardFloating: false\n };\n componentDidMount() {\n this.keyboardWillChangeFrameListener = Keyboard.addListener(\n 'keyboardWillChangeFrame',\n this._onKeyboardWillChangeFrame\n );\n }\n\n componentWillUnmount() {\n this.keyboardWillChangeFrameListener.remove();\n }\n\n _onKeyboardWillChangeFrame = event => {\n const windowWidth = Dimensions.get('window').width;\n this.setState({\n keyboardFloating: event.endCoordinates.width !== windowWidth\n });\n };\n render() {\n if (this.props.noSafeArea) {\n return Platform.OS === 'ios' ? (\n \n {frame => (\n (this._root = c)}\n {...this.props}\n >\n {this.props.children}\n \n )}\n \n ) : (\n \n {frame => (\n (this._root = c)}\n {...this.props}\n >\n {this.props.children}\n \n )}\n \n );\n }\n return Platform.OS === 'ios' ? (\n \n {frame => (\n (this._root = c)}\n {...this.props}\n >\n \n {this.props.children}\n \n \n )}\n \n ) : (\n \n {frame => (\n (this._root = c)}\n {...this.props}\n >\n {this.props.children}\n \n )}\n \n );\n }\n}\n\nContainer.propTypes = {\n ...ViewPropTypes,\n style: PropTypes.oneOfType([\n PropTypes.object,\n PropTypes.number,\n PropTypes.array\n ]),\n noSafeArea: PropTypes.bool,\n hasBottomTabBar: PropTypes.bool\n};\n\nconst StyledContainer = connectStyle(\n 'NativeBase.Container',\n {},\n mapPropsToStyleNames\n)(Container);\n\nexport { StyledContainer as Container };\n"]} \ No newline at end of file diff --git a/src/basic/Container.js b/src/basic/Container.js index e5e973328..c6b90ecdc 100644 --- a/src/basic/Container.js +++ b/src/basic/Container.js @@ -1,46 +1,55 @@ -import React, { Component } from "react" -import { KeyboardAvoidingView, View, Platform, Keyboard, Dimensions } from "react-native" -import { SafeAreaView, SafeAreaFrameContext } from "react-native-safe-area-context" -import PropTypes from "prop-types" -import { connectStyle } from "native-base-shoutem-theme" +import React, { Component } from 'react'; +import { + KeyboardAvoidingView, + View, + Platform, + Keyboard, + Dimensions +} from 'react-native'; +import { + SafeAreaView, + SafeAreaFrameContext +} from 'react-native-safe-area-context'; +import PropTypes from 'prop-types'; +import { connectStyle } from 'native-base-shoutem-theme'; -import { ViewPropTypes } from "../utils" -import mapPropsToStyleNames from "../utils/mapPropsToStyleNames" +import { ViewPropTypes } from '../utils'; +import mapPropsToStyleNames from '../utils/mapPropsToStyleNames'; class Container extends Component { state = { - keyboardFloating: false, - } + keyboardFloating: false + }; componentDidMount() { this.keyboardWillChangeFrameListener = Keyboard.addListener( - "keyboardWillChangeFrame", - this._onKeyboardWillChangeFrame, - ) + 'keyboardWillChangeFrame', + this._onKeyboardWillChangeFrame + ); } componentWillUnmount() { - this.keyboardWillChangeFrameListener.remove() + this.keyboardWillChangeFrameListener.remove(); } - _onKeyboardWillChangeFrame = (event) => { - const windowWidth = Dimensions.get("window").width + _onKeyboardWillChangeFrame = event => { + const windowWidth = Dimensions.get('window').width; this.setState({ - keyboardFloating: event.endCoordinates.width !== windowWidth, - }) - } + keyboardFloating: event.endCoordinates.width !== windowWidth + }); + }; render() { if (this.props.noSafeArea) { - return Platform.OS === "ios" ? ( + return Platform.OS === 'ios' ? ( - {(frame) => ( + {frame => ( (this._root = c)} + ref={c => (this._root = c)} {...this.props} > {this.props.children} @@ -49,33 +58,42 @@ class Container extends Component { ) : ( - {(frame) => ( + {frame => ( (this._root = c)} + ref={c => (this._root = c)} {...this.props} > {this.props.children} )} - ) + ); } - return Platform.OS === "ios" ? ( + return Platform.OS === 'ios' ? ( - {(frame) => ( + {frame => ( (this._root = c)} + edges={ + this.props.hasBottomTabBar + ? ['right', 'left', 'top'] + : ['bottom', 'left', 'right', 'top'] + } + ref={c => (this._root = c)} {...this.props} > - + {this.props.children} @@ -83,29 +101,43 @@ class Container extends Component { ) : ( - {(frame) => ( + {frame => ( (this._root = c)} + ref={c => (this._root = c)} {...this.props} > {this.props.children} )} - ) + ); } } Container.propTypes = { ...ViewPropTypes, - style: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]), + style: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.number, + PropTypes.array + ]), noSafeArea: PropTypes.bool, -} + hasBottomTabBar: PropTypes.bool +}; -const StyledContainer = connectStyle("NativeBase.Container", {}, mapPropsToStyleNames)(Container) +const StyledContainer = connectStyle( + 'NativeBase.Container', + {}, + mapPropsToStyleNames +)(Container); -export { StyledContainer as Container } +export { StyledContainer as Container }; From 926b8bf10fa93534e119a238438f61f3301ca362 Mon Sep 17 00:00:00 2001 From: afonsopbarros Date: Mon, 7 Jun 2021 17:04:55 +0100 Subject: [PATCH 3/3] remove fixed height in Container --- dist/src/basic/Container.js | 2 +- dist/src/basic/Container.js.map | 2 +- src/basic/Container.js | 20 ++++++++------------ 3 files changed, 10 insertions(+), 14 deletions(-) diff --git a/dist/src/basic/Container.js b/dist/src/basic/Container.js index b4d005fcb..fead43b0e 100644 --- a/dist/src/basic/Container.js +++ b/dist/src/basic/Container.js @@ -1,2 +1,2 @@ -Object.defineProperty(exports,"__esModule",{value:true});exports.Container=undefined;var _extends=Object.assign||function(target){for(var i=1;i {\n const windowWidth = Dimensions.get('window').width;\n this.setState({\n keyboardFloating: event.endCoordinates.width !== windowWidth\n });\n };\n render() {\n if (this.props.noSafeArea) {\n return Platform.OS === 'ios' ? (\n \n {frame => (\n (this._root = c)}\n {...this.props}\n >\n {this.props.children}\n \n )}\n \n ) : (\n \n {frame => (\n (this._root = c)}\n {...this.props}\n >\n {this.props.children}\n \n )}\n \n );\n }\n return Platform.OS === 'ios' ? (\n \n {frame => (\n (this._root = c)}\n {...this.props}\n >\n \n {this.props.children}\n \n \n )}\n \n ) : (\n \n {frame => (\n (this._root = c)}\n {...this.props}\n >\n {this.props.children}\n \n )}\n \n );\n }\n}\n\nContainer.propTypes = {\n ...ViewPropTypes,\n style: PropTypes.oneOfType([\n PropTypes.object,\n PropTypes.number,\n PropTypes.array\n ]),\n noSafeArea: PropTypes.bool,\n hasBottomTabBar: PropTypes.bool\n};\n\nconst StyledContainer = connectStyle(\n 'NativeBase.Container',\n {},\n mapPropsToStyleNames\n)(Container);\n\nexport { StyledContainer as Container };\n"]} \ No newline at end of file +{"version":3,"sources":["../../../src/basic/Container.js"],"names":["Container","state","keyboardFloating","_onKeyboardWillChangeFrame","windowWidth","Dimensions","get","width","setState","event","endCoordinates","keyboardWillChangeFrameListener","Keyboard","addListener","remove","props","noSafeArea","Platform","OS","flex","_root","c","children","hasBottomTabBar","Component","propTypes","ViewPropTypes","style","PropTypes","oneOfType","object","number","array","bool","StyledContainer","mapPropsToStyleNames"],"mappings":"61BAAA,4B,2CACA,yCAOA,0EAIA,qC,mDACA,iEAEA,+BACA,mE,68BAEMA,U,uZACJC,K,CAAQ,CACNC,iBAAkB,KADZ,C,OAcRC,0B,CAA6B,eAAS,CACpC,GAAMC,aAAcC,wBAAWC,GAAX,CAAe,QAAf,EAAyBC,KAA7C,CACA,MAAKC,QAAL,CAAc,CACZN,iBAAkBO,MAAMC,cAAN,CAAqBH,KAArB,GAA+BH,WADrC,CAAd,EAGD,C,mIAhBmB,CAClB,KAAKO,+BAAL,CAAuCC,sBAASC,WAAT,CACrC,yBADqC,CAErC,KAAKV,0BAFgC,CAAvC,CAID,C,mEAEsB,CACrB,KAAKQ,+BAAL,CAAqCG,MAArC,GACD,C,uCAQQ,iBACP,GAAI,KAAKC,KAAL,CAAWC,UAAf,CAA2B,CACzB,MAAOC,uBAASC,EAAT,GAAgB,KAAhB,CACL,8BAAC,gDAAD,CAAsB,QAAtB,kDACG,iBACC,+BAAC,iCAAD,WACE,SAAU,SADZ,CAEE,QAAS,CAAC,OAAKjB,KAAL,CAAWC,gBAFvB,CAGE,MAAO,CACLiB,KAAM,CADD,CAHT,CAME,IAAK,sBAAM,QAAKC,KAAL,CAAaC,CAAnB,EANP,EAOM,OAAKN,KAPX,mDASG,OAAKA,KAAL,CAAWO,QATd,CADD,EADH,CADK,CAiBL,8BAAC,gDAAD,CAAsB,QAAtB,kDACG,iBACC,+BAAC,iBAAD,WACE,MAAO,CACLH,KAAM,CADD,CADT,CAIE,IAAK,sBAAM,QAAKC,KAAL,CAAaC,CAAnB,EAJP,EAKM,OAAKN,KALX,mDAOG,OAAKA,KAAL,CAAWO,QAPd,CADD,EADH,CAjBF,CA+BD,CACD,MAAOL,uBAASC,EAAT,GAAgB,KAAhB,CACL,8BAAC,gDAAD,CAAsB,QAAtB,kDACG,iBACC,+BAAC,wCAAD,WACE,MAAO,CACLC,KAAM,CADD,CADT,CAIE,MACE,OAAKJ,KAAL,CAAWQ,eAAX,CACI,CAAC,OAAD,CAAU,MAAV,CAAkB,KAAlB,CADJ,CAEI,CAAC,QAAD,CAAW,MAAX,CAAmB,OAAnB,CAA4B,KAA5B,CAPR,CASE,IAAK,sBAAM,QAAKH,KAAL,CAAaC,CAAnB,EATP,EAUM,OAAKN,KAVX,mDAYE,8BAAC,iCAAD,EACE,QAAS,CAAC,OAAKd,KAAL,CAAWC,gBADvB,CAEE,SAAU,SAFZ,CAGE,MAAO,CAAEiB,KAAM,CAAR,CAHT,iDAKG,OAAKJ,KAAL,CAAWO,QALd,CAZF,CADD,EADH,CADK,CA0BL,8BAAC,gDAAD,CAAsB,QAAtB,mDACG,iBACC,+BAAC,wCAAD,WACE,MACE,OAAKP,KAAL,CAAWQ,eAAX,CACI,CAAC,OAAD,CAAU,MAAV,CAAkB,KAAlB,CADJ,CAEI,CAAC,QAAD,CAAW,MAAX,CAAmB,OAAnB,CAA4B,KAA5B,CAJR,CAME,MAAO,CACLJ,KAAM,CADD,CANT,CASE,IAAK,sBAAM,QAAKC,KAAL,CAAaC,CAAnB,EATP,EAUM,OAAKN,KAVX,oDAYG,OAAKA,KAAL,CAAWO,QAZd,CADD,EADH,CA1BF,CA6CD,C,uBApGqBE,gB,EAuGxBxB,UAAUyB,SAAV,aACKC,oBADL,EAEEC,MAAOC,oBAAUC,SAAV,CAAoB,CACzBD,oBAAUE,MADe,CAEzBF,oBAAUG,MAFe,CAGzBH,oBAAUI,KAHe,CAApB,CAFT,CAOEhB,WAAYY,oBAAUK,IAPxB,CAQEV,gBAAiBK,oBAAUK,IAR7B,GAWA,GAAMC,iBAAkB,yCACtB,sBADsB,CAEtB,EAFsB,CAGtBC,8BAHsB,EAItBnC,SAJsB,CAAxB,C,QAM4BA,S,CAAnBkC,e","file":"Container.js","sourcesContent":["import React, { Component } from 'react';\nimport {\n KeyboardAvoidingView,\n View,\n Platform,\n Keyboard,\n Dimensions\n} from 'react-native';\nimport {\n SafeAreaView,\n SafeAreaFrameContext\n} from 'react-native-safe-area-context';\nimport PropTypes from 'prop-types';\nimport { connectStyle } from 'native-base-shoutem-theme';\n\nimport { ViewPropTypes } from '../utils';\nimport mapPropsToStyleNames from '../utils/mapPropsToStyleNames';\n\nclass Container extends Component {\n state = {\n keyboardFloating: false\n };\n componentDidMount() {\n this.keyboardWillChangeFrameListener = Keyboard.addListener(\n 'keyboardWillChangeFrame',\n this._onKeyboardWillChangeFrame\n );\n }\n\n componentWillUnmount() {\n this.keyboardWillChangeFrameListener.remove();\n }\n\n _onKeyboardWillChangeFrame = event => {\n const windowWidth = Dimensions.get('window').width;\n this.setState({\n keyboardFloating: event.endCoordinates.width !== windowWidth\n });\n };\n render() {\n if (this.props.noSafeArea) {\n return Platform.OS === 'ios' ? (\n \n {() => (\n (this._root = c)}\n {...this.props}\n >\n {this.props.children}\n \n )}\n \n ) : (\n \n {() => (\n (this._root = c)}\n {...this.props}\n >\n {this.props.children}\n \n )}\n \n );\n }\n return Platform.OS === 'ios' ? (\n \n {() => (\n (this._root = c)}\n {...this.props}\n >\n \n {this.props.children}\n \n \n )}\n \n ) : (\n \n {() => (\n (this._root = c)}\n {...this.props}\n >\n {this.props.children}\n \n )}\n \n );\n }\n}\n\nContainer.propTypes = {\n ...ViewPropTypes,\n style: PropTypes.oneOfType([\n PropTypes.object,\n PropTypes.number,\n PropTypes.array\n ]),\n noSafeArea: PropTypes.bool,\n hasBottomTabBar: PropTypes.bool\n};\n\nconst StyledContainer = connectStyle(\n 'NativeBase.Container',\n {},\n mapPropsToStyleNames\n)(Container);\n\nexport { StyledContainer as Container };\n"]} \ No newline at end of file diff --git a/src/basic/Container.js b/src/basic/Container.js index c6b90ecdc..a0547f401 100644 --- a/src/basic/Container.js +++ b/src/basic/Container.js @@ -41,13 +41,12 @@ class Container extends Component { if (this.props.noSafeArea) { return Platform.OS === 'ios' ? ( - {frame => ( + {() => ( (this._root = c)} {...this.props} @@ -58,11 +57,10 @@ class Container extends Component { ) : ( - {frame => ( + {() => ( (this._root = c)} {...this.props} @@ -75,11 +73,10 @@ class Container extends Component { } return Platform.OS === 'ios' ? ( - {frame => ( + {() => ( ) : ( - {frame => ( + {() => ( (this._root = c)} {...this.props}