npm package: @opndev/opndev-react-native-events
Description: React Native code for events
Author: Wesley Schwengle
Latest version: 0.0.2

<!--
SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesley@opndev.io>

SPDX-License-Identifier: MIT
-->

# Welcome to @opndev/opndev-react-native-events

Reusable React Native / Expo components for event-style apps.

Focus:
- fast to build
- minimal dependencies
- reusable across projects
- no app-specific assumptions

This package provides a small set of building blocks for:

- hero / parallax screens
- vendor grids
- menu-style content
- tile-based navigation
- external link / app launching

## Installation

```bash
npm install @opndev/opndev-react-native-events
```

Peer dependencies are expected to be installed by the consuming app.

## Components

### HeroScreen

Base layout for screens with:
- parallax header image
- optional overlay (title, back button, etc)
- scrollable content

```jsx
<HeroScreen
  headerImage={<Image ... />}
  headerOverlay={<Text>Title</Text>}
>
  {children}
</HeroScreen>
```

### ParallaxScrollView

Low-level scroll + animation component used by `HeroScreen`.

Theme-agnostic. Consumers inject:
- colors
- content wrapper
- styling overrides

### FoodVendorScreen

Grid of vendor tiles.

```jsx
<FoodVendorScreen
  title="Food vendors"
  headerImage={<Image ... />}
  vendors={[
    { key: 'bar', label: 'Bar' },
  ]}
  onSelectVendor={(vendor) => {
    // navigation handled by app
  }}
/>
```

### FoodMenuScreen

Menu-style screen with categories and items.

```jsx
<FoodMenuScreen
  title="Bar"
  headerImage={<Image ... />}
  menu={vendor.menu}
  onBack={() => router.back()}
/>
```

### Tile / GradientTile

Reusable tile components.

```jsx
<Tile
  label="Info"
  onPress={...}
/>

<GradientTile
  label="Bar"
  colors={['#F4D645', '#9FDEED']}
  onPress={...}
/>
```

## Utils

### openExternal

Helper for opening:
- URLs
- apps (deep links)
- Play Store / App Store fallback

```js
import { openExternal } from '@opndev/opndev-react-native-events';

openExternal({
  url: 'instagram://user?username=...',
  packageName: 'com.instagram.android',
  appStoreUrl: 'https://apps.apple.com/app/instagram',
});
```

Internal navigation is intentionally **not handled** by this package.

## Development

Try to keep functions small and try not to depend on any outside functions. We
aim to keep the dependency graph as small as possible. The use of `esm` is
welcomed and writing tests is encouraged.

### jsdoc

You can build the documentation by running `npm run jsdoc`.

### eslint

The ES Linting profile is flexible and does not try to enforce much. There is
more than one way to do it ([TIMTOWTDI](https://en.wikipedia.org/wiki/There%27s_more_than_one_way_to_do_it)).

Try to stay constistent, but forcing a programming style upon others is bad.

## Code of Conduct

Be human.

## Semver

This project does not adhere to semver and one should not rely on the version
x.y.z notation to infer stability or reliability. Read the Changes file to see
any updates a version may bring. The fact that this module sits currently at
0.x.z ranges does not indicate alpha or beta or even unstable associations. It
is just a number and we started at 0.0.1.

In general the following hard guarantee will be given: We will not break your
code. In case we do happen to cause breakage: we will fix it accordingly.

In case we foresee breaking changes we'll add deprecation warnings. Giving you
time to fix things before a breaking change will be introduced. When a change
will be introduced is communicated in the Changes file. Security fixes may
cause breakage at any given time without notice.

This package is released by `@opndev/rzilla`, changes to `package.json` will be
overridden. In addition to a little bit of promotion, this also means that
version numbers are autoincremented at release time and bumped in all relevant
files: Versioning for humans, not machines.