diff --git a/.gitignore b/.gitignore
index 7265300a..0757e05e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -62,3 +62,6 @@ dist/
# Expo Example prebuild generated files
ExpoExample/android
ExpoExample/ios
+
+# IntelliJ
+/.idea
diff --git a/example/babel.config.js b/example/babel.config.js
index f842b77f..aa01a78b 100644
--- a/example/babel.config.js
+++ b/example/babel.config.js
@@ -1,3 +1,22 @@
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
+ plugins: [
+ [
+ 'module-resolver',
+ {
+ root: ['./src'],
+ extensions: [
+ '.owl.ts',
+ '.owl.tsx',
+ '.owl.js',
+ '.owl.jsx',
+ '.ts',
+ '.tsx',
+ '.js',
+ '.jsx',
+ ],
+ alias: {},
+ },
+ ],
+ ],
};
diff --git a/example/metro.config.js b/example/metro.config.js
index 3635ddaa..9fbf97d9 100644
--- a/example/metro.config.js
+++ b/example/metro.config.js
@@ -14,6 +14,28 @@ const extraNodeModules = {
};
const watchFolders = [path.resolve(path.join(__dirname, '..', 'dist'))];
+const resolver = {
+ extraNodeModules: new Proxy(extraNodeModules, {
+ get: (target, name) =>
+ name in target
+ ? target[name]
+ : path.join(process.cwd(), `node_modules/${name}`),
+ }),
+};
+
+if (process.env.OWL_BUILD) {
+ resolver.sourceExts = [
+ 'owl.ts',
+ 'owl.tsx',
+ 'owl.js',
+ 'owl.jsx',
+ 'ts',
+ 'tsx',
+ 'js',
+ 'jsx',
+ ];
+}
+
module.exports = {
transformer: {
getTransformOptions: async () => ({
@@ -23,13 +45,6 @@ module.exports = {
},
}),
},
- resolver: {
- extraNodeModules: new Proxy(extraNodeModules, {
- get: (target, name) =>
- name in target
- ? target[name]
- : path.join(process.cwd(), `node_modules/${name}`),
- }),
- },
+ resolver,
watchFolders,
};
diff --git a/example/src/PressMe.button.owl.tsx b/example/src/PressMe.button.owl.tsx
new file mode 100644
index 00000000..39da6dab
--- /dev/null
+++ b/example/src/PressMe.button.owl.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Button } from 'react-native';
+
+export const PressMeButton = () => {
+ return ;
+};
diff --git a/example/src/PressMe.button.tsx b/example/src/PressMe.button.tsx
new file mode 100644
index 00000000..c9637b49
--- /dev/null
+++ b/example/src/PressMe.button.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Button } from 'react-native';
+
+export const PressMeButton = () => {
+ return ;
+};
diff --git a/example/src/PressMe.tsx b/example/src/PressMe.tsx
new file mode 100644
index 00000000..2e12435a
--- /dev/null
+++ b/example/src/PressMe.tsx
@@ -0,0 +1,106 @@
+import {
+ ActivityIndicator,
+ Pressable,
+ StyleSheet,
+ Text,
+ TextInput,
+ View,
+} from 'react-native';
+import React from 'react';
+import { PressMeButton } from './PressMe.button';
+
+export const PressMe = () => {
+ const [text, setText] = React.useState('');
+ const [isLongPressed, setIsLongPressed] = React.useState(false);
+ const [isLoading, setIsLoading] = React.useState(false);
+ const [isLoaded, setIsLoaded] = React.useState(false);
+
+ React.useEffect(() => {
+ if (isLoading) {
+ setTimeout(() => {
+ setIsLoading(false);
+ setIsLoaded(true);
+ }, 1500);
+ }
+ }, [isLoading]);
+
+ return (
+
+ {!isLoaded && !isLoading && (
+ setIsLoading(true)}
+ onLongPress={() => setIsLongPressed(true)}
+ style={styles.button}
+ >
+ Press Me
+ →
+
+ )}
+
+ {isLoading && }
+
+ {isLongPressed && !isLoading && !isLoaded && (
+ Long Pressed!
+ )}
+
+ {!isLoading && isLoaded && (
+ <>
+ This is a label *
+
+
+
+
+ >
+ )}
+
+ );
+};
+
+const styles = StyleSheet.create({
+ header: {
+ marginVertical: 35,
+ },
+ button: {
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ borderWidth: 2,
+ paddingVertical: 7.5,
+ paddingHorizontal: 20,
+ borderRadius: 20,
+ },
+ textLongPressed: {
+ marginTop: 35,
+ fontSize: 20,
+ fontStyle: 'italic',
+ textAlign: 'center',
+ },
+ textInputLabel: {
+ fontWeight: '600',
+ marginBottom: 5,
+ paddingHorizontal: 20,
+ },
+ textInput: {
+ borderWidth: 1,
+ paddingVertical: 12,
+ paddingHorizontal: 20,
+ borderRadius: 20,
+ },
+ highlight: {
+ fontWeight: '700',
+ },
+ buttonText: {
+ fontSize: 16,
+ fontWeight: '600',
+ },
+ buttonArrow: {
+ fontSize: 20,
+ },
+});
diff --git a/lib/cli/build.ts b/lib/cli/build.ts
index fdbb488e..e0edc640 100644
--- a/lib/cli/build.ts
+++ b/lib/cli/build.ts
@@ -15,7 +15,7 @@ export const buildIOS = async (
const buildCommand = config.ios?.buildCommand
? [config.ios?.buildCommand]
: [
- `xcodebuild`,
+ `env OWL_BUILD=1 xcodebuild`,
`-workspace ${config.ios?.workspace}`,
`-scheme ${config.ios?.scheme?.split(' ').join('\\ ')}`,
`-configuration ${config.ios?.configuration}`,
diff --git a/native/android/src/main/java/com/formidable/reactnativeowl/ReactNativeOwlModule.java b/native/android/src/main/java/com/formidable/reactnativeowl/ReactNativeOwlModule.java
index 32b37181..41687a98 100644
--- a/native/android/src/main/java/com/formidable/reactnativeowl/ReactNativeOwlModule.java
+++ b/native/android/src/main/java/com/formidable/reactnativeowl/ReactNativeOwlModule.java
@@ -1,15 +1,26 @@
package com.formidable.reactnativeowl;
+import android.app.Activity;
+import android.view.View;
+
import androidx.annotation.NonNull;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.UiThreadUtil;
import com.facebook.react.module.annotations.ReactModule;
@ReactModule(name = ReactNativeOwlModule.NAME)
public class ReactNativeOwlModule extends ReactContextBaseJavaModule {
public static final String NAME = "ReactNativeOwl";
+ private static final int UI_FLAG_IMMERSIVE = View.SYSTEM_UI_FLAG_LAYOUT_STABLE
+ | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
+ | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
+ | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION // hide nav bar
+ | View.SYSTEM_UI_FLAG_FULLSCREEN // hide status bar
+ | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY;
+
public ReactNativeOwlModule(ReactApplicationContext reactContext) {
super(reactContext);
}
diff --git a/package.json b/package.json
index a2263e1d..3ce95ff9 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,8 @@
"watch": "tsc --watch",
"prettier:check": "prettier --check 'lib/**/*.{js,ts,tsx}'",
"prettier:apply": "prettier --write 'lib/**/*.{js,ts,tsx}'",
- "test": "yarn jest"
+ "test": "yarn jest",
+ "example": "yarn --cwd example"
},
"repository": "https://github.com/FormidableLabs/react-native-owl",
"author": "Emmanouil Konstantinidis ",