Pass shared value prop to children component (list of items + animated selected boolean prop) #6208
Unanswered
VictorioMolina
asked this question in
Q&A
Replies: 1 comment
-
Hey! To achieve what you want, you will have to use the SolutionThe logic was moved up from the const { selectedFont, onPressItem, onScroll, onMomentumScrollEnd } =
useFontPicker(scrollRef, { fonts, activeFont, itemWidth, onPick });
const fontProps = useMemo(
() =>
fonts.map((font, index) => ({
key: font,
fontFamily: font,
selected: makeMutable(false),
style: [fontItemStyles.container, fontItemStyle],
textStyle: fontItemTextStyle,
onPress: onPressItem(index),
})),
[fonts, onPressItem]
);
useAnimatedReaction(
() => selectedFont.value,
(font) => {
fontProps.forEach((props) => {
props.selected.value = props.fontFamily === font;
})
}
)
const renderFonts = () => fontProps.map((props) => <FontItem {...props} />); |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
My
FontPicker
is rendering a list ofFontItem
components.Each
FontItem
should receive a boolean propselected
.Since my
selectedFont
, controlled in theFontPicker
, is an animated value, is there any correct way to pass theselected
prop to my child without doing theselected
comparison inside each child component?Beta Was this translation helpful? Give feedback.
All reactions