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.
Related
Context:
I have an app (TinyUX) where people can draw wireframes. It uses a Flatlist grid, where each cell can have a background color, and an icon or text.
The text can be larger than the cell (50x50).
Assuming left text-alignment I created it so the zIndex went down with each cell (data.length - i)
Now I'm trying to add right-alignment.
So for some cells the text needs to overlap the cells to the right, sometimes to the left. But the background of the cell of either left or right (depending how I set the zIndex in relation to i will have the background overdraw the text.
It would seem logical to just make all texts have an zIndex that is higher than the rest of the cell, so they are all above the rest of the cell (icon(s), background colors). But I can't get that to work.
De cell component is nested something like this:
TouchableOpacity (has background color)
Image (positioned absolute, top left to parent)
Image (positioned absolute, top left to parent)
Text (positions absolute, top let to parent.
They have position absolute, so they can overlap.
With my current solution I can make either right or left alignment work.
Main question: How can a child of the renderItem component of a Flatlist grid, have a higher zIndex than every other cell in the grid.
Confusingly.. I just had it working when Metro was not connected, then restarted with Metro and failed again. The component uses React.memo(.. so now I'm not sure if I once was in a state with the fix..
I'm using a v-slider in a Vuetify context. The component has a message area that takes some space below the slider and makes it impossible to align the actual slider (the "line") in the vertical center to line up with other neighbouring components.
There seems to be a number of way to customize the message, but how do I get rid of that area completely? There will never be any messages to display there.
I've now resorted to adding a padding on top of the slider, align the components and then add a negative top padding on the group. But that seems just like a hack that I'd like to avoid.
Add the prop "hide-details" to the slider
<v-slider v-model="volume" label="Volume" hide-details></v-slider>
You can find all the possible props in the API-Section for the sliders.
I've been visualizing trip data using a trips layer, and I'm trying to put an icon at the head of each trip line. Is it possible to make multiple icons change position, appear, and disappear over time?
Example of what I'm trying to do (red arrow indicates motion over time)
Simply animate the data's position property, making sure it's a state change to trigger rerenders, before giving it to the layer. You can also put opacity in the data and animate that too.
View inside View leaving slight margin. See red. Code is minimal, I will post if there isn’t a quick gotcha that someone knows about. In CSS, this is often a line-height culprit, not the case here as react native doesn’t have that property in View.
React Native do not add margin or padding by default. You might have added padding in your parent View or margin in your child.
You can use Show Inspector in your device where this is been caused.
I am using a framework called react-native-svg to draw SVG elements in a react native view.
My goal is that when I tap on the view (I use a PanResponder on the global view to get that), the element that is the closest to the tap changes.
I have everything that I need, except one thing: I need to be able to know the position of my svg elements, as well as their size, in order to find the one that was the closest to the tap event.
Now, I've tried most of the things available I'd say:
onLayout: those svg elements don't appear to be views and therefore don't call the onLayout callback.
this.refs.elem.measure: same as onLayout, they are not views therefore the measure function is undefined.
UIManager.measure(ReactNative.findNodeHandle(this.refs.elem), callback): returns 0 for all values, apart from the react-native-svg component Svg, but not for all the others: G, Path, Line, etc.
So I was wondering if there was any other solution or if I was doomed. :)
Do I have to change something in react-native-svg that would allow me to find these values or is there any solution ready for me?
Thanks!
I finally had to add some functionalities to react-native-svg so I could get the size of the different elements.
It's not very well done, but I may come back to it for a cleaner solution and submit a PR then.
Thanks.