react-native-ui-lib 8.1.1 → 8.1.5

package/lib/android/src/main/java/com/wix/reactnativeuilib/keyboardinput/ReactSoftKeyboardMonitor.java

@@ -0,0 +1,163 @@
+package com.wix.reactnativeuilib.keyboardinput;
+
+import android.graphics.Rect;
+import android.view.ViewTreeObserver;
+import android.view.Window;
+
+import androidx.annotation.Nullable;
+
+import com.facebook.react.ReactRootView;
+import com.wix.reactnativeuilib.keyboardinput.utils.RuntimeUtils;
+
+import static com.wix.reactnativeuilib.keyboardinput.utils.ViewUtils.getWindow;
+
+public class ReactSoftKeyboardMonitor implements ReactScreenMonitor.Listener {
+
+    public interface Listener {
+        void onSoftKeyboardVisible(boolean distinct);
+        void onSoftKeyboardHidden();
+    }
+
+    private final ViewTreeObserver.OnGlobalLayoutListener mInnerLayoutListener = new ViewTreeObserver.OnGlobalLayoutListener() {
+        @Override
+        public void onGlobalLayout() {
+            Integer viewportVisibleHeight = getViewportVisibleHeight();
+            if (viewportVisibleHeight == null || viewportVisibleHeight.equals(mLastViewportVisibleHeight)) {
+                return;
+            }
+
+            mLastViewportVisibleHeight = viewportVisibleHeight;
+            if (mMaxViewportVisibleHeight == null) {
+                mMaxViewportVisibleHeight = viewportVisibleHeight;
+            } else if (viewportVisibleHeight < mMaxViewportVisibleHeight) {
+                mExternalListener.onSoftKeyboardVisible(!mSoftKeyboardUp);
+                refreshKeyboardHeight();
+                mSoftKeyboardUp = true;
+            } else {
+                mSoftKeyboardUp = false;
+                mExternalListener.onSoftKeyboardHidden();
+            }
+        }
+    };
+
+    /**
+     * Soft-keyboard appearance (yes or no) is deduced according to <b>view-port</b> (window-level display-frame), as
+     * root-view height normally remains unaffected during immediate layout. We therefore keep the maximal view-port size so we could
+     * concurrently compare heights in each layout.
+     */
+    private Integer mMaxViewportVisibleHeight;
+
+    private Integer mLastViewportVisibleHeight;
+
+    /**
+     * Soft-keyboard *height* (when visible) is deduced by the effect on the root react-view height. This is ineffective in trying to
+     * monitor keyboard appearance -- only for height measuring.
+     */
+    private Integer mLocallyVisibleHeight;
+
+    private boolean mSoftKeyboardUp;
+    private Integer mKeyboardHeight;
+    private Listener mExternalListener;
+    private ReactRootView mLastReactRootView;
+
+    public ReactSoftKeyboardMonitor(ReactScreenMonitor screenMonitor) {
+        screenMonitor.addListener(this);
+    }
+
+    @Override
+    public void onNewReactScreen(ReactRootView reactRootView) {
+        removeReactRootViewLayoutListener();
+        mLastReactRootView = reactRootView;
+
+        if (mLastReactRootView != null) { // 'Null' is applicable when activity is going down (e.g. bundle reload in RN dev mode)
+            registerReactRootViewLayoutListener();
+
+            initViewportVisibleHeight(); // TODO: running this each time might be redundant
+            initLocallyVisibleHeight();
+        }
+    }
+
+    public void setListener(Listener listener) {
+        mExternalListener = listener;
+    }
+
+    @Nullable
+    public Integer getKeyboardHeight() {
+        if (mKeyboardHeight != null) {
+            return mKeyboardHeight;
+        }
+
+        if (mLocallyVisibleHeight != null) {
+            return (int) (.5f * mLocallyVisibleHeight);
+        }
+
+        return null;
+    }
+
+    private void registerReactRootViewLayoutListener() {
+        final ViewTreeObserver viewTreeObserver = mLastReactRootView.getViewTreeObserver();
+        viewTreeObserver.addOnGlobalLayoutListener(mInnerLayoutListener);
+    }
+
+    private void removeReactRootViewLayoutListener() {
+        if (mLastReactRootView != null) {
+            final ViewTreeObserver viewTreeObserver = mLastReactRootView.getViewTreeObserver();
+            viewTreeObserver.removeOnGlobalLayoutListener(mInnerLayoutListener);
+        }
+    }
+
+    private void initViewportVisibleHeight() {
+        mMaxViewportVisibleHeight = getViewportVisibleHeight();
+        mLastViewportVisibleHeight = null;
+    }
+
+    private void initLocallyVisibleHeight() {
+        mLocallyVisibleHeight = getLocallyVisibleHeight();
+        mKeyboardHeight = null; // Reset so the keyboard would be measured in the next opportunity.
+    }
+
+    private void refreshKeyboardHeight() {
+        if (mKeyboardHeight != null) {
+            return;
+        }
+
+        RuntimeUtils.runOnUIThread(new Runnable() {
+            @Override
+            public void run() {
+                final Integer locallyVisibleHeight = getLocallyVisibleHeight();
+                if (locallyVisibleHeight == null) {
+                    // Too late to join the party - react-view seems to be gone...
+                    return;
+                }
+
+                if (mLocallyVisibleHeight == null) {
+                    mLocallyVisibleHeight = locallyVisibleHeight;
+                    mKeyboardHeight = mLocallyVisibleHeight;
+                } else if (mLocallyVisibleHeight > locallyVisibleHeight) {
+                    mKeyboardHeight = mLocallyVisibleHeight - locallyVisibleHeight;
+                } else {
+                    mKeyboardHeight = locallyVisibleHeight;
+                }
+            }
+        });
+    }
+
+    private Integer getViewportVisibleHeight() {
+        Integer visibleHeight = null;
+        final Rect visibleArea = new Rect();
+        Window window = getWindow();
+        if (window != null) {
+            window.getDecorView().getWindowVisibleDisplayFrame(visibleArea);
+            visibleHeight = visibleArea.height();
+        }
+
+        return visibleHeight;
+    }
+
+    private Integer getLocallyVisibleHeight() {
+        if (mLastReactRootView != null) {
+            return mLastReactRootView.getHeight();
+        }
+        return null;
+    }
+}

