Solution for Charts (react-native) [on hold]

-

I'm new to react-native and I want to use chart in my application. I've been trying use some libs:

  1. react-native-pathjs-charts
  2. react-native-ios-charts

But they are not really good choices (bad performance, hard to use). I want to ask, which of the followings is the best solution for me !!!?

  1. Use D3 + ART draw chart by my self.
  2. Find a good native lib and try to port it to react-native.

You can check my repo: https://github.com/wuxudong/react-native-charts-wrapper

Support both android and ios, Latest MpAndroidChart and Charts are used.

I am late to the game but victory-native.

https://github.com/FormidableLabs/victory-native

It is very declarative and the API is very usable.

I would try react-native-svg-charts, it's easy to setup and very customisable

You should have a look here: https://js.coach/react-native?search=chart, you'll probably find something that would suit your needs

I know it is a quite old question but I was trying to solve the same recently. I needed to implement just an animated column chart. Even though I like D3 and ART library they are animated in JS thread. It could introduce performance issues. I am not about to share the library with you guys (I don't have any tips here). But if anyone is interested in getting an idea how to do super fast and animated column chart in RN - check out this article - https://medium.com/react-native-motion/animated-graph-in-react-native-51354af2bdb0

Comments

Post a Comment

Popular posts from this blog

Meaning of `{}` for return expression

-
15 1 I found by accident that the following compiles: #include <string> #include <iostream> class A{ int i{}; std::string s{}; public: A(int _i, const std::string& _s) : i(_i), s(_s) { puts("Called A(int, const std::string)"); } }; A foo(int k, const char* cstr){ return {k, cstr}; // (*) } int main(){ auto a = foo(10, "Hi!"); return 0; } The line of interest is (*). I guess the function foo is equivalent to: A foo(int k, const char* str){ return A(k, cstr); } However, is there a special name for this mechanism in (*)? Or is it just the simple fact that the compiler knows which constructor to call due to the return type? ...
Read more

Get current scroll position of ScrollView in React Native

-
Is it possible to get the current scroll position, or the current page of a <ScrollView> component in React Native? So something like: <ScrollView horizontal={true} pagingEnabled={true} onScrollAnimationEnd={() => { // get this scrollview's current page or x/y scroll position }}> this.state.data.map(function(e, i) { <ImageCt key={i}></ImageCt> }) </ScrollView> Try. <ScrollView onScroll={this.handleScroll} /> And then: handleScroll: function(event: Object) { console.log(event.nativeEvent.contentOffset.y); }, Disclaimer: what follows is primarily the result of my own experimentation in React Native 0.50. The ScrollView documentation is currently missing a lot of the information covered below; for instance onScrollEndDrag is completely undocumented. Since everything here relies upon undocumented behaviour, I can unfortunately make no promises that this information will remain correct a ...
Read more

flutter websocket connection issue

-
I am trying to develop a flutter app which connects to the server and exchanges data using websocket. The server is in .Net Core and using Asp.Net Core Websockets to implement this functionality. The problem I am facing is, my flutter app is not able to connect to the server and throws following error. E/flutter (31498): [ERROR:topaz/lib/tonic/logging/dart_error.cc(16)] Unhandled exception: E/flutter (31498): WebSocketChannelException: WebSocketChannelException: WebSocketException: Connection to 'http://127.0.0.1/client#' was not upgraded to websocket E/flutter (31498): #0 new IOWebSocketChannel._withoutSocket.<anonymous closure> (package:web_socket_channel/io.dart:83:24) E/flutter (31498): #1 _invokeErrorHandler (dart:async/async_error.dart:13:29) E/flutter (31498): #2 _HandleErrorStream._handleError (dart:async/stream_pipe.dart:286:9) E/flutter (31498): #3 _ForwardingStreamSubscription._handleError (dart:async/stream_pipe.dart:168:13) E/flutter (3149...
Read more