victory components for react native

Overview

Victory Native

Maintenance Status

Usage

Install victory-native:

$ npm install victory-native --save

Install react-native-svg:

$ npm install react-native-svg --save

Link react-native:

$ react-native link react-native-svg

[email protected]^33.0.0 requires [email protected]^9.0.0 and [email protected]~0.60.0

Please see Peer Dependencies and Version Requirements for requirements for previous versions of victory-native

Import charts from victory-native. For example,

import React, { Component } from "react";

import { VictoryBar } from "victory-native";

class App extends Component {
  render() {
    return (
      <VictoryBar />
    );
  }
}

export default App;

Peer Dependencies and Version Requirements

Note: victory-native requires the following peer dependencies:

  • react-native-svg
  • react
  • react-native

Note: react-native-svg has strict version requirements for both react and react-native. Please match versions to those required by react-native-svg. See the up-to-date requirements on the react-native-svg Readme. We encourage you to use the latest version of react-native-svg possible for your project, as victory-native issues are frequently solved by react-native-svg bugfixes.

Local Development and Demo

If you'd like to contribute to victory-native, you can use the local demo app to test your changes on the iOS simulator.

# Install
$ git clone https://github.com/FormidableLabs/victory-native
$ cd victory-native
$ yarn install
# To run our typescript demo: cd demo/ts
$ cd demo/js
$ yarn install
$ yarn start

# Run the demo from a new terminal window
$ npx react-native run-ios

Changes to lib will be reflected in the demo app.

Documentation

See the docs and examples on the website https://formidable.com/open-source/victory/docs/native

Contributor Covenant Code of Conduct

Please review our Code of Conduct before contributing.

Maintenance Status

Active: Formidable is actively working on this project, and we expect to continue for work for the foreseeable future. Bug reports, feature requests and pull requests are welcome.

