New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[android] Invalidate SvgView when view hierarchy changes #837

Merged
merged 1 commit into from Dec 7, 2018

Conversation

Projects
None yet
2 participants
@mu29
Copy link
Contributor

mu29 commented Nov 7, 2018

Problem

Dynamically added children does not shown on Svg view.

Steps to reproduce

import React from 'react'
import { Button } from 'react-native';
import Svg, { Line } from 'react-native-svg'

class Puzzle extends React.Component<{}, {data: number[], current: number}> {
  state = { data: [], current: 1 }

  onAdd = () => this.setState(state => ({
    data: [...state.data, state.current],
    current: state.current + 1,
  }));

  render() {
    return (
      <View style={{ flex: 1 }}>
        <Svg width={100} height={100}>
          {
            this.state.data.map(p => (
              <Line
                key={p}
                x1={0}
                y1={0}
                x2={50}
                y2={p * 10}
                storkeWidth={8}
                stroke="#000"
              />
            )
          }
        </Svg>
        <Button title="add" onPress={this.onAdd} />
      </View>
    )
  }
}

It renders no line even I clicked button.

DOM tree has no problem,

2018-11-07 10 15 46

But no lines are visible.

2018-11-07 10 16 51

Expected behavior

Should show 4 lines.

2018-11-07 10 14 53

It only happens when I wrote without dynamically adding children components.
Code below works fine.

import React from 'react'
import { Button } from 'react-native';
import Svg, { Line } from 'react-native-svg'

class Puzzle extends React.Component<{}, {data: number[], current: number}> {
  state = { data: [], current: 1 }

  onAdd = () => this.setState(state => ({ data: [...state.data, state.current], current: state.current + 1 }));

  render() {
    return (
      <View style={{ flex: 1 }}>
        <Svg width={100} height={100}>
          <Line x1={0} y1={0} x2={50} y2={10} storkeWidth={8} stroke="#000" />
          <Line x1={0} y1={0} x2={50} y2={20} storkeWidth={8} stroke="#000" />
          <Line x1={0} y1={0} x2={50} y2={30} storkeWidth={8} stroke="#000" />
          <Line x1={0} y1={0} x2={50} y2={40} storkeWidth={8} stroke="#000" />
        </Svg>
        <Button title="add" onPress={this.onAdd} />
      </View>
    )
  }
}

Solution

Invalidate parent SvgView when view hierarchy changes.

@mu29 mu29 changed the title [andriod] invalidate SvgView when view hierarchy changes [andriod] Invalidate SvgView when view hierarchy changes Nov 7, 2018

@msand

This comment has been minimized.

Copy link
Collaborator

msand commented Nov 8, 2018

@mu29 Thanks for this! Haven't had time to test this yet, also I notice you have "storkeWidth" instead of "strokeWidth" could this be related to the issue as well?

@mu29

This comment has been minimized.

Copy link
Contributor

mu29 commented Nov 9, 2018

@msand Actually <Line /> component provides default property strokeWidth as 1, so I think it is not related to this issue. See lib/extract/extractStroke#L52. BTW sorry for confusing you. Should I edit it?

@msand

This comment has been minimized.

Copy link
Collaborator

msand commented Nov 9, 2018

Ah ok, it's fine as is. Hopefully I'll have some time this weekend for looking at this.

@mu29

This comment has been minimized.

Copy link
Contributor

mu29 commented Nov 9, 2018

Thank you for your care 😊 Have a good weekend!

@mu29 mu29 changed the title [andriod] Invalidate SvgView when view hierarchy changes [android] Invalidate SvgView when view hierarchy changes Nov 27, 2018

@msand msand merged commit b896714 into react-native-community:master Dec 7, 2018

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment