Component does not re-render when width of parent component changes

[hannah-be]

We are nesting our TextTicker component within a parent component that has a width that can change (e.g. a button may appear next to it shortening the width). When this happens, as the width isn't passed to the TextTicker component, it isn't rerendering. This causes an issue in the case when the width of the container goes from long enough to fit, to shorter than the text (and thus require scrolling). We could pass the width as a child (and not display it) but this feels like a hack. It isn't accepted by any of the props on the component.

<View style={{ width: titleWidth }}>
        <TextTicker style={{ ...styles.title }} scrollSpeed={scrollSpeed} animationType='scroll'>
                 {some text here}
       </TextTicker>
 </View>

[deanhet]

Before I dig into this further, have you tried passing the component a "key" prop? When a key prop changes in react, it should force it to rerender.

[hannah-be]

Great idea - that fixed it - thanks!