Screens Navigation

Navigate between screens and reuse one banner placement

When the app navigates between screens, you should stop auto-reloading all ads which will not be visible. The best way to set this for banner ads is modifying autoreload property. Please see the example how it might be done when using react-navigation library.

Declare state object with boolean autoReloadBanner value.

    constructor(props) {
        super(props);
        this.state = { 
            autoReloadBanner: true
        };
    }

Use this autoReloadBanner value to set autoreload property.

<RNAatkitBanner
    reloadOnStart={true}
    autoreload={this.state.autoReloadBanner}
    name="Banner"
    size={RNAatkit.PlacementSize_Banner320x53}
    />

When navigating to another screen, update the state.

this.setState( {
    autoReloadBanner: false
});
navigate('SecondScreen');

Use react-navigation didFocus event to start auto-reloading banner again when user comes back to the screen.

 componentDidMount() {
    this._sub = this.props.navigation.addListener(
        'didFocus',
        () => {
            this.setState( {
                autoReloadBanner: true
            });
        }
    );
 }

 componentWillUnmount() {
    this._sub.remove();
 }

Last updated