hoaphantn7604 / react-native-curved-bottom-bar

A high performance, beautiful and fully customizable curved bottom navigation bar for React Native.
MIT License
476 stars 98 forks source link

Elevation??? #44

Closed Jamal-ReachFirst closed 1 year ago

Jamal-ReachFirst commented 2 years ago

Unable to add elevation or shadow to bottom tab bar, I don't want to add stroke.

Is there anyway to add shadow to its top side on android.

hoaphantn7604 commented 2 years ago

Hi @Jamal-ReachFirst , I’m working on it.

Jamal-ReachFirst commented 2 years ago

Hi @Jamal-ReachFirst , I’m working on it.

I am using react-native-drop-shadow to apply shadow.

Make some changes in react-native-curved-bottom-bar:

import DropShadow from "react-native-drop-shadow";

<DropShadow
    style={{
      shadowColor: "#DDDDDD",
      shadowOffset: {
        width: 0,
        height: 0,
      },
      shadowOpacity: 1,
      shadowRadius: 5,
    }}
  >
      <SVG width={maxWidth} height={height + (type === 'DOWN' ? 0 : 30)}>
        <PATH
          fill={bgColor}
          stroke="#DDDDDD"
          strokeWidth={strokeWidth}
          {...{ d }}
        />
      </SVG>
  </DropShadow>

Thanks.

hoaphantn7604 commented 1 year ago

Hi @Jamal-ReachFirst , I’m working on it.

I am using react-native-drop-shadow to apply shadow.

Make some changes in react-native-curved-bottom-bar:

import DropShadow from "react-native-drop-shadow";

<DropShadow
    style={{
      shadowColor: "#DDDDDD",
      shadowOffset: {
        width: 0,
        height: 0,
      },
      shadowOpacity: 1,
      shadowRadius: 5,
    }}
  >
      <SVG width={maxWidth} height={height + (type === 'DOWN' ? 0 : 30)}>
        <PATH
          fill={bgColor}
          stroke="#DDDDDD"
          strokeWidth={strokeWidth}
          {...{ d }}
        />
      </SVG>
  </DropShadow>

Thanks.

Thank you very helpful.

hoaphantn7604 commented 1 year ago

hi All, Top shadow do not working on Android. I'm find solutions.

Jamal-ReachFirst commented 1 year ago

hi All, Top shadow do not working on Android. I'm find solutions.

What is the solution, when are you going to push it to this package?

BillDelvin commented 1 year ago

hi All, Top shadow do not working on Android. I'm find solutions.

can I know what is the solution ?

Jamal-ReachFirst commented 1 year ago

react-native-drop-shadow

react-native-drop-shadow use this

BillDelvin commented 1 year ago

did you have example code for reference ?

Jamal-ReachFirst commented 1 year ago

did you have example code for reference ?

As shown here

import DropShadow from "react-native-drop-shadow";

<DropShadow
    style={{
      shadowColor: "#DDDDDD",
      shadowOffset: {
        width: 0,
        height: 0,
      },
      shadowOpacity: 1,
      shadowRadius: 5,
    }}
  >
      // child component
  </DropShadow>
hoaphantn7604 commented 1 year ago

hi All, This issue is resolved. Please install version 3.1.0 Later re-build app. add shadow (9fb40da)

Jamal-ReachFirst commented 1 year ago

hi All, This issue is resolved. Please install version 3.1.0 Later re-build app. add shadow (9fb40da)

@hoaphantn7604 Thanks for your efforts and hard work, the shadow is working now but I am unable to change the shadow properties (no method/prop provided to override the existing shadow style).

I am manually changing the shadow style inside react-native-curved-bottom-bar/src/CurvedBottomBar/Components/BottomBarView/styles.ts

shadow: {
    shadowColor: '#DDDDDD',
    shadowOffset: {
      width: 0,
      height: 0,
    },
    shadowOpacity: 1,
    shadowRadius: 5,
  },

Can you please provide a method/prop to override this style??

hoaphantn7604 commented 1 year ago

hi All, This issue is resolved. Please install version 3.1.0 Later re-build app. add shadow (9fb40da)

@hoaphantn7604 Thanks for your efforts and hard work, the shadow is working now but I am unable to change the shadow properties (no method/prop provided to override the existing shadow style).

I am manually changing the shadow style inside react-native-curved-bottom-bar/src/CurvedBottomBar/Components/BottomBarView/styles.ts

shadow: {
    shadowColor: '#DDDDDD',
    shadowOffset: {
      width: 0,
      height: 0,
    },
    shadowOpacity: 1,
    shadowRadius: 5,
  },

Can you please provide a method/prop to override this style??

This issue is resolved. Install new version. You can use shadowStyle props.

ecartersupport commented 3 months ago

It's not working in Android. It's not showing any shadow