wave or curve effect in bottom tab react native - javascript

I'm new to react-native and I'm trying to make the bottom tabs with a custom style. I have to achieve something like this ->
I can only do a basic structure by styling it with react-native-bottom-tabs
this is my result so far->
but I can't get it, since the library I'm using, rn-wave-bottom-bar, is not very flexible with style changes and I would need some idea or help please!!!
React-Native 0.70.6
react => 18.1.0
Thank you

Related

Can I use libraries like "Tilt.js" on Vue?

I'm building an app using Vue(Nuxt) and Tailwind. I have a component which is named "game container" and I want this component to have on hover tilt effect. So, after a little search, I found the Tilt.js library and wanted to use it. But didn't find anything about its implementation. So, is it possible to use Tilt.js on Vue, if it's possible how?

Can you create Container Transforms (shared element transitions) on Ionic page navigation?

What I mean with "Container Transform", is that for example when I click on a FAB, that FAB should grow and create the new page.
You can check out an example in the official material design guidelines, or in the android docs.
I know that this is doable with a single page, but I would really like to do this in cooperation with the router.
Is there any way to do this using a plugin, or are there any libraries that can do that?

create Carousel in React Native like example image

I want to create slider in carousel in react native like the example image below, Is there any library out there or some tutorial to make like the example image ?
Or can someone write a part of code to help me write such a slider?
can i write this carousel with FlatList?
You can write your own slider with ScrollView or FastList.
Check this tutorial to understand the basics of creating a carousel with ScrollView https://blog.logicwind.com/carousel-using-react-native-scrollview/
Also, you could use react-native-snap-carousel library which offers many features and customizations.

How to build stackable cards in React with react-swipe-card?

I'm looking to build a UI with stackable cards, something like:
Where there are a dynamic number of cards being the currently active card, and as the top card goes away, cards below is displayed. Very similar to Tinder's swipe-able experience.
I need to build this UI Component in my React web-app (not native). I found this library which looks very popular:
https://github.com/oliviertassinari/react-swipeable-views
However this library does not appear to support stacking view, and showing all the views at an offset as seen below.
Does anyone know if it is possible to accomplish what I'm looking for with react-swipeable-views or if there is a better library out there to accomplish UIC as seen in the image?
You could use the react-spring library to achieve this. Here is an example of that behavior implemented.
I hope it helps you!

React Native: Draw on image with only JS code

In my app, after use selects an image from gallery, he needs to black out some part of it. for example draw a black line where there are some names or signatures.
Is it possible to achieve this with JS only? or do I have to make some native views separately for android/ios and implement it to react native?
or is there any image picker modules which provides such a feature?
It's a little bit late, but I think this library will do the trick:
https://www.npmjs.com/package/#terrylinla/react-native-sketch-canvas
You can load a picture beforehand as your canvas with the localSourceImageprop.

Categories