i have a transitioning ref in a parent Transitioning view i want to pass in a child:
const transition = (<Transition.Together><Transition.In type="fade" durationMs={300} /><Transition.Change /><Transition.Out type="fade" durationMs={300} /></Transition.Together>);const FiltersModal: FC = () => {const transitionRef = useRef<TransitioningView>(null);return (<FiltersContainer ref={transitionRef} transition={transition}> ...{primaryFilters.map((primaryFilter, i) => (<FilterOption key={i} ref={transitionRef} label={primaryFilter}> {primaryFilter}</FilterOption> ))}
and this is my filter option following an answer from here: ForwardRef error with typescript and react-native:
const FilterOption: React.ComponentType<FilterOptionProps> = React.forwardRef( ({ label }: FilterOptionProps, ref?: React.Ref<TransitioningView>) => { const [isSelected, setiIsSelected] = useState(false); const onPress = () => { if (ref.current) ref.current.animateNextTransition(); setiIsSelected((prevIsSelected) => !prevIsSelected); }; if (isSelected) return null; return (<Button><Typography {...{ fontFamily: FONTS_MONTSERRAT_500, fontWeight: 500, fontSize: 14, fontStyle: "normal", lineHeight: 20, color: "#00B0F0", }}> {label}</Typography><AntDesign name="plus" color="#00b0f0" size={10} /></Button> ); });
but i have this warning and cannot referrence ref.current.:
Type 'ForwardRefExoticComponent<Pick<FilterOptionProps, "label"> & RefAttributes<TransitioningView>>' ....
How do i use forwardref in a touchableOpacity in react native + typescript?