Comments
  • External and internal dependency upgrades: monorepo and fixes

    External and internal dependency upgrades: monorepo and fixes

    This PR addresses #52 (Monorepo) #53 (Upgrade react-native and react-native-svg) #54 (Fix demo - work by @sibelius)

    53 + 54 are tightly coupled. I chose to include 52 because fixing dependencies would require 4 package publications (all the victory-*-native packages), just to be completely obviated when moving to the monorepo.

    cc/ @boygirl

    opened by chrisbolin 26
  • Fix demo app live reload for iOS

    Fix demo app live reload for iOS

    The current setup with the demo/ app existing in a subdirectory is not natural for the RN packager. As a workaround, we can use babel-plugin-module-resolver to define the victory-native location to be the local lib/, and run the demo app from the root directory:

    $ npm install -g react-native-cli # install victory-native if you haven't already
    $ git clone https://github.com/FormidableLabs/victory-native
    $ cd victory-native
    $ npm install   # install victory-native
    $ npm start     # start react-native packager manually before launching demo!
    $ npm demo:ios  # or react-native run-android
    

    Do not run npm install in the demo/ directory, or the packager packager will crash due to "duplicate @providesModule declarations" found in node_modules/ and demo/node_modules.

    If you have existing demo/node_modules, you'll need to nuke them.

    Notice the custom npm start and npm demo:ios scripts.

    Does not fix issue for Android. Will submit that separately, need to do a bit more testing for it.

    opened by jevakallio 11
  • Update victory

    Update victory

    cc/ @chrisbolin this PR updates Victory to 0.21.0 and adds support for polar charts.

    Caveats: I couldn't figure out how to work around https://github.com/FormidableLabs/victory-native/issues/103, so I've temporarily disabled text rotations

    ~Spurious test failure for VictoryLabel~ Updated react-native-svg-mock to include TSpan mock

    opened by boygirl 5
  • Bump handlebars from 4.1.1 to 4.7.3 in /demo

    Bump handlebars from 4.1.1 to 4.7.3 in /demo

    Bumps handlebars from 4.1.1 to 4.7.3.

    Changelog

    Sourced from handlebars's changelog.

    v4.7.3 - February 5th, 2020

    Chore/Housekeeping:

    • #1644 - Download links to aws broken on handlebarsjs.com - access denied (@​Tea56)
    • Fix spelling and punctuation in changelog - d78cc73

    Bugfixes:

    • Add Type Definition for Handlebars.VERSION, Fixes #1647 - 4de51fe
    • Include Type Definition for runtime.js in Package - a32d05f

    Compatibility notes:

    • No incompatibilities are to be expected

    Commits

    v4.7.2 - January 13th, 2020

    Bugfixes:

    • fix: don't wrap helpers that are not functions - 9d5aa36, #1639

    Chore/Build:

    • chore: execute saucelabs-task only if access-key exists - a4fd391

    Compatibility notes:

    • No breaking changes are to be expected

    Commits

    v4.7.1 - January 12th, 2020

    Bugfixes:

    • fix: fix log output in case of illegal property access - f152dfc
    • fix: log error for illegal property access only once per property - 3c1e252

    Compatibility notes:

    • no incompatibilities are to be expected.

    Commits

    v4.7.0 - January 10th, 2020

    Features:

    ... (truncated)
    Commits
    • c978969 v4.7.3
    • 9278f21 Update release notes
    • d78cc73 Fixes spelling and punctuation
    • 4de51fe Add Type Definition for Handlebars.VERSION, Fixes #1647
    • a32d05f Include Type Definition for runtime.js in Package
    • ad63f51 chore: add missing "await" in aws-s3 publishing code
    • 586e672 v4.7.2
    • f0c6c4c Update release notes
    • a4fd391 chore: execute saucelabs-task only if access-key exists
    • 9d5aa36 fix: don't wrap helpers that are not functions
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 4
  • React Native 60 upgrade

    React Native 60 upgrade

    The goal is to bring our native and React dependencies in line with latest versions. React Native 60 requires the Android project use AndroidX support libraries and we can opt into Hermes. We have done both for our Android project in this case. iOS does not have any major architectural changes like Android. Finally this simplifies some of the dev deps in the JS project.

    Screen Shot 2019-07-31 at 4 39 53 PM Screen Shot 2019-07-31 at 4 39 57 PM
    opened by carlos-kelly 4
  • Import from victory-*/es instead of victory-*/src

    Import from victory-*/es instead of victory-*/src

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

    victory deps are victory-core, victory-chart, and victory-pie, all of which output es modules.

    opened by stefvhuynh 3
  • transform individual pie slices rather than entire group

    transform individual pie slices rather than entire group

    fixes https://github.com/FormidableLabs/victory/issues/639

    Depends on https://github.com/FormidableLabs/victory-core/pull/265 Depends on https://github.com/FormidableLabs/victory-pie/pull/148

    opened by boygirl 3
  • Minor version pin for core victory libraries

    Minor version pin for core victory libraries

    Issue #674 reports that Victory core 35.11.0 breaks Victory Native. I suspect this is due to some of the class-to-function component conversions in the core (released in 35.11.0) which are not respected in Victory Native.

    One solution, short term, is for users to pin their versions via yarn's resolutions field. However, to avoid everyone having to do that, I'm proposing we do minor-version pinning at the library level here so this won't break for future users, and we don't have to tell people to do user-land resolutions to get the library to work.

    Eventually, Victory Native's code will need to be updated to potentially move from class inheritance to function composition - but this seems like a fair short-time fix.

    opened by gksander 2
  • Fix transitions and clipping

    Fix transitions and clipping

    #77 Entrance transitions were completely broken, as was all dynamic clipping. Upgrading to [email protected] fixed this; however, that upgrade necessitated upgrades to [email protected] and [email protected].

    Also cleaned up a related hack (from #74) that is not needed anymore, and some bogus props that made debugging more confusing :P

    opened by chrisbolin 2
  • VictoryCursorContainer

    VictoryCursorContainer

    Port VictoryCursorContainer from victory-chart.

    To do that, a few other things had to be knocked out...

    • update react, victory-core, and victory-chart
    • migrate to prop-types
    • remove deprecated VictoryZoom
    • remove deprecated VoronoiTooltip
    opened by chrisbolin 2
  • duplicated code

    duplicated code

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

    Wait to merge for FormidableLabs/victory-chart#461 and FormidableLabs/victory-core#233 (CI will fail until then)

    opened by chrisbolin 2
Owner
Formidable
We design and develop web apps, train engineers at startups and Fortune 500 companies, and improve the modern web with open source software.
Formidable
A standard interface for your scrollable React Native components, making it easier to compose components.

ScrollableMixin ScrollableMixin lets your scrollable React Native components conform to a standard interface, making it easier to compose components.

Expo 93 Aug 18, 2019
A standard interface for your scrollable React Native components, making it easier to compose components.

react-native-scrollable-decorator The @scrollable decorator lets your scrollable React Native components conform to a standard interface, making it ea

Expo 38 Apr 3, 2019
PicPay Application using React Native, Expo, @react-navigation/native, @react-navigation/bottom-tabs, expo-linear-gradient and styled-components

React Native - PicPay Aplicação PicPay usando React Native, Expo, @react-navigation/native, @react-navigation/bottom-tabs, expo-linear-gradient e styl

Osvaldo Kalvaitir Filho 25 Nov 8, 2022
Beautifully crafted off canvas menu components for react native applications. Built on top of react-native's Animated library.

react-native-off-canvas-menu Beautifully crafted off canvas menu components for react native applications. Features - Gesture Support Orientation Comp

Provash Shoumma 412 Dec 12, 2022
react-native-webp adds support for WebP images for react-native components.

react-native-webp adds support for WebP images for react-native components. Installation npm install react-native-webp --save rnpm link (or manually a

Daniel Basedow 68 Nov 23, 2022
TouchBolocker is a React Native and React Native Web component that helps blocking the user from interacting with children components.

TouchBlocker is a React Native and React Native Web component that helps blocking the user from interacting with children components.

Youssef Eddibili 7 May 27, 2022
null 136 Dec 30, 2022
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

FuYaoDe 3.2k Dec 24, 2022
A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])

