Add support for mocking files

Author: ceceppa

.gitignore

@@ -62,3 +62,6 @@ dist/
 # Expo Example prebuild generated files
 ExpoExample/android
 ExpoExample/ios
+
+# IntelliJ
+/.idea

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: {},
+      },
+    ],
+  ],
 };

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,
 };

example/src/PressMe.button.owl.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Button } from 'react-native';
+
+export const PressMeButton = () => {
+  return <Button title={'Owl Button'} />;
+};

example/src/PressMe.button.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Button } from 'react-native';
+
+export const PressMeButton = () => {
+  return <Button title={'App Button'} />;
+};

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 (
+    <View style={styles.header}>
+      {!isLoaded && !isLoading && (
+        <Pressable
+          testID="Pressable"
+          onPress={() => setIsLoading(true)}
+          onLongPress={() => setIsLongPressed(true)}
+          style={styles.button}
+        >
+          <Text style={styles.buttonText}>Press Me</Text>
+          <Text style={styles.buttonArrow}>&#8594;</Text>
+        </Pressable>
+      )}
+
+      {isLoading && <ActivityIndicator />}
+
+      {isLongPressed && !isLoading && !isLoaded && (
+        <Text style={styles.textLongPressed}>Long Pressed!</Text>
+      )}
+
+      {!isLoading && isLoaded && (
+        <>
+          <Text style={styles.textInputLabel}>This is a label *</Text>
+
+          <TextInput
+            testID="TextInput"
+            placeholder="Type something here"
+            onChangeText={setText}
+            value={text}
+            style={styles.textInput}
+          />
+
+          <PressMeButton />
+        </>
+      )}
+    </View>
+  );
+};
+
+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,
+  },
+});

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}`,

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);
     }

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 <[email protected]>",