@bigbinary/neetoui-rn 0.0.82 → 0.0.83

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +28 -0
  2. package/lib/components/ParentView.js +1 -1
  3. package/package.json +3 -1
  4. package/src/components/ParentView.js +15 -8
package/README.md CHANGED
@@ -30,6 +30,34 @@ or
30
30
  npx react-native link
31
31
  ```
32
32
 
33
+ ## Getting Started
34
+
35
+ ## react-native-safe-area-context
36
+
37
+ We are using SafeAreaView from
38
+ [`react-native-safe-area-context`](https://github.com/th3rdwave/react-native-safe-area-context)
39
+ in our `ParentView` component to handle safe area. Follow the instructions under
40
+ `SafeAreaProvider` for the `ParentView` component to work.
41
+
42
+ ### SafeAreaProvider
43
+
44
+ You should add `SafeAreaProvider` in your app root component. You may need to
45
+ add it in other places like the root of modals and routes when using
46
+ [`react-native-screens`](https://github.com/software-mansion/react-native-screens).
47
+
48
+ Note that providers should not be inside a `View` that is animated with
49
+ `Animated` or inside a `ScrollView` since it can cause very frequent updates.
50
+
51
+ #### Example
52
+
53
+ ```js
54
+ import { SafeAreaProvider } from "react-native-safe-area-context";
55
+
56
+ function App() {
57
+ return <SafeAreaProvider>...</SafeAreaProvider>;
58
+ }
59
+ ```
60
+
33
61
  ## Development
34
62
 
35
63
  Install all the dependencies by executing following command.
package/lib/components/ParentView.js CHANGED
@@ -1 +1 @@
1
- var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.ParentView=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _native=require("styled-components/native");var _=require("./");var _excluded=["barStyle","children","backgroundColor","bg"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/ParentView.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var ParentView=function ParentView(_ref){var _ref$barStyle=_ref.barStyle,barStyle=_ref$barStyle===void 0?"light-content":_ref$barStyle,children=_ref.children,backgroundColor=_ref.backgroundColor,bg=_ref.bg,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var newBackgroundColor=backgroundColor||bg||theme.colors.background.parentView;var statusBarColors={default:theme.colors.background.white,"dark-content":theme.colors.background.white,"light-content":theme.colors.background.base};var statusBarColor=statusBarColors[barStyle]||statusBarColors["default"];return _react.default.createElement(_.Container,{flex:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:48,columnNumber:5}},_react.default.createElement(_.Container,{backgroundColor:statusBarColor,__self:_this,__source:{fileName:_jsxFileName,lineNumber:49,columnNumber:7}},_react.default.createElement(_reactNative.SafeAreaView,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:50,columnNumber:9}},_react.default.createElement(_reactNative.StatusBar,{barStyle:barStyle,backgroundColor:statusBarColor,__self:_this,__source:{fileName:_jsxFileName,lineNumber:51,columnNumber:11}}))),_react.default.createElement(_.Container,(0,_extends2.default)({flex:1,backgroundColor:newBackgroundColor},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:54,columnNumber:7}}),children));};exports.ParentView=ParentView;ParentView.propTypes={barStyle:_propTypes.default.string,children:_propTypes.default.node,backgroundColor:_propTypes.default.string,bg:_propTypes.default.string};
1
+ var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.ParentView=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _native=require("styled-components/native");var _reactNativeSafeAreaContext=require("react-native-safe-area-context");var _=require("./");var _excluded=["barStyle","children","backgroundColor","bg","safeAreaViewProps"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/ParentView.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var ParentView=function ParentView(_ref){var _ref$barStyle=_ref.barStyle,barStyle=_ref$barStyle===void 0?"light-content":_ref$barStyle,children=_ref.children,backgroundColor=_ref.backgroundColor,bg=_ref.bg,_ref$safeAreaViewProp=_ref.safeAreaViewProps,safeAreaViewProps=_ref$safeAreaViewProp===void 0?{edges:["top","right","left"]}:_ref$safeAreaViewProp,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var newBackgroundColor=backgroundColor||bg||theme.colors.background.parentView;var statusBarColors={default:theme.colors.background.white,"dark-content":theme.colors.background.white,"light-content":theme.colors.background.base};var statusBarColor=statusBarColors[barStyle]||statusBarColors["default"];return _react.default.createElement(_reactNativeSafeAreaContext.SafeAreaView,(0,_extends2.default)({flex:1},safeAreaViewProps,{style:{backgroundColor:statusBarColor},__self:_this,__source:{fileName:_jsxFileName,lineNumber:51,columnNumber:5}}),_react.default.createElement(_reactNative.StatusBar,{barStyle:barStyle,backgroundColor:statusBarColor,__self:_this,__source:{fileName:_jsxFileName,lineNumber:56,columnNumber:7}}),_react.default.createElement(_.Container,(0,_extends2.default)({flex:1,backgroundColor:newBackgroundColor},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:57,columnNumber:7}}),children));};exports.ParentView=ParentView;ParentView.propTypes={barStyle:_propTypes.default.string,children:_propTypes.default.node,backgroundColor:_propTypes.default.string,bg:_propTypes.default.string,safeAreaViewProps:_propTypes.default.object};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bigbinary/neetoui-rn",
3
- "version": "0.0.82",
3
+ "version": "0.0.83",
4
4
  "main": "lib/index.js",
5
5
  "author": "BigBinary",
6
6
  "license": "MIT",
@@ -40,6 +40,7 @@
40
40
  ]
41
41
  },
42
42
  "peerDependencies": {
43
+ "react-native-safe-area-context": "^3.3.2",
43
44
  "react-native-svg": "*",
44
45
  "react-native-webview": "11.14.4"
45
46
  },
@@ -50,6 +51,7 @@
50
51
  "react-native-pell-rich-editor": "^1.8.6",
51
52
  "react-native-popover-view": "^4.1.0",
52
53
  "react-native-remix-icon": "^0.3.0",
54
+ "react-native-safe-area-context": "^3.3.2",
53
55
  "react-native-switch-toggle": "^2.2.1",
54
56
  "react-native-toast-message": "^2.1.0",
55
57
  "styled-components": "^5.3.3",
package/src/components/ParentView.js CHANGED
@@ -1,7 +1,9 @@
1
1
  import React, { useContext } from "react";
2
- import { SafeAreaView, StatusBar } from "react-native";
2
+ import { StatusBar } from "react-native";
3
3
  import PropTypes from "prop-types";
4
4
  import { ThemeContext } from "styled-components/native";
5
+ import { SafeAreaView } from "react-native-safe-area-context";
6
+
5
7
  import { Container } from "@components";
6
8
 
7
9
  /**
@@ -28,6 +30,7 @@ export const ParentView = ({
28
30
  children,
29
31
  backgroundColor,
30
32
  bg,
33
+ safeAreaViewProps = { edges: ["top", "right", "left"] },
31
34
  ...rest
32
35
  }) => {
33
36
  const theme = useContext(ThemeContext);
@@ -45,16 +48,16 @@ export const ParentView = ({
45
48
  statusBarColors[barStyle] || statusBarColors["default"];
46
49
 
47
50
  return (
48
- <Container flex={1}>
49
- <Container backgroundColor={statusBarColor}>
50
- <SafeAreaView>
51
- <StatusBar barStyle={barStyle} backgroundColor={statusBarColor} />
52
- </SafeAreaView>
53
- </Container>
51
+ <SafeAreaView
52
+ flex={1}
53
+ {...safeAreaViewProps}
54
+ style={{ backgroundColor: statusBarColor }}
55
+ >
56
+ <StatusBar barStyle={barStyle} backgroundColor={statusBarColor} />
54
57
  <Container flex={1} backgroundColor={newBackgroundColor} {...rest}>
55
58
  {children}
56
59
  </Container>
57
- </Container>
60
+ </SafeAreaView>
58
61
  );
59
62
  };
60
63
 
@@ -72,4 +75,8 @@ ParentView.propTypes = {
72
75
  * Sets the background color
73
76
  */
74
77
  bg: PropTypes.string,
78
+ /**
79
+ * Sets the props for SafeAreaView
80
+ */
81
+ safeAreaViewProps: PropTypes.object,
75
82
  };