feat: add shadowStyle prop

README.md

@@ -28,6 +28,7 @@ Now we need to install [react-native-svg](https://github.com/react-native-svg/re
 | renderCircle       | ({ routeName, selectedTab, navigate }) => JSX.Element | Yes       | Function that returns a React element to display as the center tab item |
 | circleWidth        | Number                                                | No        | Customize width of the center tab item. Minimum is 50px and Maximum is 60px 
 | style              | ViewStyle                                             | No        | Styling for container view                                        |
+| shadowStyle        | ViewStyle                                             | No        | Styling for shadow view                                           |
 | width              | Number                                                | No        | Customize width for container view                                |
 | height             | Number                                                | No        | Customize height for container view, Minimum is 50px and Maximum is 90px |
 | borderTopLeftRight | Boolean                                               | No        | Border radius top left and top right of container view            |

example/src/App.tsx

@@ -1,7 +1,13 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { NavigationContainer } from '@react-navigation/native';
 import React, { useRef, useState } from 'react';
-import { StatusBar, TouchableOpacity, View } from 'react-native';
+import {
+  Button,
+  LogBox,
+  StatusBar,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import {
   CurvedBottomBar,
   ICurvedBottomBarRef,
@@ -10,14 +16,40 @@ import Ionicons from 'react-native-vector-icons/Ionicons';
 import { StyleSheet } from 'react-native-size-scaling';
 
 StatusBar.setBarStyle('dark-content');
+LogBox.ignoreAllLogs();
+
+type voidType = () => void;
 
-const RenderScreen = () => {
-  return <View style={styles.screen} />;
+const RenderScreen = ({
+  onDown,
+  onUp,
+  onLeft,
+  onCenter,
+  onRight,
+}: {
+  onDown: voidType;
+  onUp: voidType;
+  onLeft: voidType;
+  onCenter: voidType;
+  onRight: voidType;
+}) => {
+  return (
+    <View style={styles.screen}>
+      <Button title="Mode Curved Down" onPress={onDown} />
+      <Button title="Mode Curved Up" onPress={onUp} />
+      <Button title="Position Left" onPress={onLeft} />
+      <Button title="Position Center" onPress={onCenter} />
+      <Button title="Position Right" onPress={onRight} />
+    </View>
+  );
 };
 
 const ThemeScreen = () => {
   const ref = useRef<ICurvedBottomBarRef>(null);
-  const [type] = useState<'DOWN' | 'UP'>('DOWN');
+  const [type, setType] = useState<'DOWN' | 'UP'>('DOWN');
+  const [position, setposition] = useState<'LEFT' | 'CENTER' | 'RIGHT'>(
+    'CENTER'
+  );
 
   const _renderIcon = (routeName: string, selectedTab: string) => {
     let icon = '';
@@ -46,12 +78,28 @@ const ThemeScreen = () => {
     );
   };
 
+  const onDown = () => {
+    setType('DOWN');
+  };
+  const onUp = () => {
+    setType('UP');
+  };
+  const onLeft = () => {
+    setposition('LEFT');
+  };
+  const onCenter = () => {
+    setposition('CENTER');
+  };
+  const onRight = () => {
+    setposition('RIGHT');
+  };
+
   return (
     <View style={styles.container}>
       <CurvedBottomBar.Navigator
         ref={ref}
         type={type}
-        circlePosition={'CENTER'}
+        circlePosition={position}
         height={55}
         circleWidth={50}
         bgColor="white"
@@ -85,26 +133,66 @@ const ThemeScreen = () => {
         <CurvedBottomBar.Screen
           name="title1"
           position="LEFT"
-          component={RenderScreen}
+          component={() => (
+            <RenderScreen
+              onDown={onDown}
+              onUp={onUp}
+              onLeft={onLeft}
+              onCenter={onCenter}
+              onRight={onRight}
+            />
+          )}
         />
         <CurvedBottomBar.Screen
           name="title2"
-          component={RenderScreen}
+          component={() => (
+            <RenderScreen
+              onDown={onDown}
+              onUp={onUp}
+              onLeft={onLeft}
+              onCenter={onCenter}
+              onRight={onRight}
+            />
+          )}
           position="LEFT"
         />
         <CurvedBottomBar.Screen
           name="title0"
-          component={RenderScreen}
+          component={() => (
+            <RenderScreen
+              onDown={onDown}
+              onUp={onUp}
+              onLeft={onLeft}
+              onCenter={onCenter}
+              onRight={onRight}
+            />
+          )}
           position="CIRCLE"
         />
         <CurvedBottomBar.Screen
           name="title3"
           position="RIGHT"
-          component={RenderScreen}
+          component={() => (
+            <RenderScreen
+              onDown={onDown}
+              onUp={onUp}
+              onLeft={onLeft}
+              onCenter={onCenter}
+              onRight={onRight}
+            />
+          )}
         />
         <CurvedBottomBar.Screen
           name="title4"
-          component={RenderScreen}
+          component={() => (
+            <RenderScreen
+              onDown={onDown}
+              onUp={onUp}
+              onLeft={onLeft}
+              onCenter={onCenter}
+              onRight={onRight}
+            />
+          )}
           position="RIGHT"
         />
       </CurvedBottomBar.Navigator>
@@ -177,5 +265,6 @@ const styles = StyleSheet.create({
   screen: {
     backgroundColor: '#BFEFFF',
     flex: 1,
+    justifyContent: 'center',
   },
 });

src/CurvedBottomBar/components/BottomBarView/index.tsx

@@ -38,6 +38,7 @@ const BottomBarComponent: (
       tabBar,
       renderCircle,
       borderTopLeftRight = false,
+      shadowStyle = styles.shadow,
     } = props;
 
     const [itemLeft, setItemLeft] = useState<any[]>([]);
@@ -231,7 +232,7 @@ const BottomBarComponent: (
 
       return (
         <View style={[styles.container, style]}>
-          <CurvedBottomBarView style={styles.shadow}>
+          <CurvedBottomBarView style={shadowStyle || {}}>
             <Svg
               width={maxWidth}
               height={

src/CurvedBottomBar/components/BottomBarView/model.ts

@@ -36,6 +36,7 @@ interface Props {
   type?: 'DOWN' | 'UP';
   circlePosition?: 'CENTER' | 'LEFT' | 'RIGHT';
   style?: StyleProp<ViewStyle>;
+  shadowStyle?: StyleProp<ViewStyle>;
   width?: number;
   height?: Range<50, 91>;
   borderTopLeftRight?: boolean;