Whole style is almost re-written and bug all fixes. Stable version is alive

Author: kuraydev

example/App.js

@@ -1,6 +1,8 @@
-import React, { Component, Fragment } from "react";
-import { Text, StatusBar, ImageBackground } from "react-native";
-import { BottomMenu, Item } from "react-native-bottom-menu";
+import React, { Component } from "react";
+import { Text, StatusBar, SafeAreaView, ImageBackground } from "react-native";
+// import { BottomMenu, Item } from "react-native-bottom-menu";
+import BottomMenu from "./lib/src/components/bottomMenu/BottomMenu";
+import Item from "./lib/src/components/item/Item";
 import Androw from "react-native-androw";
 import styles from "./styles/App.style";
 
@@ -14,12 +16,12 @@ class App extends Component {
 
   render() {
     return (
-      <Fragment>
-        <StatusBar barStyle="dark-content" />
-        <ImageBackground
-          style={styles.backgroundStyle}
-          source={require("./assets/Watusi.png")}
-        >
+      <ImageBackground
+        style={styles.backgroundStyle}
+        source={require("./assets/Watusi.png")}
+      >
+        <SafeAreaView style={{ flex: 1 }}>
+          <StatusBar barStyle="dark-content" />
           <Androw style={styles.headerStyle}>
             <Text style={styles.textStyle}>React Native Bottom Menu</Text>
           </Androw>
@@ -57,8 +59,8 @@ class App extends Component {
               onPress={() => this.setState({ isActive: "settings" })}
             />
           </BottomMenu>
-        </ImageBackground>
-      </Fragment>
+        </SafeAreaView>
+      </ImageBackground>
     );
   }
 }

example/ios/Podfile.lock

@@ -81,6 +81,8 @@ PODS:
   - React-RCTWebSocket (0.60.4):
     - React-Core (= 0.60.4)
     - React-fishhook (= 0.60.4)
+  - RNVectorIcons (6.6.0):
+    - React
   - yoga (0.60.4.React)
 
 DEPENDENCIES:
@@ -105,6 +107,7 @@ DEPENDENCIES:
   - React-RCTText (from `../node_modules/react-native/Libraries/Text`)
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - React-RCTWebSocket (from `../node_modules/react-native/Libraries/WebSocket`)
+  - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
   - yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -154,6 +157,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/Libraries/Vibration"
   React-RCTWebSocket:
     :path: "../node_modules/react-native/Libraries/WebSocket"
+  RNVectorIcons:
+    :path: "../node_modules/react-native-vector-icons"
   yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -180,8 +185,9 @@ SPEC CHECKSUMS:
   React-RCTText: e0f224898b13af9aa036ea7cb3d438daa68c1044
   React-RCTVibration: 0bea40cd51bd089bd591a8f74c86e91fdf2666c5
   React-RCTWebSocket: 163873f4cdd5f1058a9483443404fc3801581cb6
+  RNVectorIcons: 0bb4def82230be1333ddaeee9fcba45f0b288ed4
   yoga: c2c050f6ae6e222534760cc82f559b89214b67e2
 
-PODFILE CHECKSUM: e6321daab2a139195c1bcaad4b674c568140b44a
+PODFILE CHECKSUM: 562469ebc095c1495478a8d72e0eaab973986bba
 
 COCOAPODS: 1.7.4

example/ios/example.xcodeproj/project.pbxproj

@@ -8,10 +8,12 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "@freakycoder/react-native-helpers": "0.0.21",
     "react": "16.8.6",
     "react-native": "0.60.4",
     "react-native-androw": "0.0.31",
     "react-native-dynamic-vector-icons": "0.0.4",
+    "react-native-material-ripple": "^0.8.0",
     "react-native-vector-icons": "^6.6.0"
   },
   "devDependencies": {

example/package.json

@@ -1,24 +1,26 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { View } from "react-native";
+import { View, Dimensions } from "react-native";
 import Androw from "react-native-androw";
 import { _container, mainStyle, _shadowStyle } from "./BottomMenu.style";
 
+const { width: ScreenWidth, height: ScreenHeight } = Dimensions.get("window");
+
 class BottomMenu extends Component {
   render() {
     const {
       width,
       height,
-      backgroundColor,
-      shadowColor,
-      shadowStyle,
       styles,
-      children
+      children,
+      shadowStyle,
+      shadowColor,
+      backgroundColor
     } = this.props;
     return (
       <Androw
         style={[
-          styles || _container(height),
+          styles || _container(height, width),
           shadowStyle || _shadowStyle(shadowColor)
         ]}
       >
@@ -38,10 +40,10 @@ BottomMenu.propTypes = {
 };
 
 BottomMenu.defaultProps = {
-  width: null,
-  height: null,
+  height: 75,
   shadowColor: "#000",
-  backgroundColor: "white"
+  backgroundColor: "white",
+  width: ScreenWidth * 0.75
 };
 
 export default BottomMenu;

lib/src/components/bottomMenu/BottomMenu.js

@@ -1,3 +1,8 @@
+import {
+  isIPhoneX,
+  getStatusBarHeight
+} from "@freakycoder/react-native-helpers";
+
 export function _shadowStyle(shadowColor) {
   return {
     shadowRadius: 8,
@@ -14,28 +19,27 @@ export function mainStyle(height, width, backgroundColor) {
   return {
     width,
     height,
-    minWidth: 220,
     paddingTop: 8,
+    paddingLeft: 32,
+    backgroundColor,
+    paddingRight: 32,
     paddingBottom: 8,
-    paddingLeft: 8,
-    paddingRight: 8,
+    position: "absolute",
     flexDirection: "row",
-    justifyContent: "space-evenly",
-    minHeight: 60,
-    backgroundColor,
-    maxWidth: "95%",
     alignItems: "center",
-    justifyContent: "center",
-    borderRadius: height ? height / 2 : 100
+    justifyContent: "space-evenly",
+    borderRadius: height ? height / 2 : 100,
+    bottom: isIPhoneX ? getStatusBarHeight() : 8
   };
 }
 
-export function _container(maxHeight) {
+export function _container(height, width) {
   return {
-    flex: 1,
-    maxHeight: maxHeight,
+    width,
+    height,
+    bottom: 0,
     alignSelf: "center",
-    justifyContent: "flex-end"
+    position: "absolute"
   };
 }
 

lib/src/components/bottomMenu/BottomMenu.style.js

@@ -8,8 +8,8 @@ export function _textStyle(textColor, fontSize) {
 export default {
   container: {
     padding: 8,
-    marginLeft: 3,
-    marginRight: 3,
+    marginLeft: 5,
+    marginRight: 5,
     alignItems: "center",
     alignContent: "center",
     flexDirection: "column",

lib/src/components/item/Item.style.js

@@ -1,6 +1,6 @@
 {
   "name": "react-native-bottom-menu",
-  "version": "0.0.12",
+  "version": "0.1.0",
   "description": "Fully customizable and dynamic Bottom Menu for React Native.",
   "keywords": [
     "bottom",