package/lib/android/src/main/java/com/wix/reactnativeuilib/keyboardinput/utils/PredicateFunc.java

@@ -0,0 +1,5 @@
+package com.wix.reactnativeuilib.keyboardinput.utils;
+
+public interface PredicateFunc<T> {
+    boolean invoke(T element);
+}

package/lib/android/src/main/java/com/wix/reactnativeuilib/keyboardinput/utils/RuntimeUtils.java

@@ -0,0 +1,33 @@
+package com.wix.reactnativeuilib.keyboardinput.utils;
+
+import com.facebook.react.uimanager.UIManagerModule;
+import com.wix.reactnativeuilib.keyboardinput.ReactContextHolder;
+
+public class RuntimeUtils {
+
+    // TODO Switch to GuardedRunnable when upgrading RN's minimal ver
+    private static final Runnable sUIUpdateClosure = new Runnable() {
+        @Override
+        public void run() {
+            // ReactContextHolder.getContext().getNativeModule(UIManagerModule.class).onBatchComplete();
+        }
+    };
+
+    public static void runOnUIThread(Runnable runnable) {
+        if (ReactContextHolder.getContext() != null) {
+            ReactContextHolder.getContext().runOnUiQueueThread(runnable);
+        }
+    }
+
+    public static void dispatchUIUpdates(final Runnable userRunnable) {
+        runOnUIThread(new Runnable() {
+            @Override
+            public void run() {
+                userRunnable.run();
+                if (ReactContextHolder.getContext() != null) {
+                    ReactContextHolder.getContext().runOnNativeModulesQueueThread(sUIUpdateClosure);
+                }
+            }
+        });
+    }
+}

package/lib/android/src/main/java/com/wix/reactnativeuilib/keyboardinput/utils/ViewUtils.java

