Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ChartXlabel and ChartYLabel are not displaying while dragging on the path.

See original GitHub issue

In the initial run, I got this error. Then after the subsequent run error doesn’t get display anymore.

Screenshot 2020-11-26 at 14 46 10 
Tried to synchronously call function {getX} from a different thread.
Solution is:
a) If you want to synchronously execute this method, mark it as a Worklet
b) If you want to execute this method on the JS thread, wrap it using runOnJS


reanimated::REAIOSErrorHandler::raiseSpec()
    REAIOSErrorHandler.mm:17
reanimated::ErrorHandler::raise()::'lambda'()::operator()()
decltype(std::__1::forward<reanimated::ErrorHandler::raise()::'lambda'()&>(fp)()) std::__1::__invoke<reanimated::ErrorHandler::raise()::'lambda'()&>(reanimated::ErrorHandler::raise()::'lambda'()&)
void std::__1::__invoke_void_return_wrapper<void>::__call<reanimated::ErrorHandler::raise()::'lambda'()&>(reanimated::ErrorHandler::raise()::'lambda'()&)
std::__1::__function::__alloc_func<reanimated::ErrorHandler::raise()::'lambda'(), std::__1::allocator<reanimated::ErrorHandler::raise()::'lambda'()>, void ()>::operator()()
std::__1::__function::__func<reanimated::ErrorHandler::raise()::'lambda'(), std::__1::allocator<reanimated::ErrorHandler::raise()::'lambda'()>, void ()>::operator()()
std::__1::__function::__value_func<void ()>::operator()() const
std::__1::function<void ()>::operator()() const
reanimated::REAIOSScheduler::scheduleOnUI(std::__1::function<void ()>)
reanimated::ErrorHandler::raise()
reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_0::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long) const
decltype(std::__1::forward<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_0&>(fp)(std::__1::forward<facebook::jsi::Runtime&>(fp0), std::__1::forward<facebook::jsi::Value const&>(fp0), std::__1::forward<facebook::jsi::Value const*>(fp0), std::__1::forward<unsigned long>(fp0))) std::__1::__invoke<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_0&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long>(reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_0&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
facebook::jsi::Value std::__1::__invoke_void_return_wrapper<facebook::jsi::Value>::__call<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_0&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long>(reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_0&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
std::__1::__function::__alloc_func<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_0, std::__1::allocator<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_0>, facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
std::__1::__function::__func<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_0, std::__1::allocator<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_0>, facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
std::__1::__function::__value_func<facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&) const
std::__1::function<facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long) const
facebook::jsc::JSCRuntime::createFunctionFromHostFunction(facebook::jsi::PropNameID const&, unsigned int, std::__1::function<facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>)::HostFunctionMetadata::call(OpaqueJSContext const*, OpaqueJSValue*, OpaqueJSValue*, unsigned long, OpaqueJSValue const* const*, OpaqueJSValue const**)
JSC::JSCallbackObject<JSC::JSNonFinalObject>::call(JSC::JSGlobalObject*, JSC::CallFrame*)
JSC::LLInt::setUpCall(JSC::CallFrame*, JSC::CodeSpecializationKind, JSC::JSValue, JSC::LLIntCallLinkInfo*)
llint_entry
vmEntryToJavaScript
JSC::Interpreter::executeCall(JSC::JSGlobalObject*, JSC::JSObject*, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&)
JSC::profiledCall(JSC::JSGlobalObject*, JSC::ProfilingReason, JSC::JSValue, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&)
JSObjectCallAsFunction
facebook::jsc::JSCRuntime::call(facebook::jsi::Function const&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)
facebook::jsi::Function::callWithThis(facebook::jsi::Runtime&, facebook::jsi::Object const&, facebook::jsi::Value const*, unsigned long) const
reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)
decltype(std::__1::forward<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&>(fp)(std::__1::forward<facebook::jsi::Runtime&>(fp0), std::__1::forward<facebook::jsi::Value const&>(fp0), std::__1::forward<facebook::jsi::Value const*>(fp0), std::__1::forward<unsigned long>(fp0))) std::__1::__invoke<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long>(reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
facebook::jsi::Value std::__1::__invoke_void_return_wrapper<facebook::jsi::Value>::__call<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long>(reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
std::__1::__function::__alloc_func<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2, std::__1::allocator<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2>, facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
std::__1::__function::__func<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2, std::__1::allocator<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2>, facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
std::__1::__function::__value_func<facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&) const
std::__1::function<facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long) const
facebook::jsc::JSCRuntime::createFunctionFromHostFunction(facebook::jsi::PropNameID const&, unsigned int, std::__1::function<facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>)::HostFunctionMetadata::call(OpaqueJSContext const*, OpaqueJSValue*, OpaqueJSValue*, unsigned long, OpaqueJSValue const* const*, OpaqueJSValue const**)
JSC::JSCallbackObject<JSC::JSNonFinalObject>::call(JSC::JSGlobalObject*, JSC::CallFrame*)
JSC::LLInt::setUpCall(JSC::CallFrame*, JSC::CodeSpecializationKind, JSC::JSValue, JSC::LLIntCallLinkInfo*)
llint_entry
vmEntryToJavaScript
JSC::Interpreter::executeCall(JSC::JSGlobalObject*, JSC::JSObject*, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&)
JSC::profiledCall(JSC::JSGlobalObject*, JSC::ProfilingReason, JSC::JSValue, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&)
JSObjectCallAsFunction
facebook::jsc::JSCRuntime::call(facebook::jsi::Function const&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)
facebook::jsi::Function::callWithThis(facebook::jsi::Runtime&, facebook::jsi::Object const&, facebook::jsi::Value const*, unsigned long) const
reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)
decltype(std::__1::forward<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&>(fp)(std::__1::forward<facebook::jsi::Runtime&>(fp0), std::__1::forward<facebook::jsi::Value const&>(fp0), std::__1::forward<facebook::jsi::Value const*>(fp0), std::__1::forward<unsigned long>(fp0))) std::__1::__invoke<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long>(reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
facebook::jsi::Value std::__1::__invoke_void_return_wrapper<facebook::jsi::Value>::__call<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long>(reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
std::__1::__function::__alloc_func<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2, std::__1::allocator<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2>, facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
std::__1::__function::__func<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2, std::__1::allocator<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2>, facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
std::__1::__function::__value_func<facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&) const
std::__1::function<facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long) const
facebook::jsc::JSCRuntime::createFunctionFromHostFunction(facebook::jsi::PropNameID const&, unsigned int, std::__1::function<facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>)::HostFunctionMetadata::call(OpaqueJSContext const*, OpaqueJSValue*, OpaqueJSValue*, unsigned long, OpaqueJSValue const* const*, OpaqueJSValue const**)
JSC::JSCallbackObject<JSC::JSNonFinalObject>::call(JSC::JSGlobalObject*, JSC::CallFrame*)
vmEntryToNative
JSC::Interpreter::executeCall(JSC::JSGlobalObject*, JSC::JSObject*, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&)
JSC::profiledCall(JSC::JSGlobalObject*, JSC::ProfilingReason, JSC::JSValue, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&)
JSObjectCallAsFunction
facebook::jsc::JSCRuntime::call(facebook::jsi::Function const&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)
facebook::jsi::Function::callWithThis(facebook::jsi::Runtime&, facebook::jsi::Object const&, facebook::jsi::Value const*, unsigned long) const
facebook::jsi::Function::callWithThis(facebook::jsi::Runtime&, facebook::jsi::Object const&, std::initializer_list<facebook::jsi::Value>) const
facebook::jsi::Value facebook::jsi::Function::callWithThis<>(facebook::jsi::Runtime&, facebook::jsi::Object const&) const
reanimated::Mapper::execute(facebook::jsi::Runtime&)
reanimated::MapperRegistry::execute(facebook::jsi::Runtime&)
reanimated::NativeReanimatedModule::onRender(double)
reanimated::NativeReanimatedModule::maybeRequestRender()::$_6::operator()(double) const
decltype(std::__1::forward<reanimated::NativeReanimatedModule::maybeRequestRender()::$_6&>(fp)(std::__1::forward<double>(fp0))) std::__1::__invoke<reanimated::NativeReanimatedModule::maybeRequestRender()::$_6&, double>(reanimated::NativeReanimatedModule::maybeRequestRender()::$_6&, double&&)
void std::__1::__invoke_void_return_wrapper<void>::__call<reanimated::NativeReanimatedModule::maybeRequestRender()::$_6&, double>(reanimated::NativeReanimatedModule::maybeRequestRender()::$_6&, double&&)
std::__1::__function::__alloc_func<reanimated::NativeReanimatedModule::maybeRequestRender()::$_6, std::__1::allocator<reanimated::NativeReanimatedModule::maybeRequestRender()::$_6>, void (double)>::operator()(double&&)
std::__1::__function::__func<reanimated::NativeReanimatedModule::maybeRequestRender()::$_6, std::__1::allocator<reanimated::NativeReanimatedModule::maybeRequestRender()::$_6>, void (double)>::operator()(double&&)
std::__1::__function::__value_func<void (double)>::operator()(double&&) const
std::__1::function<void (double)>::operator()(double) const
invocation function for block in reanimated::createReanimatedModule(std::__1::shared_ptr<facebook::react::CallInvoker>)::$_0::operator()(std::__1::function<void (double)>, facebook::jsi::Runtime&) const
-[REANodesManager onAnimationFrame:]
CA::Display::DisplayLink::dispatch_items(unsigned long long, unsigned long long, unsigned long long)
display_timer_callback(__CFMachPort*, void*, long, void*)
__CFMachPortPerform
__CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE1_PERFORM_FUNCTION__
__CFRunLoopDoSource1
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
-[UIApplication _run]
UIApplicationMain
main
start
0x0

