My aim is to have scrollable svg text on screen but I can't seem to fathom out how.
Firstly, before I attempted to make the text scrollable, I started of with the following code:
<View style={style}>
<Svg height={height} width={width}>
<G>
{this.renderLegend({
...config,
count: 4,
data: data.datasets,
paddingTop,
paddingRight
})}
</G>
</Svg>
</View>
And here is my renderLegend function:
renderLegend = config => {
var {
count,
data,
labels = [],
width,
height,
paddingRight,
paddingTop,
horizontalOffset = 0
} = config;
const fontSize = 12;
//console.log(data);
let middle = [...new Array(data.length)].map((_, i) => {
return (
<G key={Math.random()}>
<Text
key={Math.random()}
x={
((width - paddingRight) / data.length) * i +
paddingRight +
horizontalOffset +
60
}
y={paddingTop}
fontSize={fontSize}
fill={this.props.chartConfig.color(0.5)}
textAnchor="middle"
>
{data[i].name}
</Text>
<Rect
x={
((width - paddingRight) / data.length) * i +
paddingRight +
horizontalOffset
}
y={paddingTop - 5}
rx="0"
ry="0"
width={4}
height="4"
strokeWidth={2}
stroke={data[i].color ? data[i].color(0.5) : "white"}
fill="white"
/>
</G>
);
});
return middle;
};
The above code works fine, it renders SVG text elements side by side across the page. However, in some cases I might have a lot of text elements on there so ideally I want to make it scrollable.
When I try and wrap the renderLegend content variable in a ScrollView, the text disappears from the screen:
return (
<View key={Math.random()}>
<ScrollView horizontal={true}>
<Svg key={Math.random()}>{middle}</Svg>
</ScrollView>
</View>
)
Is there a reason for it disappearing and is there a way to display to scrollable area with SVG text?