@@ -0,0 +1,65 @@
+package com.wix.reactnativeuilib.keyboardinput.utils;
+
+import android.app.Activity;
+import android.view.View;
+import android.view.ViewGroup;
+import android.view.Window;
+
+import androidx.annotation.Nullable;
+
+import com.facebook.react.ReactRootView;
+
+import static com.wix.reactnativeuilib.keyboardinput.AppContextHolder.getCurrentActivity;
+
+public class ViewUtils {
+
+    private static class VisibleViewClassMatchPredicate implements PredicateFunc<View> {
+        private final Class mClazz;
+
+        private VisibleViewClassMatchPredicate(Class clazz) {
+            mClazz = clazz;
+        }
+
+        @Override
+        public boolean invoke(View view) {
+            return mClazz.isAssignableFrom(view.getClass()) && view.isShown();
+        }
+    }
+    private static final VisibleViewClassMatchPredicate sVisibleReactRootViewMatcher = new VisibleViewClassMatchPredicate(ReactRootView.class);
+
+    public static Window getWindow() {
+        final Activity activity = getCurrentActivity();
+        return (activity == null ? null : activity.getWindow());
+    }
+
+    public static ReactRootView getReactRootView() {
+        final Window window = getWindow();
+        if (window == null) {
+            return null;
+        }
+
+        final ReactRootView view = findChildByClass((ViewGroup) window.getDecorView(), sVisibleReactRootViewMatcher);
+        return view;
+    }
+
+    /**
+     * Returns the first instance of clazz in root for which <code>predicate</code> is evaluated as <code>true</code>.
+     */
+    @Nullable
+    public static <T> T findChildByClass(ViewGroup root, PredicateFunc<View> predicate) {
+        for (int i = 0; i < root.getChildCount(); i++) {
+            View view = root.getChildAt(i);
+            if (predicate.invoke(view)) {
+                return ((T) view);
+            }
+
+            if (view instanceof ViewGroup) {
+                view = findChildByClass((ViewGroup) view, predicate);
+                if (view != null) {
+                    return (T) view;
+                }
+            }
+        }
+        return null;
+    }
+}

package/lib/android/src/main/java/com/wix/reactnativeuilib/utils/LogForwarder.java

@@ -0,0 +1,45 @@
+package com.wix.reactnativeuilib.utils;
+
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.modules.core.DeviceEventManagerModule;
+
+public class LogForwarder {
+
+    public enum LogType {
+        log,
+        warn,
+        error
+    }
+
+    private DeviceEventManagerModule.RCTDeviceEventEmitter eventEmitter;
+
+    public LogForwarder(ReactContext reactContext) {
+        eventEmitter = reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class);
+    }
+
+    @SuppressWarnings("unused")
+    public void e(String TAG, String text) {
+        log(LogType.error, TAG, text);
+    }
+
+    @SuppressWarnings("unused")
+    public void w(String TAG, String text) {
+        log(LogType.warn, TAG, text);
+    }
+
+    @SuppressWarnings("unused")
+    public void d(String TAG, String text) {
+        log(LogType.log, TAG, text);
+    }
+
+    private void log(LogType logType, String TAG, String text) {
+        WritableMap payload = Arguments.createMap();
+        payload.putString("LogType", logType.name());
+        payload.putString("TAG", TAG);
+        payload.putString("text", text);
+        eventEmitter.emit("log", payload);
+    }
+
+}

package/lib/android/src/main/res/layout/wheel_picker.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<com.wix.reactnativeuilib.wheelpicker.ThemedNumberPicker
+    android:id="@+id/numberPicker"
+    android:layout_height="148dp"
+    android:layout_width="56dp"
+    android:divider="@color/dividerColor"
+    android:editTextColor="@color/dividerColor"
+    android:textSize="20dp"
+    xmlns:android="http://schemas.android.com/apk/res/android" />

package/lib/android/src/main/res/values/colors.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="colorPrimary">#3F51B5</color>
+    <color name="colorPrimaryDark">#303F9F</color>
+    <color name="colorAccent">#FF4081</color>
+    <color name="dividerColor">#459FED</color>
+    <color name="numberPickerDivider">#FF4081</color>
+    <color name="title">#20303c</color>
+</resources>

package/lib/android/src/main/res/values/styles.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <style name="NumberPickerTextColorStyle">
+        <item name="android:textColorPrimary">@color/dividerColor</item>
+        <item name="android:editTextColor">@color/dividerColor</item>
+        <item name="android:textSize">20dp</item>
+        <item name="colorControlNormal">@color/dividerColor</item>
+    </style>
+</resources>

package/lib/components/Keyboard/KeyboardAccessoryView/KeyboardRegistry/keyboardRegistry.api.json

