Warning: This is an experimental approach at creating a renderer for preact

Note: until this reaches v1.0.0, the entire featureset might change, since we are still figuring out what works best

I wouldn't really recommend using this for production but putting down the base usage setup so that anyone who'd wish to help with development can at least get a test environment ready.

$ npm install @barelyhuman/preact-native preact

1. Setup a base react native project using npx react-native init
2. Change index.js to include the withPreact from the library

/**  * @format  */ import { AppRegistry } from 'react-native' import App from './App' import { name as appName } from './app.json' import { withPreact } from '@barelyhuman/preact-native' AppRegistry.registerComponent(appName, () => withPreact(App))

3. Then add the following to the top of the App.js file

/** @jsxImportSource preact */ import { SafeAreaView, View, Text, TextInput } from '@barelyhuman/preact-native'

4. Once the above is setup, you can just go ahead and write preact components as usual.

Note: instead of preact/hooks please use @preact/signals for the time being, once fixed this note will be removed

Eg:

/** @jsxImportSource preact */ import { SafeAreaView, View, Text } from '@barelyhuman/preact-native' export default function App() { return <Home /> } function Home() { return ( <> <SafeAreaView> <View> <Text color={'red'}>Hello</Text> </View> </SafeAreaView> </> ) }

Note: All react related stuff (react as a dep and render tree needing react) will be removed from the library once I can handle creation of all these native modules manually without having to re-write the entire react native base from scratch

• A minimal dom
• Create views from the bridge instead of rendering with react
  • Create native views (Views created on the iOS and Android platform APIs)
  • Create derived views (Views created on top of the above by manipulating the SDK)
• Update view styles from the bridge
• Update text nodes from the bridge
• Add compat for preact to make it possible for preact to diff and render without the need for a react tree generator import {render} from "preact-native/dom"
• Handle events (presses, input, gestures) , aka events from preact will be on the DOM, need to be proxied as events to the Native SDK
• Handling for Bridge level style props

read the CONTRIBUTING.md

It seemed like a nice project to try out my limits in terms of complicated stuff and also because I got bored of building websites. Also, I personally think preact has become a lot more stable and has less breaking changes every 3 versions thus making it easier to maintain and upgrade older projects.

MIT © reaper