Do you currently support React Native?

[andyoh365]

I would love to use this for RN

[gazcn007]

Visx is not currently being maintained for RN/cross-platform

But, there is work being done around cross-platform support: https://github.com/airbnb/visx/pull/660

[wobsoriano]

Can't you just use react-native-svg and do some copy paste?

[tharyckgusmao]

in my case, I needed to replicate a component the same as it is in my web application, my suggestion is that you rewrite it for your environment based on what you are going to use, using the same visx logic.

Example react native + visx + react-native-skia:

import {  Canvas,  FitBox,  Group,  Path } from @shopify/react-native-skia;
import {arc, pie} from @visx/shape;

  const pieRender = useMemo(() => {

      const path = arc<any>({
            innerRadius,
            outerRadius,
            cornerRadius
          });
      
          const piee = pie<any>({
            startAngle,
            endAngle,
            padAngle,
            value: pieValue,
            sort: pieSort
          });

    const arcs = piee(data);
    return arcs.map((arc, i) => {
     return <Path path={path(arc) || ''} color={arc.data.color} />;
    });

  }, []);


    
        <Canvas style={{width: width - 220, height: 120}}>
          <FitBox
            src={rect(0, 0, width, Math.PI)}
            dst={rect(0, 0, width - 220, 130)}>
            <Group
              transform={[
                {
                  translateX: width / 2
                },
                {
                  translateY: 100
                }
              ]}>
              {pieRender}
            </Group>
          </FitBox>
        </Canvas>

Mobile WEB x React Native

[hshoff]

Hi @andyoh365, visx does not currently support react-native and we don't have plans to add support in the future. There was community contributed work around this here, but as mentioned in that thread we'd encourage a community fork or new project to bring something visx-like for react-native. Thanks for checking out visx!