Any tips on how to implement something like this in react native
this middle button should have something like a gap around it
Example
Because of the gap, I would use a .png in a custom component.
Never done it before, but looks this guy solved it https://github.com/hoaphantn7604/react-native-curved-bottom-bar. Seems they are using react-native-svg to do the magic
Related
I have a React application and I want to implement grouping in the same way as the image. I think its something called row groping but when i research, its not the same thing. How can i implement this?
I am using XGrid. Should i write my own component to achieve this or there is simplier way to do that?
react version "17.0.1"
I purchased MUI-DataGridPro to solve this issue.
I am wanting to create a circular slider in React Native for a project of mine. Although I am not entirely sure on how to create one. Could someone help me out?
Here is a little sketchup of what I want it to look like:
I did some searching on the interwebs and found some posts about circular sliders in React Native. But these posts seem to be dated and the projects linked/provided in these posts would not work for me.
1. https://stackoverflow.com/questions/51058669/react-native-circular-slider
2. https://stackoverflow.com/questions/38253804/how-to-make-a-circular-slider-in-react-native
Note: I am fairly new to the world of React and React Native but do have decent experience with JavaScript. Right now I am still learning about React and React Native.
Your best best is probably svg via react-native-svg, since that will allow you to declaratively draw and animate arbitrary shapes without having to write platform-specific native code.
Note that setting up react-native-svg is slightly different if you are working with expo or have ejected, which may explain why some of those older examples you mentioned don't work (they pre-date expo).
Drawing with SVG is generally straight-forward, although you will need to use arc's in paths, which is about as awkward as SVG gets (but still not too bad).
The trickiest parts of a circular slider are capturing the touch input with PanResponder and converting coordinates between cartesian (x,y) coordinates of the touch input and polar (angle,distance) coordinate systems in order to know where to move the slider to.
In your case it looks like you want to lock the movement of the slider to specific increments around the clock so you'll also need to find the nearest increment to the polar-coord of the current touch, but that should be easy in polar coords - just find the increment with the closest angle to that of the touch.
Here is an Expo project that illustrates the slider part. It looks like this:
Based on the comments, if you are comfortable with the jQuery roundSlider then you can simply do the customization based on your need. Here I just make a mock up design, check the below demo:
DEMO
Also if you want this as an React component then you can make a simple wrapper like below, and can directly use in any React applications.
https://stackblitz.com/edit/react-jquery-round-slider
hope this will helps you, or will give you some idea to move in a direction.
I am trying to find or figure out a way to create https://facebook.github.io/react-native/docs/maskedviewios.html that supports Android, with the main goal to mask image with another image outline (think twitter logo put over any photo where contents are only shown within twitter logo) This works fine in iOS, but there are no components I found that do similar job on Android. How would one go about creating this?
Find a masked view built in Android (or build one) and the hook the native implementation to React Native.
In a lot of cases, you use ClipPath from react native svg (shipped by default with expo) to do the job. Such example can be found here:
https://snack.expo.io/#wcandillon/soundcloud-player
I've been checking on the internet how to do a long scroll with split screen in reactjs. I would like to do something like THIS SITE.
Is there any component or way to do it? I've found a lot of jquery examples, but any with React.
To add some extra information I'm running react with react-bootstrap, babel(ES6), gulp, browserify, sass and hot load.
Thanks for your help!
Ruffeng
I found the answer with react-onepage-scroll.
https://www.npmjs.com/package/react-onepage-scroll
Simple and clean. If sbdy know how to apply a split screen I'll appreciate it.
Does anyone know how to make a circle slider like this in react native?
The question doesn't specify if third-party libraries are acceptable, so react-native-circular-slider would be a solid option. It appears to have component props to customize the experience as you require.
If you have to SVG this yourself, then you could use the solution to this similar question previously posted.