[android] Invalidate SvgView when view hierarchy changes

[mu29]

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,

But no lines are visible.

Expected behavior

Should show 4 lines.

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.

[msand]

@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]

@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]

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

[mu29]

Thank you for your care 😊 Have a good weekend!