CODEWITHSUNDEEP
javascriptreact-native
thunermay
thunermay

Reputation: 365

Can you freeze the App until a (asynchronous) event has occured?

I want to show an AdMobInterstitial-Ad in my App before pushing to the next screen.

For now, I am using this method:

  1. show the Ad (which takes 1-2 seconds to load)
  2. pushing to the next screen
onpress={ () =>{
    (title.slice(0, 4) === "X-01"
              ? navigation.push(...)
              : navigation.push(...));
    showAsyncAD();
}
}

The ad loads asynchroniously so the app pushes to the next screen, then shows the ad. I want it to first load the ad then push to the next screen.

I tried this:

onpress={() =>
showAsyncAD().then(
() => title.slice(0, 4) === "X-01"
              ? navigation.push(...)
              : navigation.push(...)
                   );
}
}

This does indeed work but until the ad comes up the user can press buttons which he is not allowed to. He can actually just press the button again and get to the screen before the ad starts to play.

How can I freeze the App until the ad comes up so the user wont do anything he is not allowed to?

If a loading circle is possible with this it would be the best option!

Thanks for any inputs!!!

EDIT: I want to make the whole App to freeze until the ad is shown

Upvotes: 0

Views: 502

Answers (1)

michael
michael

Reputation: 4173

You can use state value which shows async action processing

const [processing, setProcessing] = useState(false);

setProcessing(true)
showAsyncAD().then(
  () => {
    setProcessing(false)
    title.slice(0, 4) === "X-01"
                ? navigation.push(...)
                : navigation.push(...)
  })

And disable button(s) that you don't want to be clicked while async action is performed. for example;

<TouchableOpacity disabled={processing}>
</TouchableOpacity>

UPDATE

If you want to disable the whole screen, you can show a transparent overlay View on the screen. It will have the full width and height of the screen.

return (
  <View style={{
    position: 'relative',
    ...
  }}>
    // your views here
    {processing && <View style={{
      position: 'absolute',
      width: '100%',
      height: '100%',
      backgroundColor: 'transparent'
    }} />}
  </View>
)

Upvotes: 1

Related Questions