Implementing custom bottom tab bar curved outcrop in React native - react-native

What I need
What I have
I'm struggling to create the smooth blend curve at the intersection of the outcropping and the bottom bar. I found examples of inset curves but I those are not helpful in this case.
What can I do to achieve that effect? To be clear, I am talking about the smooth curve at the active tab element and the navigation bar and not about the bottom left and right radius of the navigation bar.
EDIT: added more info and marked images for clarity.

Add following Radius to your bottom navbar main view
borderBottomLeftRadius:10,
borderBottomRightRadius:10,

Related

Bottom Navigation Bar with ViewPager vs Navgraph

I am working on Bottom Navigation bar using fragment. What is the difference if we use bottom navigation bar with View Pager or Nav Graph?
il explain in a very easy way to understand
Nav graph is way for developer to connect fragments, before this way wasnt available in android, we used to be able to do only through code, think of nav graph as a enlarged google maps preview of your city. Below screenshot
Bottom navigation (highlighted in orange)is a navigation between your fragments
View Pager(highlighted in red) is a way to have to different parts in one fragment, for example in my news fragment i have crypto news and saved news.
here googles tutorial on it if your wanna have a deeper look https://developer.android.com/guide/navigation/navigation-getting-started

How to create a bottom tab bar with complex shapes in react native

I would like to achieve a specific view shape for my bottom navigation in my react-native project. It's a rectangle shape with a center circle shape, with the circle a little bit suspended from the rectangle and also intersecting the rectangle. Here is the mockup:
I think react native reanimated library give you a big help. check this example https://github.com/software-mansion/react-native-reanimated/blob/master/Example/src/AnimatedTabBarExample.js

Xamarin forms implement bottom bar with transparent cutout

How do I implement following bottom bar in xamarin.forms. Is there any way to create the bottom bar rather than using .png images? (for the camera we can use the button image)
Please note the transparent space between the bottom bar and camera image.
Thanks

React-native-navigation tab bar center circle icon

How do I make the tab bar in the center of the circle with a custom icon like this image?
I am using react-native-navigation.
android overflow is no effect,but you can use position, you can make like that.
https://github.com/wuyunqiang/RNApp

Curved scrollbar in ScrollView on Android Wear 2.0

Is it possible to have a curved scrollbar like on WearableRecyclerView on ScrollView? How is it done?
Here is a reference to get you started.
To create a curved layout for scrollable items in your wearable app:
Use WearableRecyclerView as your main container in the relevant XML layout.
Set the setEdgeItemsCenteringEnabled(boolean) method to true. This will align the first and last items on the list vertically
centered on the screen.
Use the WearableRecyclerView.setLayoutManager() method to set layout of the items on the screen.
If you explore the document, you will be able to get in touch with the code snippet for customization of the scrolling.
For Circular Scrolling Gesture:
By default, circular scrolling is disabled in the
WearableRecyclerView. If you want to enable a circular
scrolling gesture in your child view, use the WearableRecyclerView’s
setCircularScrollingGestureEnabled() method.