React Native MarqueeLabel (remobile) A marquee label for react-native if you use js pure marquee, use remobile/react-native-marquee[ https://github.co

YunJiang.Fang 114 Jul 18, 2022
react-native-swiper2 ★86 - Swiper component for React Native. Supersede react-native-swiper

react-native-swiper2 react-native-swiper is now active again, so swiper2 will stop maintaining. Changelogs [v2.0.7] correct onPageChange index. https:

Sunny Luo 84 Feb 23, 2022
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

Shinix 62 Jul 15, 2022
A React Native module that allows you to crop photos, built with react native Animated api and react-native-gesture-handler.

react-native-image-cropview A React Native module that allows you to crop photos, built with react native Animated api and react-native-gesture-handle

Cristian Tomescu 13 Nov 26, 2022
Use the iOS and Android native Twitter and Facebook share popup with React Native https://github.com/doefler/react-native-social-share

React Native Social Share Use the built-in share view from iOS and Android to let the user share on Facebook and Twitter. It will use the user's exist

Kim Døfler 415 Oct 9, 2022
React Native Calendar Components 🗓️ 📆

React Native Calendars ??️ ?? This module includes various customizable React-Native calendar components. The package is both Android and iOS compatib

Wix.com 8.2k Jan 2, 2023
Highly customizable material design components for React Native

React Native Material UI (iOS and Android supported) Highly customizable material design components for React Native! Documentation Getting Started Us

Jiří Otáhal 3.8k Dec 23, 2022
An inline wrapper for calling out React Native components via tooltip

React Native Walkthrough Tooltip React Native Walkthrough Tooltip is a fullscreen modal that highlights whichever element it wraps. When not visible,

Jason Gaare 487 Jan 4, 2023
Semantic layout components for React Native

react-native-layout Semantic JSX layout components for react-native This library contains multiple easy-to-use react-native layout components which br

Christoph Jerolimov 56 Oct 20, 2021
A collection of common UI components for react native mobile apps.

React Native Toolkit Stay tuned! Feel adventurous? Check out examples and get started! :) Navigation bar Custom navigation bar style per scene, includ

Mo 44 Dec 28, 2020
🔔 Customizable modal components with ✔️check options in React Native

NOTICE This package was created just when I started react-native. And I thought I had to fix a lot of this package, and I decided to put a new named m

Yeongsu Han 50 Dec 28, 2020