Home
Softono
i

invertase

Professional software vendor delivering innovative solutions on the Softono platform. Specialized in both open-source and proprietary software development.

Total Products
3

Software by invertase

melos
Open Source

melos

<p align="center"> <a href="https://melos.invertase.dev/~melos-latest"> <img src="https://static.invertase.io/assets/melos-logo.png" alt="Melos" /> <br /><br /> </a> <span>A tool for managing Dart projects with multiple packages, inspired by <a href="https://lerna.js.org">Lerna</a>.</span> </p> <p align="center"> <a href="https://github.com/invertase/melos#readme-badge"><img src="https://img.shields.io/badge/maintained%20with-melos-f700ff.svg?style=flat-square" alt="Melos" /></a> <a href="https://docs.page"><img src="https://img.shields.io/badge/powered%20by-docs.page-34C4AC.svg?style=flat-square" alt="docs.page" /></a> <a href="https://invertase.link/discord"> <img src="https://img.shields.io/discord/295953187817521152.svg?style=flat-square&colorA=7289da&label=Chat%20on%20Discord" alt="Chat on Discord"> </a> </p> <p align="center"> <a href="https://melos.invertase.dev/~melos-latest">Documentation</a> &bull; <a href="https://github.com/invertase/melos/blob/main/LICENSE">License</a> </p> --- ## About Splitting up large code bases into separate independently versioned packages is extremely useful for code sharing. However, making changes across many repositories is _messy_ and difficult to track, and testing across repositories gets complicated really fast. To solve these (and many other) problems, some projects will organize their code bases into multi-package repositories (sometimes called [monorepos](https://en.wikipedia.org/wiki/Monorepo)) **Melos is a tool that optimizes the workflow around managing multi-package repositories with git and Pub.** ## Migrate to Melos 7.x.x Since the [pub workspaces](https://dart.dev/tools/pub/workspaces) feature has been released, Melos has been updated to rely on that, instead of creating `pubspec_overrides.yaml` files and thus some migration is needed. The main difference for migration is that the `melos.yaml` file no longer exists, only the root `pubspec.yaml` file. To migrate to Melos 7.x.x a few steps are needed: 1. Start with running `melos clean` to remove all the `pubspec_overrides.yaml` entries and then continue with moving all your content. 2. Add `resolution: workspace` to all of your packages' `pubspec.yaml` files. 3. Add a list of all your packages to the root `pubspec.yaml` file, under the `workspace` key. 4. Move all the content from your `melos.yaml` file to the root `pubspec.yaml` file, under the `melos` key. (Note that the `packages` list is no longer needed as it is replaced with the `workspace` list.) > [!NOTE] > The `workspace` list doesn't support globs yet, so you have to list all your > packages manually. Give a thumbs up [here](https://github.com/dart-lang/pub/issues/4391) > so that the team can prioritize this feature. > [!NOTE] > **Root packages migration:** If your existing project uses the repository > root as a package, you can enable `useRootAsPackage: true` in the melos > configuration to maintain this behavior, or restructure your project to > move the main application to a subdirectory. See the > [Configuration Overview](https://melos.invertase.dev/~melos-latest/configuration/overview#useRootAsPackage) > for details. After the migration, your root `pubspec.yaml` file would now look something like this: ```yaml name: my_workspace publish_to: none environment: sdk: ^3.9.0 workspace: - packages/helper - packages/client_package - packages/server_package dev_dependencies: melos: ^7.0.0-dev.9 melos: # All of the content of your previous melos.yaml file # (Except for the packages and name) ``` And this is what the `pubspec.yaml` file of a package would look like: ```yaml name: my_package environment: sdk: ^3.9.0 resolution: workspace ``` > [!NOTE] > You have to use Dart SDK 3.6.0 or newer to use pub workspaces. ## Github Action If you're planning on using Melos in your GitHub Actions workflows, you can use the [Melos Action](https://github.com/marketplace/actions/melos-action) to run Melos commands, this action also supports automatic versioning and publishing directly from your workflows. ## What does a Melos workspace look like? A default file structure looks something like this: ``` my-melos-repo/ pubspec.yaml packages/ package-1/ pubspec.yaml package-2/ pubspec.yaml ``` The location of your packages needs be configured via the `workspace` section in your root `pubspec.yaml` file, see the [pub workspaces](https://dart.dev/tools/pub/workspaces) documentation for more information. ## What can Melos do? - πŸ”— Link local packages in your workspace together without adding dependency overrides (achieved by pub workspaces). - πŸ“¦ Automatically version, create changelogs and publish your packages using [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/). - πŸ“œ Pre-define advanced custom scripts for your workspace in your root `pubspec.yaml` configuration to use via `melos run [scriptName]`. Anyone contributing to your workspace can just run `melos run` to be prompted to select a script from a list with descriptions of each script. - Scripts can even [prompt to select a package](https://melos.invertase.dev/~melos-latest/configuration/scripts#packagefilters) to run against with pre-defined filters. - ⚑ Execute commands across your packages easily with `melos exec -- <command here>` with additional concurrency and fail-fast options. - [Environment variables](https://melos.invertase.dev/environment-variables) containing various information about the current package and the workspace are available in each execution. - Can be combined with all package filters. - 🎯 Many advanced package filtering options allowing you to target specific packages or groups of packages in your workspace. - `--no-private` - Exclude private packages (`publish_to: none`). - `--[no-]published` - Filter packages where the current local package version exists on pub.dev. Or "-no-published" to filter packages that have not had their current version published yet. - `--[no-]nullsafety` - Filter packages where the current local version uses a "nullsafety" prerelease preid. Or "-no-nullsafety" to filter packages where their current version does not have a "nullsafety" preid. - `--[no-]flutter` - Filter packages where the package depends on the Flutter SDK. Or "-no-flutter" to filter packages that do not depend on the Flutter SDK. - `--scope=<glob>` - Include only packages with names matching the given glob. - `--ignore=<glob>` - Exclude packages with names matching the given glob. - `--diff=<ref>` - Only include packages that have been changed since the specified `ref`, e.g. a commit sha or git tag. - `--dir-exists=<dirRelativeToPackageRoot>` - Include only packages where a specific directory exists inside the package. - `--file-exists=<fileRelativeToPackageRoot>` - Include only packages where a specific file exists in the package. - `--depends-on=<dependantPackageName>` - Include only packages that depend on a specific package. - `--no-depends-on=<noDependantPackageName>` - Include only packages that _don't_ depend on a specific package. - `--include-dependencies` - Expands the filtered list of packages to include those packages' transitive dependencies (ignoring filters). - `--include-dependents` - Expands the filtered list of packages to include those packages' transitive dependents (ignoring filters). - ♨️ Advanced support for IntelliJ IDEs with automatic creation of [run configurations for workspace defined scripts and more](https://melos.invertase.dev/~melos-latest/ide-support) on workspace bootstrap. - Integration with VS Code through an [extension][melos-code]. ## Getting Started Go to the [Getting Started](https://melos.invertase.dev/~melos-latest/getting-started) page of the [documentation](https://melos.invertase.dev/~melos-latest) to start using Melos. ## Who is using Melos? The following projects are using Melos: - [firebase/flutterfire](https://github.com/firebase/flutterfire) - [Flame-Engine/Flame](https://github.com/flame-engine/flame) - [fluttercommunity/plus_plugins](https://github.com/fluttercommunity/plus_plugins) - [GetStream/stream-chat-flutter](https://github.com/GetStream/stream-chat-flutter) - [canonical/ubuntu-desktop-provision](https://github.com/canonical/ubuntu-desktop-provision) - [ubuntu/app-center](https://github.com/ubuntu/app-center) - [4itworks/opensource_qwkin_dart](https://github.com/4itworks/opensource_qwkin_dart) - [gql-dart/ferry](https://github.com/gql-dart/ferry) - [cbl-dart/cbl-dart](https://github.com/cbl-dart/cbl-dart) - [ema987/paddinger](https://github.com/ema987/paddinger) - [flutter-stripe/flutter_stripe](https://github.com/flutter-stripe/flutter_stripe) - [danvick/flutter_form_builder](https://github.com/danvick/flutter_form_builder) - [kmartins/groveman](https://github.com/kmartins/groveman) - [flutternetwork/WiFiFlutter](https://github.com/flutternetwork/WiFiFlutter) - [iapicca/yak_packages](https://github.com/iapicca/yak_packages) - [atsign-foundation/at_app](https://github.com/atsign-foundation/at_app) - [sub6resources/flutter_html](https://github.com/sub6resources/flutter_html) - [ferraridamiano/ConverterNOW](https://github.com/ferraridamiano/ConverterNOW) - [rrifafauzikomara/youtube_video](https://github.com/rrifafauzikomara/youtube_video) - [mobxjs/mobx.dart](https://github.com/mobxjs/mobx.dart) - [NetGlade/auto_mappr](https://github.com/netglade/auto_mappr) - [myConsciousness/atproto.dart](https://github.com/myConsciousness/atproto.dart) - [GrowERP Flutter ERP](https://github.com/growerp/growerp) - [mrverdant13/coverde](https://github.com/mrverdant13/coverde) - [ThexXTURBOXx/flutter_web_auth_2](https://github.com/ThexXTURBOXx/flutter_web_auth_2) - [woltapp/wolt_modal_sheet](https://github.com/woltapp/wolt_modal_sheet) - [cfug/dio](https://github.com/cfug/dio) - [simolus3/drift](https://github.com/simolus3/drift) - [Lyokone/flutterlocation](https://github.com/Lyokone/flutterlocation) - [FlutterGen/flutter_gen](https://github.com/FlutterGen/flutter_gen) - [jhomlala/alice](https://github.com/jhomlala/alice) - [powersync/powersync.dart](https://github.com/powersync-ja/powersync.dart) - [rodydavis/signals.dart](https://github.com/rodydavis/signals.dart) - [foss42/apidash](https://github.com/foss42/apidash) - [ReactiveX/rxdart](https://github.com/ReactiveX/rxdart) - [StacDev/stac](https://github.com/StacDev/stac) - [Jaspr](https://github.com/schultek/jaspr) - [starknet.dart](https://github.com/focustree/starknet.dart) - [flyerhq/flutter_chat_ui](https://github.com/flyerhq/flutter_chat_ui) - [maplibre/flutter-maplibre-gl](https://github.com/maplibre/flutter-maplibre-gl) - [Khuwn-Soulutions/supabase_codegen](https://github.com/Khuwn-Soulutions/supabase_codegen) - [G1Joshi/Booking-App](https://github.com/G1Joshi/Booking-App) > Submit a PR if you'd like to add your project to the list. Update the > [README.md](https://github.com/invertase/melos/edit/main/packages/melos/README.md) > and the [docs](https://github.com/invertase/melos/edit/main/docs/index.mdx). > > You can also add a [README badge](#readme-badge) to your projects README to > let others know about Melos πŸ’™. ## Documentation Documentation is available at [https://melos.invertase.dev](https://melos.invertase.dev/~melos-latest). ## Migrations When migrating between major versions of Melos, please read the [migration guide](https://melos.invertase.dev/~melos-latest/guides/migrations). ## Commands Full commands list and args can be viewed by running `melos --help`. ``` > melos --help A CLI tool for managing Dart & Flutter projects with multiple packages. Usage: melos <command> [arguments] Global options: -h, --help Print this usage information. --verbose Enable verbose logging. --sdk-path Path to the Dart/Flutter SDK that should be used. This command line option has precedence over the `sdkPath` option in the root `pubspec.yaml` configuration file and the `MELOS_SDK_PATH` environment variable. To use the system-wide SDK, provide the special value "auto". Available commands: bootstrap Initialize the workspace, link local packages together and install remaining package dependencies. Supports all package filtering options. clean Clean this workspace and all packages. This deletes the temporary pub & ide files such as ".packages" & ".flutter-plugins". Supports all package filtering options. exec Execute an arbitrary command in each package. Supports all package filtering options. format Idiomatically format Dart source code. list List local packages in various output formats. Supports all package filtering options. publish Publish any unpublished packages or package versions in your repository to pub.dev. Dry run is on by default. run Run a script by name defined in the workspace pubspec.yaml config file. version Automatically version and generate changelogs based on the Conventional Commits specification. Supports all package filtering options. Run "melos help <command>" for more information about a command. ``` ## How to Contribute To start making contributions please refer to [`CONTRIBUTING.md`](./CONTRIBUTING.md). ## Lerna This project is heavily inspired by [Lerna](https://lerna.js.org/). ## README Badge Using Melos? Add a README badge to show it off: [![melos](https://img.shields.io/badge/maintained%20with-melos-f700ff.svg?style=flat-square)](https://github.com/invertase/melos) ```markdown [![melos](https://img.shields.io/badge/maintained%20with-melos-f700ff.svg?style=flat-square)](https://github.com/invertase/melos) ``` ## License - See [LICENSE](/LICENSE) --- <p align="center"> <a href="https://invertase.io/?utm_source=readme&utm_medium=footer&utm_campaign=melos"> <img width="75px" src="https://static.invertase.io/assets/invertase/invertase-rounded-avatar.png"> </a> <p align="center"> Built and maintained with πŸ’› by <a href="https://invertase.io/?utm_source=readme&utm_medium=footer&utm_campaign=melos">Invertase</a>. </p> <p align="center"> &nbsp;&nbsp;<a href="https://twitter.com/invertaseio"><img src="https://img.shields.io/twitter/follow/invertaseio.svg?style=flat-square&colorA=1da1f2&colorB=&label=Follow%20on%20Twitter" alt="Follow on Twitter"></a> </p> </p> [melos-code]: https://marketplace.visualstudio.com/items?itemName=blaugold.melos-code