Code

import React from 'react';
import {Dimensions, StyleSheet, View} from 'react-native';
import {
  ChartDot,
  ChartPath,
  ChartPathProvider,
  ChartXLabel,
  ChartYLabel,
  monotoneCubicInterpolation,
} from '@rainbow-me/animated-charts';

const {width: SIZE} = Dimensions.get('window');

const data = [
  {x: 1453075200, y: 1.47},
  {x: 1453161600, y: 1.37},
  {x: 1453248000, y: 1.53},
  {x: 1453334400, y: 1.54},
  {x: 1453420800, y: 1.52},
  {x: 1453507200, y: 2.03},
  {x: 1453593600, y: 2.1},
  {x: 1453680000, y: 2.5},
  {x: 1453766400, y: 2.3},
  {x: 1453852800, y: 2.42},
  {x: 1453939200, y: 2.55},
  {x: 1454025600, y: 2.41},
  {x: 1454112000, y: 2.43},
  {x: 1454198400, y: 2.2},
];

const points = monotoneCubicInterpolation({data, range: 40});

const getX = (value) => {
  'worklet';
  return `X - ${value}`;
};

const getY = (value) => {
  'worklet';
  return `Y - ${value}`;
};

const Invest = () => {
  return (
    <View style={styles.container}>
      <ChartPathProvider
        data={{
          points,
          // smoothingStrategy: 'bezier',
        }}>
        <ChartPath
          height={SIZE / 2}
          stroke={'blue'}
          width={SIZE}
          selectedStrokeWidth={3}
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={3.5}
          hitSlop={30}
          longPressGestureHandlerProps={{
            minDurationMs: 60,
          }}
          smoothingWhileTransitioningEnabled={false}
        />
        <ChartDot style={styles.dot} />
        <ChartXLabel format={getX} />
        <ChartYLabel format={getY} />
      </ChartPathProvider>
    </View>
  );
};

