How to make an admob ad not go up with the keyboard in react native (Expo)?

Question

I have implemented admob ads using the react-native-google-mobile-ads package and I have a few inputs(like in the login screen) where the user types in thier credentials.

When I click on the input, the ad sticks on top of the keyboard and goes up with it. Is it possible so that I can stick the ad to the bottom of the screen always?

Here is an image showing what is currently happening:

Current code:

render() {
    return (
      <View style={styles.container}>
        {this.showModal()}
        <ScrollView>
          <BTex style={styles.title}>Login</BTex>
          <Tex style={styles.sub}>Please sign in to continue</Tex>

          <Tex style={styles.label}>Email</Tex>
          <TextInput
            style={styles.input}
            placeholder="example@email.com"
            placeholderTextColor={"#BBBBBB"}
            onChangeText={(text) => {
              this.setState({ email: text });
            }}
            keyboardType={"email-address"}
            keyboardAppearance={"dark"}
            autoCapitalize={"none"}
          />

          <Tex style={[styles.label, { marginTop: RFValue(25) }]}>Password</Tex>
          <TextInput
            style={styles.input}
            placeholder="VerySecurePassword123"
            placeholderTextColor={"#BBBBBB"}
            onChangeText={(text) => {
              this.setState({ password: text });
            }}
            keyboardType={"default"}
            keyboardAppearance={"dark"}
            secureTextEntry={true}
            autoCapitalize={"none"}
          />

          <TouchableOpacity
            style={styles.loginCTA}
            onPress={() => this.login()}
          >
            <Tex style={styles.buttonText}>Login</Tex>
          </TouchableOpacity>

          <TouchableOpacity
            style={{
              alignSelf: "center",
              marginTop: RFValue(15),
              marginBottom: RFValue(7),
            }}
            onPress={() => this.setState({ isModalVisible: true })}
          >
            <Tex style={{ fontSize: RFValue(15) }}>
              Create an account instead
            </Tex>
          </TouchableOpacity>
        </ScrollView>
          <Advert /> // The ad component
      </View>

Thanks in advance!

Answer 1

So the answer to your question is relatively simple, just move the Advert Component into the ScrollView like so:

  <ScrollView>
...
    </TouchableOpacity>
    <Advert />
  </ScrollView>
</View>

That should cause the ad to stay at the bottom of the page regardless of the keyboard's position.