I am new to react-native and i want to achieve the below design in react-native
The blue circle is a slider to chose the date(Date Picker)
The circle inside the slider(Date Picker) changes color when the date is changed
and finally an image inside the circle.
it would be great if anyone could provide links for reference or a library which i can use to create the design shown in the image.
thanks in advance.
you have to create a custom SVG Slider just like this one
I have created a sample for you take a look
react-native-circular-slider-with-breakpoints
Well this is a custom slider which has some break point values. As the slider changes there is a change in the state and based on that the below description view is rendered.
Use this slider and give some css colors and styles to make it round
Related
Im trying to change the background image of slider revolution using media queries. I want to change the image to a different one for mobile devices. Is there a way to do this within slider revolution editor? So far I couldn't find any setting to do that.
If not, is there a way to add an ID or a class to the background image of the slider?
thanks!
T
Please try using the method from this article https://www.sliderrevolution.com/faq/display-different-images-on-different-screen-sizes/ to achieve what you needed there.
I want the touch area to be off the edge without padding. All the icons in the header. How can I do this?
I tried to add an indentation style for the icon. But it does not look beautiful. And yet there is an area without touch.
Look at here
You can increase the touchable area by using 'hitSlop', See document here
How Do I create that Button in React Native?
As above, button component include two part , left is text part, right part include another background color and image.
But, whole button component includes same border radius and gradient.
Does somebody might know how to get to this?
You should wrap two sibling View components with TouchableOpacity component which will handle onPress for the whole button. Position them side by side using flex and set explicit sizes on each. Left element should get borderTopLeftRadius and borderBottomLeftRadius and right should get borderTopRightRadius and borderBottomRightRadius. Border radius is solved separately but it would seem like it's all in one, and for gradient do you mean this inner shadow or something else?
It's because inset shadow does not exist in RN, but it can be faked quite realistically. Read more here: https://github.com/facebook/react-native/issues/2255.
If you really wan't to use gradient, you must use https://github.com/react-native-community/react-native-linear-gradient and position it absolutely over everything and just set it in the background using zIndex property.
I have a list of items that can be active, idle (if the current time doesn't match their active time), or off all together. I want to make a little gem like icon that reflects their current status in the list view.
In web I would just use CSS to make a little shape with green, red, or orange. Are there any disadvantages to just styling an empty view in React Native where I should make them images?
Thank you.
There is nothing wrong in using styles views as simple icons or indicators and this might actually help avoid some overheads( like time to display the image or memory for the images over the top of my head). The only downside I can think of is that it won't give you the same precision as images would.
below i attached an app help guide screen. I am understanding how to build this screen.
If any body have idea please share here
View with semi transparent background color (backgroundColor:"rgba(0,0,0,0.5)";) and some images on top of it.
So, using images is bad. You'll need images for translations and if you do this as one image you'll need to ensure all devices are covered so your arrows point to the right element.
Minimise images == smaller app.
First thing you'll need to do is a create a blocker view -- so that's a view that will fill the screen and have a black background with opacity.
You can't apply that to the window as everything in it will be semi-transparent so:
Create a transparent Window that fills the screen.
Add to that window a view that fills the window and has opacity say 0.5 and black background
Add to the Window (not the view you just created) the other elements and button -- ideally, these should be individual graphics of the arrows, sized in such a way that you can position them based on the host element (the item they are pointing to / referring to). Use real text so you can handle translations / reduce file size.
So you'll need a way to associate each tip with a control they are anchored too, and that will ensure that regardless of the screen size, the tip will appear in the correct place.
First of all, always give a try before putting questions anywhere because it makes you learn things on your own for long time.
The easiest step for you to do this is to ask your designer to create a complete image just like that & you just have to show it on top.
If you have to show that image in different translations, then you can ask your designer to provide you required translations images.