export default Invest;

const styles = StyleSheet.create({
  container: {
    marginTop: 100,
    backgroundColor: 'white',
    flex: 1,
  },
  dot: {backgroundColor: 'blue'},
  center: {alignSelf: 'center'},
});

Repo Link

https://github.com/Kailash23/react-native-animated-chart-issue

Dependencies

"@rainbow-me/animated-charts": "^1.0.0-alpha.4",
"react": "16.13.1",
"react-native": "0.63.3",
"react-native-gesture-handler": "^1.9.0",
"react-native-reanimated": "^2.0.0-alpha.9.2", // Tried with this version also - 2.0.0-alpha.8
"react-native-svg": "^12.1.0"
Screenshot 2020-11-26 at 16 17 28

Unable to display X and Y value

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:8 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
osdnkcommented, Mar 12, 2021

Should be fixed!

1reaction
tharyckgusmaocommented, Dec 28, 2020

I believe yarn package not update last version…

Change de index.js https://github.com/rainbow-me/react-native-animated-charts/blob/master/src/index.js

Read more comments on GitHub >

github_iconTop Results From Across the Web

Label names are not displayed from input data in pie transition ...
I am using d3.js to draw a pie transition chart. But when labels are placed in the data array as show below: data...
Read more >
Add or remove data labels in a chart - Microsoft Support
Add data labels​​ Click the chart, and then click the Chart Design tab. Click Add Chart Element and select Data Labels, and then...
Read more >
Show, Hide, and Format Mark Labels - Tableau Help
On the Marks card, click Label, and then select Show mark labels. · To add another field to the mark labels, drag that...
Read more >
MS Excel axis labels overlap in charts (what can you do about it)
Stop Labels overlapping chart · Right click on the Axis · Choose the Format Axis option · Open the Labels dropdown · For...
Read more >
Display Customized Data Labels on Charts & Graphs
While viewing the labels in the rotate mode you can also slant the labels for better visibility if required. Set the slantLabel attribute...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

InvalidNumber error after update to react-native-reanimated@2.0.0-rc.0

Next page

Wired splines representation when stable data