react-native-svg VS react-native-navigation

React Native SVG: An open-source SVG library.

@wuba/react-native-echarts, An awesome charting library for React Native, built upon Apache ECharts and leveraging react-native-svg and react-native-skia. Offers significantly better performance compared to WebView-based solutions. If you want to learn more about the project's design principles, you can click here.

Second solution could be: a view that contains the image and the label, and draw a line with react-native-svg line function. See documentation https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md

Hi, I think this can help you: https://github.com/software-mansion/react-native-svg Is a little bit complicated, but you can create this chart with nice performance :)

perhaps you need to install https://github.com/software-mansion/react-native-svg

I never start from zero when it comes to svg, usually at work I used the one designers provide in figma and I manipulate it in case animations are needed. Fortunately https://github.com/software-mansion/react-native-svg has a declarative way to work with svg in conjunction to SVGR you can manipulate existing svgs.

but disappear before screen change. related

Looks like this feature is not available (check here and here) yet. Good luck mate

another option is react-native-navigation which I haven't used yet but as the document says:

The behavior was reported in their issues 2 years ago: https://github.com/wix/react-native-navigation/issues/6174

At this point don't have a clear preference over which package to use in my next project (react-navigation or react-native-navigation) - they both have strengths and weaknesses, one is easier to actually work with, one is faster in terms of execution, one has better APIs, docs, community, etc.

class Home extends React.PureComponent { constructor(props: Props) { super(props); Navigation.events().bindComponent(this); } closeMenu = () => { this._drawer.close(); }; openMenu = () => { this._drawer.open(); }; static options(passProps) { return { topBar: { rightButtons: [ { component: { name: 'MenuButton', passProps: { onClick: () => this.openMenu(), }, }, }, ], }, }; } render() { return ( ... ); }} Reference I got my passProps code from: https://github.com/wix/react-native-navigation/issues/3648

Thanks! React Native to build the app. React Native Navigation from Wix to build the navigation so the app feels native.

There are two major navigation libraries in React Native world: react-navigation and react-native-navigation. They are both widely used among the community.

You can have a look at React Native Navigation: https://wix.github.io/react-native-navigation/

To navigate between screens, you will probably end up using the very popular React Navigation library. There is a great, purely native alternative, React Native Navigation (the names get confused easily), from Wix. It is super performant but not that flexible. Therefore, again: If your design asks you for something custom, you have no choice but to go with React Navigation; luckily, it is a great, well-documented option.