Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6214

how to pass ref from parent to child Touchable Opacity in react native?

$
0
0

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?


Viewing all articles
Browse latest Browse all 6214

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>