Unable to conditionally render bodyComponent

[anniewey]

Hi, I'm trying to change the view of the bodyComponent when cancel button is pressed. I tried with using state to conditionally render the view but no avail. Basically i have 2 steps view before closing the modal.

In summary, the rough idea is:

first step

• has 2 buttons (Setup Now, Setup Later)
• change to step 2 when user press Setup Later

second step

• has 1 button (OK)
• close modal when user press OK

Popup.show({
      type: nextStep ? 'warning' : 'confirm',
      iconEnabled: false,
      title: 'Setup Your Account',
      bodyComponent: () => {
        return !nextStep ? (
          <View>
            <Text>
             Let's get you setup your account first.
            </Text>
          </View>
        ) : (
          <View>
            <Text>
              No worries! You can always setup your account later at Settings.
            </Text>
          </View>
        );
      },
      buttonText: nextStep ? 'OK' : 'Setup Now',
      confirmText: 'Setup Later',
      callback: () => {
        if (!nextStep) {
          //navigate to screen
        }
        Popup.hide();
        setNextStep(false);
      },
      cancelCallback: () => {
          setNextStep(true);
      },
    });

[sekizlipenguen]

To solve this problem, you need to manage the nextStep state correctly. In your current implementation, you try to update the nextStep state to true in the cancelCallback function to move to the second step, but it might not be applying the state change effectively outside of the Popup.show() function.

You can try the following:

State Management: First, you need to ensure that the Popup.show() function is called again when the nextStep state changes. In the current implementation, Popup.show() only runs once, and when nextStep changes, the popup doesn’t re-render.

const [nextStep, setNextStep] = useState(false);

const showPopup = (isNextStep) => {
  Popup.show({
    type: isNextStep ? 'warning' : 'confirm',
    iconEnabled: false,
    title: 'Setup Your Account',
    bodyComponent: () => {
      return !isNextStep ? (
        <View>
          <Text>Let's get you setup your account first.</Text>
        </View>
      ) : (
        <View>
          <Text>No worries! You can always setup your account later at Settings.</Text>
        </View>
      );
    },
    buttonText: isNextStep ? 'OK' : 'Setup Now',
    confirmText: 'Setup Later',
    callback: () => {
      if (!isNextStep) {
        // Navigate to screen
      }
      Popup.hide();
      setNextStep(false);
    },
    cancelCallback: () => {
      setNextStep(true);
      showPopup(true); // Re-render the popup
    },
  });
};

// To open the popup initially:
showPopup(nextStep);

Re-opening the Popup: After setting nextStep(true) in the cancelCallback, call the showPopup(true) function to re-render the popup for the second step. This way, when nextStep is true, it will display the second step. This solution will ensure that the popup is re-rendered after the state change, creating the two-step view you want.

[anniewey]

I've tried your suggestion and it works! Thanks!