Blank Hyperview app expo template

[flochtililoch]

Expo client init command supports creating a new app based on a NPM released package that contains an Expo project template. We should create one to facilitate creating new apps based on Hyperview.

% expo init --help

...

-t, --template [name]  Specify which template to use. Valid options are "blank", "tabs", "bare-minimum" or a package on npm (e.g. "expo-template-bare-minimum") that includes an Expo project template.

[adamstep]

I didn't know about this feature of Expo, it would definitely make it easy for developers to create a new Hyperview app from scratch.

[Tobi-De]

Hey there, I recently initiated a discussion without properly doing my homework first.

I want to work on this. Should I assume that the template will mostly resemble a direct copy of the demo app?

[flochtililoch]

Thanks @Tobi-De for reaching out! The demo app is a good starting point, although there might be a bit of specific logic that we might not want to embed in the generator.
In particular, we have been in the process of building support for representing the navigation structure directly in Hyperview, and our demo app will soon embed both this new navigation system, as well as the older system where navigation is externally provided (in #799).
However, the generator's template should most likely need to only embed the part of the code that sets up Hyperview with the new navigation system. This simplifies the boilerplate needed quite a bit.
I'll circle back later today with a simple example of what a bare Hyperview app with navigation can look like, so you can get the idea of what to use as a template.

[Tobi-De]

Thanks @Tobi-De for reaching out! The demo app is a good starting point, although there might be a bit of specific logic that we might not want to embed in the generator. In particular, we have been in the process of building support for representing the navigation structure directly in Hyperview, and our demo app will soon embed both this new navigation system, as well as the older system where navigation is externally provided (in #799). However, the generator's template should most likely need to only embed the part of the code that sets up Hyperview with the new navigation system. This simplifies the boilerplate needed quite a bit. I'll circle back later today with a simple example of what a bare Hyperview app with navigation can look like, so you can get the idea of what to use as a template.

Alright, thanks. Once I can see an example, I'll prepare a draft pull request for the template.

[flochtililoch]

This is an example of a bare Hyperview app:

import Hyperview from 'hyperview';
import moment from 'moment';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default () => {
  return (
    <NavigationContainer>
      <Hyperview
        behaviors={[]} // Add your custom behaviors here
        components={[]} // Add your custom components here
        entrypointUrl="https://yourserver.com/index.xml"
        fetch={fetch}
        formatDate={(date: Date, format: string) => {
          moment(date).format(format);
        }}
      />
    </NavigationContainer>
  );
};

and set of dependencies required:

"hyperview"
"moment"
"@react-native-community/datetimepicker"
"@react-native-picker/picker"
"@react-navigation/bottom-tabs"
"@react-navigation/native"
"@react-navigation/stack"
"@types/react"
"react"
"react-native"
"react-native-gesture-handler"
"react-native-keyboard-aware-scrollview"
"react-native-safe-area-context"
"react-native-webview"

although that list might need to be refined, as I assume a few are already provided by expo (react, react native, etc).

Note: moment is only a requirement on that given example, and could easily be swapped with luxon or removed, as long as the formatDate prop is set to a custom implementation.

[flochtililoch]

hi @Tobi-De - checking in, is my example above enough to get you started? Let me know if you're still looking into getting a draft PR out, thanks!

[Tobi-De]

hi @Tobi-De - checking in, is my example above enough to get you started? Let me know if you're still looking into getting a draft PR out, thanks!

yep I think so, still going to work on this, just a bit busy lately.
Right now I'm looking for a package or example repo that comes with a template, from my research I haven't seen any reference in the expo documentation itself on how to build a template, I'm not very familiar with the react native ecosystem, but I'll find something :)

Update: Found what I needed

[flochtililoch]

sounds good, let me know if you need additional guidance, and thanks for the update!