[React Native] Admob を中央に揃える

Expoを使ってAdmobを中央に表示する

AdmobをcenterかつBottomに配置するためのスタイルのメモ。

参考：https://akhromieiev.com/tutorials/adding-admob-expo-project-step-step/

export default class App extends Component {

  constructor() {
    super();
    this.state = {
      isReady: false
    };
  }

  async componentWillMount() {
    await Font.loadAsync({
      'Roboto': require('native-base/Fonts/Roboto.ttf'),
      'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
    });
    this.setState({ isReady: true });
  }
  render() {
    if (!this.state.isReady) {
      return <AppLoading />;
    }
    return (
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
            <AppContainer />
            <View style={styles.container}>
              <AdMobBanner
                  bannerSize="banner"
                  adUnitID="ca-app-pub-###"
                  // Test ID, Replace with your-admob-unit-id
                  testDeviceID="EMULATOR"
                  onDidFailToReceiveAdWithError={this.bannerError}
              />
            </View>
        </PersistGate>
      </Provider>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  bottomBanner: {
    width:'100%',
    position:'absolute',
    bottom: 0,
  },
});