In Objective-C, we can use MKPolygon to add a polygon to the mapview. How can I add polygons to map view using React Native? Is it possible? I think technically it is possible. I probably need to go the source code of react native.
It might be, but the MapView that comes with React Native is lacking for Android, and it seems crippled for iOS. I only saw the overlay property, which should work for polygons, and it even has a fillColor property, which would imply that you could. However, It's not clear from the docs what to do to tell the overlay that you want a polygon instead of a polyline.
I'd suggest this much more capable replacement MapView for React Native: https://github.com/lelandrichardson/react-native-maps
I'm halfway expecting the React Native maintainers to take notice of it, and integrate it if they find out about it.
Related
how can I easily create an app like this in React Native?
As you can see on the gif I need to draw rectangles on the grid. Are there any libraries or maybe even paid commercials solutions for creating apps with advanced drawing like this shown on the gif?
Have you seen this library? You might need to flicker something to meet your exact requirement
https://github.com/jgrancher/react-native-sketch
https://github.com/terrylinla/react-native-sketch-canvas
I want to render a Bubble Chart (Circle Packing) dynamic with an data array as a prop in React Native using EXPO (no native code). I wonder which way I could go to implement this chart. Do I use d3? And if yes, does it work for React Native? Are there other ideas on how to implement this bubble chart? Does it work only with SVG? Or d3 including SVG?
I found also a react library that renders the Bubble Chart like in the picture below but the styles and other attributes from react aren't matching to React Native.
I have not yet found an answer to this problem. Does anyone in the community encounter this problem and solved it?
You can use react-native-chart-wrapper as it is providing bubble chart with a list of additional charts
I'm looking for a method in React Native in which I can move an object by simply listening to the events KEY_DOWN, KEY_UP and KEY_MOVE. And as I move my finger on the component (KEY_MOVE), the position of the component moves along the X axis as per the new X axis I have. In Android (Java), I just did that part by doing this.setX(motionEvent.getX())
Since I'm migrating from Native Android to React Native, I'm having a little trouble making this work. Any help is appreciated.
You can use the PanResponder to get the touch events and then you can use the Animated API to get do the animations to move the view.
See https://moduscreate.com/animated_drag_and_drop_with_react_native/ for a full example.
Prelude to the Question:
I am planning to create a super simple SVG editor in React Native, with the following features:
add a new circle to the SVG
resize the circle
move the circle around
remove the circle.
What is not clear, how can I react to SVG events in React Native. (Is an SVG event the same as a DOM event (for React Native) ?)
I Googled "svg editor react native", "svg react native events" and I found:
https://github.com/magicismight/react-native-svg, it seems that it does not have support for events.
https://github.com/brentvatne/react-native-svgkit , also, does not support events yet (has it as plan though).
The Question:
If the user taps or drags the circle in an SVG, how can I react to that event in React Native?
EDIT1:
Further Googling indicates that SVG is not supported in React Native (yet).
Would it be easier to just use SVG + ReactJS + Cordova to accomplish this goal (i.e. write a simple SVG editor using React and deploy it to a mobile phone)?
EDIT2:
After some more Googling, it seems that http://reapp.io/ is the simplest way to go.
https://github.com/magicismight/react-native-svg, it seems that it does not have support for events.
It sure does, e.g.
<Circle cx={10} cy={10} r={20} onPress={()=>{console.log('pressed')}}/>
Check the PanResponder example for more complex touch handling such as dragging.
After some more googling, it seems that http://reapp.io/ is the simplest way to go.
But from what I can tell that isn't React-Native, right?
Is it possible to create a vertical ViewPagerAndroid on React Native, or is there a workaround for Android that ends up with a similar UI maybe using ScrollView?
This currently isn't offered out of the box since ViewPagerAndroid implements only horizontal scrolling, and scroll snapping is implemented only on iOS. These are two approaches I would suggest exploring:
Give the illusion of a vertical pager by using the transform style property to rotate the ViewPagerAndroid by 90 degrees, and then transform each child 90 degrees in the other direction so their net rotation is zero. This is the approach we used in InvertibleScrollView and it works well for some use cases. You might find the same technique useful with ViewPagerAndroid.
Implement scroll snapping on Android. On iOS, React Native already offers an API for specifying how a ScrollView should snap at intermediate points, such as at the boundary of each page in a pager. On Android you could subclass ReactScrollView and implement the same behavior natively. This would require more work than rotating the pager, but is a more robust solution.