is there any picker like this in react native? - reactjs

[i couldn't find any thing to have icon an text together in placeholder and label of items]
(https://i.stack.imgur.com/TzOxe.jpg)

I think this one is more accurate for your design.
https://github.com/instea/react-native-popup-menu

This picker can render icon as your need just render your icon inside the render options
https://www.npmjs.com/package/react-native-custom-picker

I used react native popup menu as my friend said and it worked after I used this code:
<MenuOptions customStyles={{optionsContainer:{marginVertical:-60}}} >

Related

MUI DatePicker - How can I change YearPicker styling

I was just trying out DesktopDatePicker component and experimenting a bit with it's costumization and noticed I couldn't find any information on how to style YearPicker from DesktopDatePicker.
To costumize PickersDay, for instance, I can use renderDay prop and render a StyledPickersDay.
However for YearPicker, I don't see a renderYear or anything similar :/
enter image description here
For context, I wanted to change the color from blue to orange
Is there a different way to do this or it just hasn't been implemented yet?
You can edit the CSS in the YearPicker component: https://mui.com/x/api/date-pickers/year-picker/#css

ant design tooltip shows scroll bar

I am using ant design with react for my project
when I am using the tooltip component, and I hover over the element, the tooltip appears and the scroll bar for a half-second and then disappears.
as you can see in this video https://youtu.be/Tyg61JVDgRc
anybody knows why?
at the moment the problem is only with ant design tooltip component, and is bugging and not following the position : 'fixed' so handing it to overlayStyle prop manually will fix the problem like <Tooltip overlayStyle={{position:'fixed'}}/>, I hope this helps. if youre still in trouble pass destroyTooltipOnHide propery

solution for custom React Native Carousel like example image

I want to create slider in carousel in react native like the example image below
I want three View to be displayed on each slide And the middle slide is bigger than another and show my Text in the middle slide
Does anyone have a solution for creating this slider with FlatList?
enter image description here
It seems you can use https://github.com/meliorence/react-native-snap-carousel for the carousel view.

antd dont import all icons

I am using only the loading property of Button component.
Internally the button component requires 0.5mb of icons.
Is there is any way to use only loading icon and not the huge icons import?
Thanks.
I haven't tried for Icon components,
but you can check out babel-plugin-import, which optimizes import statements.
I was able to make it work with CSS & other AntD components.
What I understood from your question is correct, the answer is no. In the meanwhile, you can try another way. download the specific icon as an SVG format form the icon and create your own icon bundle for using icon moon and use it. So you can reduce the size.
Bonus point: Always try to import a specific component like below instead downloading whole antd component.
import Button from 'antd/lib/button';

React-Leaflet React Component as Marker

I've recently gotten into React Leaflet and from what I've gathered from the docs, it is not possible to add a custom React Element (Component or pure functional) as a marker.
What I want to achieve is to be able to use my React Element which is an SVG icon as the marker. This would be useful because I'll need to display several different color icons and it's way more convenient to pass the color as props and let React create the marker.
Am I right in assuming this isn't possible?
You are incorrect! :) React-leaflet allows the creation of custom components. Also, you should check out react-leaflet-div-icon since it seems like it's exactly what you need.

Resources