@@ -0,0 +1,50 @@
+{
+  "name": "KeyboardRegistry",
+  "category": "infra",
+  "description": "used for registering keyboards and performing certain actions on the keyboards",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/nativeComponentScreens/keyboardAccessory/demoKeyboards.js",
+  "props": [
+    {
+      "name": "registerKeyboard",
+      "type": "static function",
+      "description": "Register a new keyboard.\ncomponentID (string) - the ID of the keyboard.\ngenerator (function) - a function for the creation of the keyboard.\nparams (object) - to be returned when using other methods (i.e. getKeyboards and getAllKeyboards)"
+    },
+    {
+      "name": "getKeyboard",
+      "type": "static function",
+      "description": "Get a specific keyboard\ncomponentID (string) - the ID of the keyboard"
+    },
+    {
+      "name": "getKeyboards",
+      "type": "static function",
+      "description": "Get keyboards by IDs\ncomponentIDs (string[]) - the ID of the keyboard"
+    },
+    {"name": "getAllKeyboards", "type": "static function", "description": "Get all keyboards"},
+    {
+      "name": "addListener",
+      "type": "static function",
+      "description": "Add a listener for a callback.\nglobalID (string) - ID that includes the componentID and the event name\n(i.e. if componentID='kb1' globalID='kb1.onItemSelected')\ncallback (function) - the callback to be called when the said event happens"
+    },
+    {
+      "name": "notifyListeners",
+      "type": "static function",
+      "description": "Notify that an event has occurred.\nglobalID (string) - ID that includes the componentID and the event name\n(i.e. if componentID='kb1' globalID='kb1.onItemSelected')\nargs (object) - data to be sent to the listener"
+    },
+    {
+      "name": "removeListeners",
+      "type": "static function",
+      "description": "Remove a listener for a callback.\nglobalID (string) - ID that includes the componentID and the event name\n(i.e. if componentID='kb1' globalID='kb1.onItemSelected')"
+    },
+    {
+      "name": "onItemSelected",
+      "type": "static function",
+      "description": "Default event to be used for when an item on the keyboard has been pressed.\ncomponentID (string) - the ID of the keyboard.\nargs (object) - data to be sent to the listener"
+    },
+    {
+      "name": "requestShowKeyboard",
+      "type": "static function",
+      "description": "Request to show the keyboard\ncomponentID (string) - the ID of the keyboard"
+    }
+  ],
+  "snippet": ["KeyboardRegistry.registerKeyboard('keyboardName$1', () => KeyboardComponent$2)"]
+}

package/lib/components/Keyboard/KeyboardAccessoryView/keyboardAccessoryView.api.json

@@ -0,0 +1,58 @@
+{
+  "name": "KeyboardAccessoryView",
+  "category": "infra",
+  "description": "View that allows replacing the default keyboard with other components",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/nativeComponentScreens/keyboardAccessory/KeyboardAccessoryViewScreen.js",
+  "images": [
+    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/KeyboardAccessoryView/KeyboardAccessoryView.gif?raw=true"
+  ],
+  "props": [
+    {
+      "name": "renderContent",
+      "type": "() => React.ReactElement",
+      "description": "Content to be rendered above the keyboard"
+    },
+    {
+      "name": "kbInputRef",
+      "type": "any",
+      "description": "The reference to the actual text input (or the keyboard may not reset when instructed to, etc.)",
+      "note": "iOS only",
+      "required": true
+    },
+    {
+      "name": "kbComponent",
+      "type": "string",
+      "description": "The keyboard ID (the componentID sent to KeyboardRegistry)"
+    },
+    {"name": "kbInitialProps", "type": "any", "description": "The props that will be sent to the KeyboardComponent"},
+    {
+      "name": "onHeightChanged",
+      "type": "(height: number) => void",
+      "description": "A callback for when the height is changed"
+    },
+    {
+      "name": "onItemSelected",
+      "type": "() => void",
+      "description": "Callback that will be called when an item on the keyboard has been pressed"
+    },
+    {
+      "name": "onRequestShowKeyboard",
+      "type": "() => void",
+      "description": "Callback that will be called if KeyboardRegistry.requestShowKeyboard is called"
+    },
+    {
+      "name": "onKeyboardResigned",
+      "type": "() => void",
+      "description": "Callback that will be called once the keyboard has been closed"
+    }
+  ],
+  "snippet": [
+    "<KeyboardAccessoryView",
+    " renderContent={this.renderContent()}",
+    " kbInputRef={this.inputRef}",
+    " kbComponent={$1}",
+    " kbInitialProps={$2}",
+    " onHeightChanged={this.onHeightChanged()}",
+    " scrollBehavior={KeyboardAccessoryView.scrollBehaviors.NONE$3}",
+    "/>"
+  ]}

package/lib/components/Keyboard/KeyboardAwareInsetsView/keyboardAwareInsetsView.api.json

