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

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

<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.

<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.

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

Tile / GradientTile

Reusable tile components.

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

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

QR Code Screen

A generic, configurable QR code form + result screen.

Basic Usage

<QrCodeScreen
  TextComponent={Text}
  endpoint={endpoint}
  fields={fields}
  title="Check-in QR"

  renderAboveQRCode={renderAboveQRCode}
  renderBelowQRCode={renderBelowQRCode}

  successButtons={['refresh', 'reset', 'back']}
  onBack={() => navigation.goBack()}
/>

Data Contract

{
  "token": "...",
  "status": "pending",
  "error": null
}

• HTTP always returns 200
• logical errors come via error
• component treats error as failure

Render Hooks

renderAboveQRCode

const renderAboveQRCode = ({ response }) => {
  if (response.status !== 'pending') {
    return null;
  }

  return (
    <>
      <Text>Awaiting Check-in</Text>
      <Text>Present this QR code at the entry desk</Text>
    </>
  );
};

renderBelowQRCode

const renderBelowQRCode = ({ fields, values }) => {
  return (
    <View>
      {fields.map((field) => (
        <View key={field.key}>
          <Text>{field.label}:</Text>
          <Text>{values[field.key]}</Text>
        </View>
      ))}
    </View>
  );
};

Multi-step Status Example

const steps = [
  { key: 'pending', label: 'Pending' },
  { key: 'checked_in', label: 'Checked-in' },
  { key: 'goodie_bag_received', label: 'Goodie-bag-received' },
];

const renderAboveQRCode = ({ response }) => {
  const currentIndex = steps.findIndex(
    (step) => step.key === response.status
  );

  return (
    <>
      <Text>Event Status</Text>
      <View>
        {steps.map((step, idx) => {
          const isCurrent = idx === currentIndex;
          const isDone = idx < currentIndex;

          return (
            <Text key={step.key}>
              {step.label}
              {isCurrent ? ' (current)' : ''}
              {isDone ? ' (done)' : ''}
            </Text>
          );
        })}
      </View>
    </>
  );
};

Success Buttons

successButtons={['refresh', 'reset', 'back']}

Supported:

• refresh
• reset
• back

Default:

['refresh', 'reset']

Responsibilities

Component:

• form state
• persistence
• API calls
• error handling
• QR rendering
• success actions

Caller:

• status UI
• layout above/below QR
• mapping status to UI

Utils

openExternal

Helper for opening:

• URLs
• apps (deep links)
• Play Store / App Store fallback

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).

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.

License

Please be aware that this project is GPLv3 or later.