React Native PoC

[ericclemmons]

Running it locally

yarn install
yarn expo-managed start

Then use GUI to launch iOS simulator.

Approach

I attempted to only use @aws-amplify/ui-react and fork implementations where necessary via .native.ts?(x) extension:

• primitives/index.natives.tsx
• AmplifyProvider/index.tsx

Discoveries

Form Limitations

HTML <form onChange onSubmit> can handle all input events thanks to event bubbling. However, React Native does not have event bubbling.

This requires registering and tracking each input separately. So far, the cleanest API I've seen for solving this is:

https://github.com/react-hook-form/react-hook-form

Styling Limitations

The existing aws-amplify-react-native library uses theme for overriding the Stylesheet:

https://docs.amplify.aws/ui/auth/authenticator/q/framework/react-native#using-withauthenticator-hoc

Unlike CSS, React Native doesn't support cascading. Each element has to be styled separately with a style prop, often with Stylesheet.create().

This raises of how should we style each React Native component in the Authenticator with a default theme just as a customer would?.

With the web implementation, we can rely on targeted CSS selectors (e.g. [data-authenticator] [data-label]) as part of import "@aws-amplify/ui/styles.css", but CSS is a noop in React Native.

Code Re-use

Should React Native be published as @aws-amplify/ui-react or @aws-amplify/ui-react-native?

The authMachine.ts file is readily re-used, and all exports of @aws-amplify/ui-react are re-exported under @aws-amplify/ui-react-native.

All React components are currently being re-used, with .native.tsx shadows for defaultTheme, primitives, and AmplifyProvider.

---

Remaining Work

• Replicate a working example of the existing React example.
• Not solve for sharing form logic between React & React Native.