@@ -0,0 +1,14 @@
+{
+  "name": "KeyboardAwareInsetsView",
+  "category": "infra",
+  "description": "Used to add an inset when a keyboard is used and might hide part of the screen.",
+  "note": "This view is useful only for iOS.",
+  "extends": ["infra/KeyboardTrackingView"],
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TextFieldScreen.tsx",
+  "snippet": ["<ScrollView>",
+    "  <TextField/>",
+    "  <TextField/>",
+    "  <KeyboardAwareInsetsView/>",
+    "<ScrollView>"    
+  ]
+}

package/lib/components/Keyboard/KeyboardTrackingView/keyboardTrackingView.api.json

@@ -0,0 +1,86 @@
+{
+  "name": "KeyboardTrackingView",
+  "category": "infra",
+  "description": "A UI component that enables 'keyboard tracking' for this view and it's sub-views.\nWould typically be used when you have a TextField or TextInput inside this view",
+  "note": "This view is useful only for iOS",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/nativeComponentScreens/KeyboardTrackingViewScreen.js",
+  "images": [
+    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/KeyboardTrackingView/KeyboardTrackingView.gif?raw=true"
+  ],
+  "props": [
+    {
+      "name": "trackInteractive",
+      "type": "boolean",
+      "description": "Enables tracking of the keyboard when it's dismissed interactively (false by default).\nWhy? When using an external keyboard (BT),\nyou still get the keyboard events and the view just hovers when you focus the input.\nAlso, if you're not using interactive style of dismissing the keyboard\n(or if you don't have an input inside this view) it doesn't make sense to track it anyway.\n(This is caused because of the usage of inputAccessory to be able to track the keyboard interactive change and it introduces this bug)"
+    },
+    {
+      "name": "scrollToFocusedInput",
+      "type": "boolean",
+      "description": "Should the scrollView scroll to the focused input"
+    },
+    {
+      "name": "scrollBehavior",
+      "type": "number",
+      "description": "The scrolling behavior (use KeyboardTrackingView.scrollBehaviors.NONE | SCROLL_TO_BOTTOM_INVERTED_ONLY | FIXED_OFFSET)"
+    },
+    {
+      "name": "revealKeyboardInteractive",
+      "type": "boolean",
+      "description": "Show the keyboard on a negative scroll",
+      "default": "false"
+    },
+    {
+      "name": "manageScrollView",
+      "type": "boolean",
+      "description": "Set to false to turn off inset management and manage it yourself",
+      "default": "true"
+    },
+    {
+      "name": "requiresSameParentToManageScrollView",
+      "type": "boolean",
+      "description": "Set to true manageScrollView is set to true and still does not work,\nit means that the ScrollView found is the wrong one and you'll have\nto have the KeyboardAccessoryView and the ScrollView as siblings\nand set this to true",
+      "default": "false"
+    },
+    {
+      "name": "allowHitsOutsideBounds",
+      "type": "boolean",
+      "description": "Allow hitting sub-views that are placed beyond the view bounds",
+      "default": "false"
+    },
+    {
+      "name": "addBottomView",
+      "type": "boolean",
+      "description": "Add a view beneath the KeyboardAccessoryView",
+      "default": "false"
+    },
+    {
+      "name": "bottomViewColor", 
+      "type": "string", 
+      "description": "The bottom view's color",       
+      "default": "white"
+    },
+    {
+      "name": "useSafeArea",
+      "type": "boolean",
+      "description": "Whether or not to handle SafeArea",
+      "default": "true"
+    },
+    {
+      "name": "usesBottomTabs",
+      "type": "boolean",
+      "description": "Whether or not to include bottom tab bar inset",
+      "default": "false"
+    },
+    {"name": "ref", "type": "any", "description": ""},
+    {"name": "style", "type": "ViewStyle", "description": ""}
+  ],
+  "snippet": [
+    "<KeyboardTrackingView",
+    " style={$1}",
+    " trackInteractive",
+    " useSafeArea",
+    ">",
+    " $2",
+    "</KeyboardTrackingView>"
+  ]
+}

package/lib/ios/reactnativeuilib/dynamicfont/DynamicFont.h

@@ -0,0 +1,9 @@
+#if __has_include("RCTBridgeModule.h")
+#import "RCTBridgeModule.h"
+#else
+#import <React/RCTBridgeModule.h>
+#endif
+
+@interface DynamicFont : NSObject <RCTBridgeModule>
+
+@end