Developer Tools Package Managers
1.5K Github Stars
react-native-firebase
Open Source

react-native-firebase

<p align="center"> <a href="https://rnfirebase.io"> <img width="160px" src="https://i.imgur.com/JIyBtKW.png"><br/> </a> <h2 align="center">React Native Firebase</h2> </p> <p align="center"> <a href="https://www.npmjs.com/package/@react-native-firebase/app"><img src="https://img.shields.io/npm/dm/@react-native-firebase/app.svg?style=flat-square" alt="NPM downloads"></a> <a href="https://www.npmjs.com/package/@react-native-firebase/app"><img src="https://img.shields.io/npm/v/@react-native-firebase/app.svg?style=flat-square" alt="NPM version"></a> <a href="/LICENSE"><img src="https://img.shields.io/npm/l/@react-native-firebase/app.svg?style=flat-square" alt="License"></a> <a href="https://lerna.js.org/"><img src="https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg?style=flat-square" alt="Maintained with Lerna"></a> </p> <p align="center"> <a href="https://invertase.link/discord"><img src="https://img.shields.io/discord/295953187817521152.svg?style=flat-square&colorA=7289da&label=Chat%20on%20Discord" alt="Chat on Discord"></a> <a href="https://twitter.com/rnfirebase"><img src="https://img.shields.io/twitter/follow/rnfirebase.svg?style=flat-square&colorA=1da1f2&colorB=&label=Follow%20on%20Twitter" alt="Follow on Twitter"></a> <a href="https://www.facebook.com/groups/rnfirebase"><img src="https://img.shields.io/badge/Follow%20on%20Facebook-4172B8?logo=facebook&style=flat-square&logoColor=fff" alt="Follow on Facebook"></a> </p> --- **React Native Firebase** is a collection of official React Native modules connecting you to Firebase services; each module is a light-weight JavaScript layer connecting you to the native Firebase SDKs for both iOS and Android. React Native Firebase is built with four key principles in mind; - πŸ§ͺ **Well tested** - every module is extensively tested to >95% coverage - πŸ‘ **Well typed** - first class support for Typescript included - πŸ“„ **Well documented** - full reference & installation documentation alongside detailed guides and FAQs - πŸ”₯ **Mirrors official Firebase Web SDK** - functions as a drop-in replacement for the Firebase Web SDK in React Native - maximizes cross-platform code re-usability e.g. re-using code on web platforms ## Firebase Modules This is the root of the mono-repo for React Native Firebase, if you're looking for a specific package please select the package link from below. The main package that you interface with is `App` (`@react-native-firebase/app`) | Name | Downloads | | -------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | [AI](https://github.com/invertase/react-native-firebase/tree/main/packages/ai) | [![badge](https://img.shields.io/npm/dm/@react-native-firebase/ai.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@react-native-firebase/ai) | | [Analytics](https://github.com/invertase/react-native-firebase/tree/main/packages/analytics) | [![badge](https://img.shields.io/npm/dm/@react-native-firebase/analytics.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@react-native-firebase/analytics) | | [App](https://github.com/invertase/react-native-firebase/tree/main/packages/app) | [![badge](https://img.shields.io/npm/dm/@react-native-firebase/app.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@react-native-firebase/app) | | [App Check](https://github.com/invertase/react-native-firebase/tree/main/packages/app-check) | [![badge](https://img.shields.io/npm/dm/@react-native-firebase/app-check.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@react-native-firebase/app-check) | | [App Distribution](https://github.com/invertase/react-native-firebase/tree/main/packages/app-distribution) | [![badge](https://img.shields.io/npm/dm/@react-native-firebase/app-distribution.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@react-native-firebase/app-distribution) | | [Authentication](https://github.com/invertase/react-native-firebase/tree/main/packages/auth) | [![badge](https://img.shields.io/npm/dm/@react-native-firebase/auth.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@react-native-firebase/auth) | | [Cloud Firestore](https://github.com/invertase/react-native-firebase/tree/main/packages/firestore) | [![badge](https://img.shields.io/npm/dm/@react-native-firebase/firestore.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@react-native-firebase/firestore) | | [Cloud Functions](https://github.com/invertase/react-native-firebase/tree/main/packages/functions) | [![badge](https://img.shields.io/npm/dm/@react-native-firebase/functions.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@react-native-firebase/functions) | | [Cloud Messaging](https://github.com/invertase/react-native-firebase/tree/main/packages/messaging) | [![badge](https://img.shields.io/npm/dm/@react-native-firebase/messaging.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@react-native-firebase/messaging) | | [Cloud Storage](https://github.com/invertase/react-native-firebase/tree/main/packages/storage) | [![badge](https://img.shields.io/npm/dm/@react-native-firebase/storage.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@react-native-firebase/storage) | | [Crashlytics](https://github.com/invertase/react-native-firebase/tree/main/packages/crashlytics) | [![badge](https://img.shields.io/npm/dm/@react-native-firebase/crashlytics.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@react-native-firebase/crashlytics) | | [Dynamic Links](https://github.com/invertase/react-native-firebase/tree/main/packages/dynamic-links) | [![badge](https://img.shields.io/npm/dm/@react-native-firebase/dynamic-links.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@react-native-firebase/dynamic-links) | | [In-app Messaging](https://github.com/invertase/react-native-firebase/tree/main/packages/in-app-messaging) | [![badge](https://img.shields.io/npm/dm/@react-native-firebase/in-app-messaging.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@react-native-firebase/in-app-messaging) | | [Installations](https://github.com/invertase/react-native-firebase/tree/main/packages/installations) | [![badge](https://img.shields.io/npm/dm/@react-native-firebase/installations.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@react-native-firebase/installations) | | [ML](https://github.com/invertase/react-native-firebase/tree/main/packages/ml) | [![badge](https://img.shields.io/npm/dm/@react-native-firebase/ml.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@react-native-firebase/ml) | | [Performance Monitoring](https://github.com/invertase/react-native-firebase/tree/main/packages/perf) | [![badge](https://img.shields.io/npm/dm/@react-native-firebase/perf.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@react-native-firebase/perf) | | [Realtime Database](https://github.com/invertase/react-native-firebase/tree/main/packages/database) | [![badge](https://img.shields.io/npm/dm/@react-native-firebase/database.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@react-native-firebase/database) | | [Remote Config](https://github.com/invertase/react-native-firebase/tree/main/packages/remote-config) | [![badge](https://img.shields.io/npm/dm/@react-native-firebase/remote-config.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@react-native-firebase/remote-config) | ## Documentation - [Quick Start](https://rnfirebase.io/) - [Reference API](https://rnfirebase.io/reference) Looking for the Version 5 documentation? [View legacy documentation](https://v5.rnfirebase.io). ## Contributing - [Overview](https://github.com/invertase/react-native-firebase/blob/main/CONTRIBUTING.md) - [Issues](https://github.com/invertase/react-native-firebase/issues) - [PRs](https://github.com/invertase/react-native-firebase/pulls) - [Documentation](https://rnfirebase.io) - [Community](https://github.com/invertase/react-native-firebase/blob/main/CONTRIBUTING.md) - [Code of Conduct](https://github.com/invertase/.github/blob/main/CODE_OF_CONDUCT.md) ## License - See [LICENSE](/LICENSE) --- <p align="center"> <a href="https://invertase.io/?utm_source=readme&utm_medium=footer&utm_campaign=react-native-firebase"> <img width="75px" src="https://static.invertase.io/assets/invertase/invertase-rounded.png"> </a> <p align="center"> Built and maintained by <a href="https://invertase.io/?utm_source=readme&utm_medium=footer&utm_campaign=react-native-firebase">Invertase</a>. </p> </p>

