App Intro Slider with checkable inputs on pages - calling actions from parent, sending events to childrens

Question

I'm struggling with this problem from two weeks and I'm here to search help.

I cannot figure out how to make a Horizontal Page Slider in ReactNative, in order to avoid useless rerender of all the pages I have in my FlatList. Requirements are:

• slides are the only thing that scrolls horizontally, for this...
• ...buttons are NOT inside children
• children must implement their own methods isEverythingOk and onAction: every children will have those, but they can differ on how they will return true/false
• these methods must be callable from parent

It is something like react-native-app-intro-slider but every slide will have some inputs that must be validated before going next, eventually with some extra actions that will be enabled by an extra button.

The simplest way to explain this is the following code:

const SLIDES = [
  {component: Intro, extraAction: false}, 
  {component: SetName, extraAction: false}, 
  {component: SetBudget, extraAction: true}}
]

const MyComponent = () => {
  const listRef = useRef(null);
  const [currentSlide, setCurrentSlide] = useState(0);

  useEffect(() => {
    listRef.current?.goToIndex({animated: true, index: currentIndex)};
  }, [currentSlide])

  const onPrev () => {
    setCurrentSlide(currentSlide - 1);
  }

  const onNext () => {
    // Problem 1 => I have no reference to currentSlide component
    if (currentSlide.isEverythingOk()) {
      setCurrentSlide(currentSlide + 1);
    }
  }

  const onAction () => {
    // Problem 2 => I have no reference to currentSlide component
    currentSlide.onAction();
  }

  // Problem 3 => How to pass this to every children?
  const onActionCompleted = () => {
    onNext();
  }

  <View>
    <FlatList ref={listRef} data={SLIDES} renderItem={(item) => item.component} />
    <ButtonContainer>
      <Button onPress={onNext} />
      {SLIDES[currentSlide].extraAction ? <Button onPress={onAction} /> : null }
      <Button onPress={onPrevious} />
    </ButtonContainer>
  </View>
}

Example of one of the component could be:

const SetName = () => {
  const [isOk, setIsOk] = useState(false);

  // Problem 1 - I should call this from parent
  const isEverythingOk = () => {
    return isOk;
  }

  // Problem 2 - I should call this from parent
  const onAction = () => {
    openDialog();
    // Problem 3 => I need the "onActionCompleted"!
  }
  
  //... an so on, every Child component will surely have those two methods
}

I marked problems with // Problem X comment.

I a classical way of programming I would have a component that implements an interface with onAction and isEverythingOk, I would suppose from parent that every children is of that exact type and I can just go and check the current item and call the method.

But not in React.

I cannot (or don't know how to) update the current ref when currentSlide changes, and if I update something in parent, EVERY COMPONENT will rerender, causing enormous problems when I would have 15 sliding pages. I could use memo on those compoments, but it's useless since at every change, also the onActionCompleted will change, since onNext will change.

I thought about EventEmitters, refs and all possible solutions, but in the end there is always something that will not make it work (useless rerenders, not working events, refs that are not updated...).

Just, please, help.

If we'll come to an elegant solution I'll provide the code for everyone and publish an NPM package for it.