# @getoptimal/react-native

> ## Quick Start

Latest version **0.3.14** (published 2023-10-20) · 0 weekly downloads

## Install

```sh
npm install @getoptimal/react-native
pnpm add @getoptimal/react-native
yarn add @getoptimal/react-native
bun add @getoptimal/react-native
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.14 |
| Published | 2023-10-20 |
| First published | 2023-04-24 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 34.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | utku_turunc, danduma |

## Links

- npm: https://www.npmjs.com/package/@getoptimal/react-native
- npm.io page: https://npm.io/package/@getoptimal/react-native

## Dependencies (5)

- [@getoptimal/js-sdk](https://npm.io/package/@getoptimal/js-sdk.md) 0.3.14
- [@tanstack/react-query](https://npm.io/package/@tanstack/react-query.md) ^4.29.5
- [@getoptimal/react-helpers](https://npm.io/package/@getoptimal/react-helpers.md) 0.3.14
- [react-native-url-polyfill](https://npm.io/package/react-native-url-polyfill.md) ^1.3.0
- [@react-native-community/netinfo](https://npm.io/package/@react-native-community/netinfo.md) ^9.4.1

## Recent versions

- 0.3.14 (latest) — 2023-10-20
- 0.3.13 — 2023-10-20
- 0.3.12 — 2023-10-20
- 0.3.11 — 2023-10-20
- 0.3.10 — 2023-10-13
- 0.3.9 — 2023-05-15
- 0.3.8 — 2023-05-15
- 0.3.7 — 2023-05-15
- 0.3.6 — 2023-05-13
- 0.3.4 — 2023-05-11
- 0.3.3 — 2023-05-05
- 0.3.2 — 2023-05-05
- 0.3.1 — 2023-05-05
- 0.3.0 — 2023-05-05
- 0.2.2 — 2023-05-04
- … 8 more at https://npm.io/package/@getoptimal/react-native/versions

## README

# Optimal React Native SDK

## Quick Start

### Installation

Install the package with your package manager of choice:

```bash
# npm
npm install @getoptimal/react-native

# yarn
yarn add @getoptimal/react-native

# pnpm
pnpm add @getoptimal/react-native
```

Then simply include `OptimalProvider` in the root of your app:

```tsx
<OptimalProvider>
  <MyApp />
</OptimalProvider>;
```

### Usage

See the following example for a quick start. `GetAdOpts` can be obtained from
the Optimal team.

Following example will render the ad automatically, if you would like to have
more control, check the next example.

#### Automatic

```jsx
import { OptimalAd } from "@getoptimal/react-native";

const opts = {
  publisher: "publisher",
  adTypes: ["ad type"],
  viewerData: {
    wallets: ["1:wallet"],
  },
};

export const MyComponent = () => {
  return (
    <OptimalAd
      renderLoading={() => {
        return <Text>i am loading</Text>;
      }}
      containerStyle={{ width: "100%" }}
      opts={opts}
    />
  );
};
```

#### Manual

You can also use the following example for custom ads:

```tsx
import { Text } from 'react-native';
import { type OptimalPredefinedAdProps, OptimalCustomAd } from "@getoptimal/react-native";

export const MyAd = (props: OptimalPredefinedAdProps) => {
  return (
    <OptimalCustomAd
      {...props}
      renderAd={(decision) => {
        return <Text>your custom component</Text>
      }
    />
  );
};
```

### Typings

Typescript typings are included in the package.

### More Examples

See the example app
[stories](https://github.com/0xOptimal/optimal-js-sdk/tree/main/apps/react-native-test-app/src/components)
for more examples.

---
_Source: https://npm.io/package/@getoptimal/react-native · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._