Mobile Development Backend as a Service
12.3K Github Stars
react-native-google-mobile-ads
Open Source

react-native-google-mobile-ads

<p align="center"> <a href="https://docs.page/invertase/react-native-google-mobile-ads"> <img width="160px" src="./docs/img/logo_admob_192px.svg"><br/> </a> <h2 align="center">React Native Google Mobile Ads</h2> </p> <p align="center"> <a href="https://www.npmjs.com/package/react-native-google-mobile-ads"><img src="https://img.shields.io/npm/dm/react-native-google-mobile-ads.svg?style=flat-square" alt="NPM downloads"></a> <a href="https://www.npmjs.com/package/react-native-google-mobile-ads"><img src="https://img.shields.io/npm/v/react-native-google-mobile-ads.svg?style=flat-square" alt="NPM version"></a> <a href="/LICENSE"><img src="https://img.shields.io/npm/l/react-native-google-mobile-ads.svg?style=flat-square" alt="License"></a> </p> <p align="center"> <a href="https://invertase.link/discord"><img src="https://img.shields.io/discord/295953187817521152.svg?style=flat-square&colorA=7289da&label=Chat%20on%20Discord" alt="Chat on Discord"></a> <a href="https://twitter.com/invertaseio"><img src="https://img.shields.io/twitter/follow/invertaseio.svg?style=flat-square&colorA=1da1f2&colorB=&label=Follow%20on%20Twitter" alt="Follow on Twitter"></a> <a href="https://www.facebook.com/groups/invertase.io"><img src="https://img.shields.io/badge/Follow%20on%20Facebook-4172B8?logo=facebook&style=flat-square&logoColor=fff" alt="Follow on Facebook"></a> </p> --- **React Native Google Mobile Ads** allows you to monetize your app with AdMob; a React Native wrapper around the native Google-Mobile-Ads SDKs for both iOS and Android. React Native Google Mobile Ads is built with three key principals in mind; - πŸ§ͺ **Well tested** - the module is extensively tested to >95% coverage (getting there after moving from react-native-firebase!) - πŸ‘ **Well typed** - first class support for Typescript included - πŸ“„ **Well documented** - full reference & installation documentation alongside detailed guides and FAQs ## Ad formats ### App open App open ads are a special ad format intended for publishers wishing to monetize their app load screens. <img width="200" src="https://developers.google.com/static/admob/images/app-open-ad.png" alt="App open ad"> [Learn More](https://docs.page/invertase/react-native-google-mobile-ads/displaying-ads#app-open-ads) ### Banner Banner ad units display rectangular ads that occupy a portion of an app's layout. They stay on screen while users are interacting with the app, either anchored at the top or bottom of the screen or inline with content as the user scrolls. Banner ads can refresh automatically after a certain period of time. #### Anchored adaptive A dynamically sized banner that is full-width and auto-height. Anchored adaptive banners are expected to be always on-screen, locked to the screen’s top or bottom. <img width="200" src="https://developers.google.com/static/admob/images/Android_adaptive.png" alt="Anchored adaptive"> [Learn More](https://docs.page/invertase/react-native-google-mobile-ads/displaying-ads#banner-ads-component) #### Inline adaptive Inline adaptive banners are larger, taller banners compared to anchored adaptive banners. They are of variable height, and can be as tall as the device screen. They are intended to be placed in scrolling content. <img width="600" src="https://developers.google.com/static/admob/images/inline-adaptive.png" alt="Inline adaptive"> [Learn More](https://docs.page/invertase/react-native-google-mobile-ads/displaying-ads#banner-ads-component) #### Collapsible Collapsible banner ads are intended to improve performance of anchored ads that are otherwise a smaller size. <img width="400" src="https://developers.google.com/static/admob/images/collapsible-banner.png" alt="Collapsible banner"> [Learn More](https://docs.page/invertase/react-native-google-mobile-ads/displaying-ads#collapsible-banner-ads) #### Fixed size (legacy) The Google Mobile Ads SDK supports fixed ad sizes for situations where adaptive banners ads don't meet your needs. Banner (320x50), Large banner (320x100), Medium rectangle (300x250), full banner (468x60) and leaderboard (728x90). [Learn More](https://docs.page/invertase/react-native-google-mobile-ads/displaying-ads#banner-ads-component) ### Native Native ads allow you to customize the look and feel of the ads that appear in your app. You decide how and where they're placed, so the layout is more consistent your app's design. <img width="300" src="https://developers.google.com/static/admob/images/format-native.svg" alt="Native"> [Learn More](https://docs.page/invertase/react-native-google-mobile-ads/native-ads) ### Interstitial Interstitial ad units show full-page ads in your app. Place them at natural breaks & transitions in your app's interface, such as after level completion in a gaming app. <img width="300" src="https://developers.google.com/static/admob/images/format-interstitial.svg" alt="Interstitial"> [Learn More](https://docs.page/invertase/react-native-google-mobile-ads/displaying-ads#interstitial-ads) ### Rewarded AdMob rewarded ad units allow you to reward users with in-app items for interacting with video ads, playable ads, and surveys. <img width="300" src="https://developers.google.com/static/admob/images/format-rewarded.svg" alt="Rewarded"> [Learn More](https://docs.page/invertase/react-native-google-mobile-ads/displaying-ads#rewarded-ads) ### Rewarded Interstitial Rewarded interstitial is a type of incentivized ad format that allows you offer rewards for ads that appear automatically during natural app transitions. Unlike rewarded ads, users aren't required to opt-in to view a rewarded interstitial. <img width="300" src="https://developers.google.com/static/admob/images/format-rewarded-interstitial.svg" alt="Rewarded interstitial"> [Learn More](https://docs.page/invertase/react-native-google-mobile-ads/displaying-ads#rewarded-interstitial-ads) ## Migrating to the New Architecture Status (backwards compatible) This package can be used in both The Old and [The New Architecture](https://reactnative.dev/docs/the-new-architecture/landing-page). When using The New Architecture, some legacy code will still be used though. See status below: | Platform | Feature | Status | | -------- |----------------------------------------------------------------------------------------------------------------------------------------------------------------| ----------- | | iOS | Mobile Ads SDK Methods (Turbo Native Module) | βœ… Complete | | iOS | Banners (Fabric Native Component) | βœ… Complete | | iOS | Full Screen Ads (Turbo Native Module) | βœ… Complete | | iOS | Native Ads (Turbo Native Module, Fabric Native Component) | βœ… Complete | | iOS | User Messaging Platform (Turbo Native Module) | βœ… Complete | | iOS | [EventEmitter](https://github.com/reactwg/react-native-new-architecture/blob/main/docs/turbo-modules.md#add-event-emitting-capabilities) (Turbo Native Module) | ⏳ To-Do | | iOS | Revenue Precision Constants (Turbo Native Module) | βœ… Complete | | Android | Mobile Ads SDK Methods (Turbo Native Module) | ⏳ To-Do | | Android | Banners (Fabric Native Component) | ⏳ To-Do | | Android | Full Screen Ads (Turbo Native Module) | ⏳ To-Do | | Android | Native Ads (Turbo Native Module, Fabric Native Component) | βœ… Complete | | Android | User Messaging Platform (Turbo Native Module) | ⏳ To-Do | | Android | [EventEmitter](https://github.com/reactwg/react-native-new-architecture/blob/main/docs/turbo-modules.md#add-event-emitting-capabilities) (Turbo Native Module) | ⏳ To-Do | | Android | Revenue Precision Constants (Turbo Native Module) | ⏳ To-Do | ## Documentation - [Installation](https://docs.page/invertase/react-native-google-mobile-ads) - [Displaying Ads](https://docs.page/invertase/react-native-google-mobile-ads/displaying-ads) ## Contributing - [Issues](https://github.com/invertase/react-native-google-mobile-ads/issues) - [PRs](https://github.com/invertase/react-native-google-mobile-ads/pulls) - [Guidelines](https://github.com/invertase/react-native-google-mobile-ads/blob/main/CONTRIBUTING.md) - [Code of Conduct](https://github.com/invertase/.github/blob/main/CODE_OF_CONDUCT.md) ## License - See [LICENSE](/LICENSE) --- <p align="center"> <a href="https://invertase.io/?utm_source=readme&utm_medium=footer&utm_campaign=react-native-google-mobile-ads"> <img width="75px" src="https://static.invertase.io/assets/invertase/invertase-rounded-avatar.png"> </a> <p align="center"> Built and maintained by <a href="https://invertase.io/?utm_source=readme&utm_medium=footer&utm_campaign=react-native-google-mobile-ads">Invertase</a>. </p> </p>

Marketing & SEO Mobile Development
1K Github Stars