add a partial working example for keyboard events

still missing invocation and handling of typing events
barelyhuman · Oct 14, 2022 · 7218ef9 · 7218ef9
1 parent 3af8110
commit 7218ef9
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 19 deletions.
diff --git a/core/src/components.js b/core/src/components.js
@@ -11,3 +11,11 @@ export function View({ ...props }) {
 export function Text({ ...props }) {
   return h('Text', props)
 }
+
+export function TextInput({ ...props }) {
+  const text = props.value
+  const baseComponentName = props.multiline
+    ? 'MultilineTextInputView'
+    : 'SinglelineTextInputView'
+  return h(baseComponentName, { ...props, text })
+}
diff --git a/dom/src/register-native-dom.js b/dom/src/register-native-dom.js
@@ -9,5 +9,6 @@ export function registerNativeDOM() {
     const withoutNativeName = constName.replace(/^RCT/, '')
     ITEMS.push([withoutNativeName, constName])
   })
+
   ITEMS.forEach(x => registerHostElement(x[0], x[1], x[2]))
 }
diff --git a/example/App.js b/example/App.js
@@ -1,15 +1,15 @@
+/** @jsxImportSource preact */
+
 import {
-  createDOM,
-  registerNativeDOM,
-  SafeAreaView,
-  View,
+  TextInput,
   Text,
-} from '@barelyhuman/preact-native'
+  View,
+  SafeAreaView,
+} from '@barelyhuman/preact-native/core'
+import { registerNativeDOM, createDOM } from '@barelyhuman/preact-native/dom'
+import { Component, render, h } from 'preact'
 import { Alert } from 'react-native'
 
-/** @jsxImportSource preact */
-import { Component, render } from 'preact'
-
 let document
 
 function App({ rootTag }) {
@@ -39,17 +39,55 @@ class Renderable extends Component {
     const { count } = this.state
     return (
       <>
-        <SafeAreaView>
+        <SafeAreaView backgroundColor="#181819">
           <View
-            backgroundColor="black"
-            margin={10}
-            borderRadius={10}
-            justifyContent="center"
-            alignItems="center"
+            height="100%"
+            width="100%"
             padding={10}
-            onClick={this.handleClick}
+            alignItems="center"
+            justifyContent="center"
           >
-            <Text color="white">Count {count}</Text>
+            <TextInput
+              width={'100%'}
+              height={52}
+              marginBottom={8}
+              padding={10}
+              placeholder="email"
+              borderRadius={10}
+              borderWidth={1}
+              borderColor="slategray"
+              color="white"
+              backgroundColor="transparent"
+            />
+            <TextInput
+              width={'100%'}
+              height={52}
+              marginBottom={8}
+              padding={10}
+              placeholder="password"
+              secureTextEntry={true}
+              borderRadius={10}
+              borderWidth={1}
+              borderColor="slategray"
+              color="white"
+              backgroundColor="transparent"
+            />
+            <View
+              height={52}
+              padding={15}
+              width={'100%'}
+              borderRadius={6}
+              justifyContent="center"
+              alignItems="center"
+              backgroundColor="white"
+              onClick={() => {
+                Alert.alert('Yeah, no, not happening')
+              }}
+            >
+              <Text fontSize={16} fontWeight="bold">
+                Login
+              </Text>
+            </View>
           </View>
         </SafeAreaView>
       </>

diff --git a/example/package.json b/example/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "android": "react-native run-android",
-    "ios": "react-native run-ios --simulator='iPhone SE (2nd generation)'",
+    "ios": "react-native run-ios",
     "start": "react-native start",
     "test": "jest",
     "lint": "eslint ."

diff --git a/tsconfig.json → jsconfig.json b/tsconfig.json → jsconfig.json
@@ -6,11 +6,10 @@
     "lib": ["dom", "es5"],
     "skipLibCheck": true,
     "noEmit": false,
-    "declaration": true,
-    "emitDeclarationOnly": true,
     "moduleResolution": "node",
     "target": "es5",
     "outDir": "dist",
+    "esModuleInterop": true,
     "paths": {
       "@barelyhuman/preact-native": ["."],
       "@barelyhuman/preact-native/*": ["./*"]