@momo-kits/calculator-keyboard 0.167.1-test.2 → 0.168.1-beta.10

package/android/app/app.iml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$">
+      <sourceFolder url="file://$MODULE_DIR$/build/generated/source/codegen/java" isTestSource="false" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/android/app/build/generated/source/codegen/java/com/facebook/react/viewmanagers/NativeInputCalculatorManagerDelegate.java

@@ -0,0 +1,67 @@
+/**
+* This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+*
+* Do not edit this file as changes may cause incorrect behavior and will be lost
+* once the code is regenerated.
+*
+* @generated by codegen project: GeneratePropsJavaDelegate.js
+*/
+
+package com.facebook.react.viewmanagers;
+
+import android.view.View;
+import androidx.annotation.Nullable;
+import com.facebook.react.bridge.ReadableArray;
+import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.uimanager.BaseViewManager;
+import com.facebook.react.uimanager.BaseViewManagerDelegate;
+import com.facebook.react.uimanager.LayoutShadowNode;
+
+public class NativeInputCalculatorManagerDelegate<T extends View, U extends BaseViewManager<T, ? extends LayoutShadowNode> & NativeInputCalculatorManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
+  public NativeInputCalculatorManagerDelegate(U viewManager) {
+    super(viewManager);
+  }
+  @Override
+  public void setProperty(T view, String propName, @Nullable Object value) {
+    switch (propName) {
+      case "value":
+        mViewManager.setValue(view, value == null ? null : (String) value);
+        break;
+      case "textAttributes":
+        mViewManager.setTextAttributes(view, (ReadableMap) value);
+        break;
+      case "mode":
+        mViewManager.setMode(view, value == null ? null : (String) value);
+        break;
+      case "selectionColor":
+        mViewManager.setSelectionColor(view, value == null ? null : (String) value);
+        break;
+      case "customKeyText":
+        mViewManager.setCustomKeyText(view, value == null ? null : (String) value);
+        break;
+      case "customKeyBackground":
+        mViewManager.setCustomKeyBackground(view, value == null ? null : (String) value);
+        break;
+      case "customKeyTextColor":
+        mViewManager.setCustomKeyTextColor(view, value == null ? null : (String) value);
+        break;
+      case "customKeyState":
+        mViewManager.setCustomKeyState(view, value == null ? null : (String) value);
+        break;
+      default:
+        super.setProperty(view, propName, value);
+    }
+  }
+
+  @Override
+  public void receiveCommand(T view, String commandName, @Nullable ReadableArray args) {
+    switch (commandName) {
+      case "focus":
+        mViewManager.focus(view);
+        break;
+      case "blur":
+        mViewManager.blur(view);
+        break;
+    }
+  }
+}

package/android/app/build/generated/source/codegen/java/com/facebook/react/viewmanagers/NativeInputCalculatorManagerInterface.java

@@ -0,0 +1,28 @@
+/**
+* This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+*
+* Do not edit this file as changes may cause incorrect behavior and will be lost
+* once the code is regenerated.
+*
+* @generated by codegen project: GeneratePropsJavaInterface.js
+*/
+
+package com.facebook.react.viewmanagers;
+
+import android.view.View;
+import androidx.annotation.Nullable;
+import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.uimanager.ViewManagerWithGeneratedInterface;
+
+public interface NativeInputCalculatorManagerInterface<T extends View> extends ViewManagerWithGeneratedInterface {
+  void setValue(T view, @Nullable String value);
+  void setTextAttributes(T view, @Nullable ReadableMap value);
+  void setMode(T view, @Nullable String value);
+  void setSelectionColor(T view, @Nullable String value);
+  void setCustomKeyText(T view, @Nullable String value);
+  void setCustomKeyBackground(T view, @Nullable String value);
+  void setCustomKeyTextColor(T view, @Nullable String value);
+  void setCustomKeyState(T view, @Nullable String value);
+  void focus(T view);
+  void blur(T view);
+}

package/android/app/build/generated/source/codegen/jni/react/renderer/components/CalculatorKeyboardSpecs/ComponentDescriptors.cpp

@@ -0,0 +1,22 @@
+
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateComponentDescriptorCpp.js
+ */
+
+#include <react/renderer/components/CalculatorKeyboardSpecs/ComponentDescriptors.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
+
+namespace facebook::react {
+
+void CalculatorKeyboardSpecs_registerComponentDescriptorsFromCodegen(
+  std::shared_ptr<const ComponentDescriptorProviderRegistry> registry) {
+registry->add(concreteComponentDescriptorProvider<NativeInputCalculatorComponentDescriptor>());
+}
+
+} // namespace facebook::react

package/android/app/build/generated/source/codegen/jni/react/renderer/components/CalculatorKeyboardSpecs/ComponentDescriptors.h

@@ -0,0 +1,24 @@
+
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateComponentDescriptorH.js
+ */
+
+#pragma once
+
+#include <react/renderer/components/CalculatorKeyboardSpecs/ShadowNodes.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
+
+namespace facebook::react {
+
+using NativeInputCalculatorComponentDescriptor = ConcreteComponentDescriptor<NativeInputCalculatorShadowNode>;
+
+void CalculatorKeyboardSpecs_registerComponentDescriptorsFromCodegen(
+  std::shared_ptr<const ComponentDescriptorProviderRegistry> registry);
+
+} // namespace facebook::react

package/android/app/build/generated/source/codegen/jni/react/renderer/components/CalculatorKeyboardSpecs/EventEmitters.cpp

@@ -0,0 +1,69 @@
+
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateEventEmitterCpp.js
+ */
+
+#include <react/renderer/components/CalculatorKeyboardSpecs/EventEmitters.h>
+
+
+namespace facebook::react {
+
+void NativeInputCalculatorEventEmitter::onChange(OnChange event) const {
+  dispatchEvent("change", [event=std::move(event)](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    payload.setProperty(runtime, "text", event.text);
+    return payload;
+  });
+}
+
+
+void NativeInputCalculatorEventEmitter::onKeyPress(OnKeyPress event) const {
+  dispatchEvent("keyPress", [event=std::move(event)](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    payload.setProperty(runtime, "key", event.key);
+    return payload;
+  });
+}
+
+
+void NativeInputCalculatorEventEmitter::onResult(OnResult event) const {
+  dispatchEvent("result", [event=std::move(event)](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    payload.setProperty(runtime, "result", event.result);
+    return payload;
+  });
+}
+
+
+void NativeInputCalculatorEventEmitter::onBlur(OnBlur event) const {
+  dispatchEvent("blur", [](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    
+    return payload;
+  });
+}
+
+
+void NativeInputCalculatorEventEmitter::onFocus(OnFocus event) const {
+  dispatchEvent("focus", [](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    
+    return payload;
+  });
+}
+
+
+void NativeInputCalculatorEventEmitter::onCustomKeyEvent(OnCustomKeyEvent event) const {
+  dispatchEvent("customKeyEvent", [](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    
+    return payload;
+  });
+}
+
+} // namespace facebook::react

package/android/app/build/generated/source/codegen/jni/react/renderer/components/CalculatorKeyboardSpecs/EventEmitters.h

@@ -0,0 +1,55 @@
+
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateEventEmitterH.js
+ */
+#pragma once
+
+#include <react/renderer/components/view/ViewEventEmitter.h>
+
+
+namespace facebook::react {
+class NativeInputCalculatorEventEmitter : public ViewEventEmitter {
+ public:
+  using ViewEventEmitter::ViewEventEmitter;
+
+  struct OnChange {
+      std::string text;
+    };
+
+  struct OnKeyPress {
+      std::string key;
+    };
+
+  struct OnResult {
+      std::string result;
+    };
+
+  struct OnBlur {
+      
+    };
+
+  struct OnFocus {
+      
+    };
+
+  struct OnCustomKeyEvent {
+      
+    };
+  void onChange(OnChange value) const;
+
+  void onKeyPress(OnKeyPress value) const;
+
+  void onResult(OnResult value) const;
+
+  void onBlur(OnBlur value) const;
+
+  void onFocus(OnFocus value) const;
+
+  void onCustomKeyEvent(OnCustomKeyEvent value) const;
+};
+} // namespace facebook::react

package/android/app/build/generated/source/codegen/jni/react/renderer/components/CalculatorKeyboardSpecs/Props.cpp

@@ -0,0 +1,32 @@
+
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GeneratePropsCpp.js
+ */
+
+#include <react/renderer/components/CalculatorKeyboardSpecs/Props.h>
+#include <react/renderer/core/PropsParserContext.h>
+#include <react/renderer/core/propsConversions.h>
+
+namespace facebook::react {
+
+NativeInputCalculatorProps::NativeInputCalculatorProps(
+    const PropsParserContext &context,
+    const NativeInputCalculatorProps &sourceProps,
+    const RawProps &rawProps): ViewProps(context, sourceProps, rawProps),
+
+    value(convertRawProp(context, rawProps, "value", sourceProps.value, {})),
+    textAttributes(convertRawProp(context, rawProps, "textAttributes", sourceProps.textAttributes, {})),
+    mode(convertRawProp(context, rawProps, "mode", sourceProps.mode, {})),
+    selectionColor(convertRawProp(context, rawProps, "selectionColor", sourceProps.selectionColor, {})),
+    customKeyText(convertRawProp(context, rawProps, "customKeyText", sourceProps.customKeyText, {})),
+    customKeyBackground(convertRawProp(context, rawProps, "customKeyBackground", sourceProps.customKeyBackground, {})),
+    customKeyTextColor(convertRawProp(context, rawProps, "customKeyTextColor", sourceProps.customKeyTextColor, {})),
+    customKeyState(convertRawProp(context, rawProps, "customKeyState", sourceProps.customKeyState, {}))
+      {}
+
+} // namespace facebook::react

package/android/app/build/generated/source/codegen/jni/react/renderer/components/CalculatorKeyboardSpecs/Props.h

@@ -0,0 +1,66 @@
+
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GeneratePropsH.js
+ */
+#pragma once
+
+#include <react/renderer/components/view/ViewProps.h>
+#include <react/renderer/core/PropsParserContext.h>
+#include <react/renderer/core/propsConversions.h>
+
+namespace facebook::react {
+
+struct NativeInputCalculatorTextAttributesStruct {
+  Float fontSize{0.0};
+  std::string fontWeight{};
+  std::string placeholder{};
+  std::string placeholderTextColor{};
+};
+
+static inline void fromRawValue(const PropsParserContext& context, const RawValue &value, NativeInputCalculatorTextAttributesStruct &result) {
+  auto map = (std::unordered_map<std::string, RawValue>)value;
+
+  auto tmp_fontSize = map.find("fontSize");
+  if (tmp_fontSize != map.end()) {
+    fromRawValue(context, tmp_fontSize->second, result.fontSize);
+  }
+  auto tmp_fontWeight = map.find("fontWeight");
+  if (tmp_fontWeight != map.end()) {
+    fromRawValue(context, tmp_fontWeight->second, result.fontWeight);
+  }
+  auto tmp_placeholder = map.find("placeholder");
+  if (tmp_placeholder != map.end()) {
+    fromRawValue(context, tmp_placeholder->second, result.placeholder);
+  }
+  auto tmp_placeholderTextColor = map.find("placeholderTextColor");
+  if (tmp_placeholderTextColor != map.end()) {
+    fromRawValue(context, tmp_placeholderTextColor->second, result.placeholderTextColor);
+  }
+}
+
+static inline std::string toString(const NativeInputCalculatorTextAttributesStruct &value) {
+  return "[Object NativeInputCalculatorTextAttributesStruct]";
+}
+class NativeInputCalculatorProps final : public ViewProps {
+ public:
+  NativeInputCalculatorProps() = default;
+  NativeInputCalculatorProps(const PropsParserContext& context, const NativeInputCalculatorProps &sourceProps, const RawProps &rawProps);
+
+#pragma mark - Props
+
+  std::string value{};
+  NativeInputCalculatorTextAttributesStruct textAttributes{};
+  std::string mode{};
+  std::string selectionColor{};
+  std::string customKeyText{};
+  std::string customKeyBackground{};
+  std::string customKeyTextColor{};
+  std::string customKeyState{};
+};
+
+} // namespace facebook::react

package/android/app/build/generated/source/codegen/jni/react/renderer/components/CalculatorKeyboardSpecs/ShadowNodes.cpp

@@ -0,0 +1,17 @@
+
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateShadowNodeCpp.js
+ */
+
+#include <react/renderer/components/CalculatorKeyboardSpecs/ShadowNodes.h>
+
+namespace facebook::react {
+
+extern const char NativeInputCalculatorComponentName[] = "NativeInputCalculator";
+
+} // namespace facebook::react

package/android/app/build/generated/source/codegen/jni/react/renderer/components/CalculatorKeyboardSpecs/ShadowNodes.h

@@ -0,0 +1,32 @@
+
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateShadowNodeH.js
+ */
+
+#pragma once
+
+#include <react/renderer/components/CalculatorKeyboardSpecs/EventEmitters.h>
+#include <react/renderer/components/CalculatorKeyboardSpecs/Props.h>
+#include <react/renderer/components/CalculatorKeyboardSpecs/States.h>
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+#include <jsi/jsi.h>
+
+namespace facebook::react {
+
+JSI_EXPORT extern const char NativeInputCalculatorComponentName[];
+
+/*
+ * `ShadowNode` for <NativeInputCalculator> component.
+ */
+using NativeInputCalculatorShadowNode = ConcreteViewShadowNode<
+    NativeInputCalculatorComponentName,
+    NativeInputCalculatorProps,
+    NativeInputCalculatorEventEmitter,
+    NativeInputCalculatorState>;
+
+} // namespace facebook::react

package/android/app/build/generated/source/codegen/jni/react/renderer/components/CalculatorKeyboardSpecs/States.cpp

@@ -0,0 +1,16 @@
+
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateStateCpp.js
+ */
+#include <react/renderer/components/CalculatorKeyboardSpecs/States.h>
+
+namespace facebook::react {
+
+
+
+} // namespace facebook::react

package/android/app/build/generated/source/codegen/jni/react/renderer/components/CalculatorKeyboardSpecs/States.h

@@ -0,0 +1,29 @@
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateStateH.js
+ */
+#pragma once
+
+#ifdef ANDROID
+#include <folly/dynamic.h>
+#endif
+
+namespace facebook::react {
+
+class NativeInputCalculatorState {
+public:
+  NativeInputCalculatorState() = default;
+
+#ifdef ANDROID
+  NativeInputCalculatorState(NativeInputCalculatorState const &previousState, folly::dynamic data){};
+  folly::dynamic getDynamic() const {
+    return {};
+  };
+#endif
+};
+
+} // namespace facebook::react

package/android/src/main/java/com/momokits/calculatorkeyboard/native/CustomKeyboardView.kt

@@ -3,9 +3,12 @@ package com.momokits.calculatorkeyboard.native
 import android.annotation.SuppressLint
 import android.content.Context
 import android.content.res.ColorStateList
+import android.graphics.Bitmap
+import android.graphics.BitmapFactory
 import android.graphics.Color
 import android.graphics.drawable.GradientDrawable
 import android.text.Editable
+import android.util.DisplayMetrics
 import android.view.Gravity
 import android.view.MotionEvent
 import android.widget.Button
@@ -17,6 +20,8 @@ import androidx.core.graphics.toColorInt
 import com.momokits.calculatorkeyboard.native.utils.CalculatorEngine
 import com.momokits.calculatorkeyboard.native.utils.CalculatorFormatter
 import com.momokits.calculatorkeyboard.R
+import java.net.URL
+import kotlin.concurrent.thread
 
 @SuppressLint("SetTextI18n", "ViewConstructor")
 class CustomKeyboardView(
@@ -181,6 +186,26 @@ class CustomKeyboardView(
             setImageTintList(ColorStateList.valueOf(Color.BLACK))
             setOnClickListener { onKeyPress(key, false) }
             applyImagePressedOpacity()
+            loadBackIcon()
+        }
+    }
+
+    // Swap the bundled fallback icon for the design-system icon once it's downloaded
+    private fun ImageButton.loadBackIcon() {
+        backIconCache?.let { return setImageBitmap(it) }
+
+        thread {
+            val bitmap = runCatching {
+                URL(BACK_ICON_URL).openConnection().apply {
+                    connectTimeout = BACK_ICON_TIMEOUT_MS
+                    readTimeout = BACK_ICON_TIMEOUT_MS
+                }.getInputStream().use(BitmapFactory::decodeStream)
+            }.getOrNull() ?: return@thread
+
+            // Density makes the drawable render at BACK_ICON_SIZE_DP without resampling the bitmap
+            bitmap.density = bitmap.width * DisplayMetrics.DENSITY_DEFAULT / BACK_ICON_SIZE_DP
+            backIconCache = bitmap
+            post { setImageBitmap(bitmap) }
         }
     }
 
@@ -400,4 +425,13 @@ class CustomKeyboardView(
         }
         customKeyButton?.setTextColor(textColor)
     }
+
+    companion object {
+        private const val BACK_ICON_URL = "https://img.mservice.com.vn/app/img/kits/chat_back_space.png"
+        private const val BACK_ICON_SIZE_DP = 24
+        private const val BACK_ICON_TIMEOUT_MS = 10_000
+
+        @Volatile
+        private var backIconCache: Bitmap? = null
+    }
 }

package/ios/CalculatorKeyboardView.mm

@@ -1,6 +1,10 @@
 #import "CalculatorKeyboardView.h"
 #import "Utils.h"
 
+static NSString *const kBackIconURL = @"https://img.mservice.com.vn/app/img/kits/chat_back_space.png";
+static const CGFloat kBackIconSize = 24;
+static UIImage *sBackIcon;
+
 @interface CalculatorKeyboardView ()
 @property (nonatomic, strong) NSArray<NSArray<NSString *> *> *numWithCTAKeys;
 @property (nonatomic, strong) NSArray<NSArray<NSString *> *> *defaultKeys;
@@ -10,6 +14,8 @@
 
 @implementation CalculatorKeyboardView {
   CGFloat _separatorWidth;
+  UIView *_contentView;
+  NSArray<NSArray<UIButton *> *> *_buttonRows;
 }
 
 - (instancetype)initWithFrame:(CGRect)frame
@@ -85,28 +91,26 @@
   
   self.backgroundColor = [Utils colorFromHex:@"#f2f2f6"];
   
-  CGFloat buttonWidth = (UIScreen.mainScreen.bounds.size.width - _separatorWidth * 2 - 4 * _separatorWidth) / 5;
-  CGFloat buttonHeight = (240 - _separatorWidth * 2 - 3 * _separatorWidth) / 4;
-  
   // Create content view
   UIView *contentView = [[UIView alloc] init];
   contentView.translatesAutoresizingMaskIntoConstraints = NO;
   [self addSubview:contentView];
+  _contentView = contentView;
   
-  // Set contentView constraints
+  // Set contentView constraints, keeping clear of the side safe area (landscape, iPhone Duo)
   [NSLayoutConstraint activateConstraints:@[
-    [contentView.leadingAnchor constraintEqualToAnchor:self.leadingAnchor constant:_separatorWidth],
-    [contentView.trailingAnchor constraintEqualToAnchor:self.trailingAnchor constant:-_separatorWidth],
+    [contentView.leadingAnchor constraintEqualToAnchor:self.safeAreaLayoutGuide.leadingAnchor constant:_separatorWidth],
+    [contentView.trailingAnchor constraintEqualToAnchor:self.safeAreaLayoutGuide.trailingAnchor constant:-_separatorWidth],
     [contentView.topAnchor constraintEqualToAnchor:self.topAnchor constant:_separatorWidth],
     [contentView.bottomAnchor constraintEqualToAnchor:self.bottomAnchor constant:-_separatorWidth]
   ]];
   
-  CGFloat yOffset = 0;
+  NSMutableArray<NSArray<UIButton *> *> *buttonRows = [NSMutableArray array];
   NSArray<NSArray<NSString *> *> *keys = [_keyboardMode isEqualToString:@"NumDefault"] ? _defaultKeys : _numWithCTAKeys;
   
   for (NSInteger rowIndex = 0; rowIndex < keys.count; rowIndex++) {
     NSArray<NSString *> *row = keys[rowIndex];
-    CGFloat xOffset = 0;
+    NSMutableArray<UIButton *> *buttonRow = [NSMutableArray array];
     
     for (NSInteger colIndex = 0; colIndex < row.count; colIndex++) {
       NSString *key = row[colIndex];
@@ -124,22 +128,13 @@
       button.accessibilityIdentifier = key;
       button.tag = isMainCTAKey ? 1 : 0;
       
-      CGRect buttonFrame = CGRectMake(xOffset, yOffset, buttonWidth, buttonHeight);
-      if (isMainKey) {
-        buttonFrame.size.height = buttonHeight * 2 + _separatorWidth;
-      }
-      if ([key isEqualToString:@"000"]) {
-        buttonFrame.size.width = buttonWidth * 2 + _separatorWidth;
-      }
-
-      button.frame = buttonFrame;
-
       if ([key isEqualToString:@"back"]) {
         [button setTitle:@"" forState:UIControlStateNormal];
         UIImageSymbolConfiguration *config = [UIImageSymbolConfiguration configurationWithPointSize:24 weight:UIImageSymbolWeightBold];
         UIImage *image = [UIImage systemImageNamed:@"delete.backward" withConfiguration:config];
         [button setImage:image forState:UIControlStateNormal];
         button.tintColor = UIColor.blackColor;
+        [self loadBackIconForButton:button];
       }
       
       if ([_specialKeys containsObject:key] || isMainKey) {
@@ -153,7 +148,44 @@
       
       [button addTarget:self action:@selector(keyPressed:) forControlEvents:UIControlEventTouchUpInside];
       [contentView addSubview:button];
+      [buttonRow addObject:button];
+    }
+    
+    [buttonRows addObject:buttonRow];
+  }
+  
+  _buttonRows = buttonRows;
+  [self setNeedsLayout];
+}
+
+// Size the keys from the live keyboard width, which follows the window through
+// rotation, fold and unfold, instead of the screen width at setup
+- (void)layoutSubviews
+{
+  [super layoutSubviews];
+  
+  CGFloat buttonWidth = (_contentView.bounds.size.width - 4 * _separatorWidth) / 5;
+  CGFloat buttonHeight = (240 - _separatorWidth * 2 - 3 * _separatorWidth) / 4;
+  CGFloat yOffset = 0;
+  
+  for (NSInteger rowIndex = 0; rowIndex < _buttonRows.count; rowIndex++) {
+    NSArray<UIButton *> *row = _buttonRows[rowIndex];
+    CGFloat xOffset = 0;
+    
+    for (NSInteger colIndex = 0; colIndex < row.count; colIndex++) {
+      UIButton *button = row[colIndex];
+      NSString *key = button.accessibilityIdentifier;
+      BOOL isMainKey = (colIndex == 4 && rowIndex == 2);
       
+      CGRect buttonFrame = CGRectMake(xOffset, yOffset, buttonWidth, buttonHeight);
+      if (isMainKey) {
+        buttonFrame.size.height = buttonHeight * 2 + _separatorWidth;
+      }
+      if ([key isEqualToString:@"000"]) {
+        buttonFrame.size.width = buttonWidth * 2 + _separatorWidth;
+      }
+      
+      button.frame = buttonFrame;
       xOffset += buttonFrame.size.width + _separatorWidth;
     }
     
@@ -161,6 +193,32 @@
   }
 }
 
+- (void)loadBackIconForButton:(UIButton *)button
+{
+  if (sBackIcon) {
+    [button setImage:sBackIcon forState:UIControlStateNormal];
+    return;
+  }
+
+  __weak UIButton *weakButton = button;
+  [[NSURLSession.sharedSession dataTaskWithURL:[NSURL URLWithString:kBackIconURL]
+                             completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
+    CGImageRef cgImage = [UIImage imageWithData:data].CGImage;
+    if (!cgImage) return;
+
+    // Scale makes the image size kBackIconSize points without redrawing it
+    UIImage *icon = [[UIImage imageWithCGImage:cgImage
+                                         scale:CGImageGetWidth(cgImage) / kBackIconSize
+                                   orientation:UIImageOrientationUp]
+                     imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
+
+    dispatch_async(dispatch_get_main_queue(), ^{
+      sBackIcon = icon;
+      [weakButton setImage:icon forState:UIControlStateNormal];
+    });
+  }] resume];
+}
+
 - (void)updateCustomKeyTitle
 {
   if (!self.customKeyButton || !_customKeyText) {

package/ios/InputCalculator.mm

@@ -3,6 +3,7 @@
 
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
+#import <React/RCTUtils.h>
 #import <react/renderer/components/InputCalculatorSpec/InputCalculatorComponentDescriptor.h>
 #import <react/renderer/components/InputCalculatorSpec/EventEmitters.h>
 #import <react/renderer/components/InputCalculatorSpec/Props.h>
@@ -45,9 +46,13 @@ typedef struct {
     _textField.delegate = (id<UITextFieldDelegate>)self;
 
     // Create keyboard view
+    // UIKit sizes the input view to the keyboard width; the keys follow it in layoutSubviews
+    UIWindow *window = RCTKeyWindow();
+    CGFloat keyboardWidth = window ? window.bounds.size.width : UIScreen.mainScreen.bounds.size.width;
     CGFloat bottomInset = [self getBottomInset];
-    CGRect keyboardFrame = CGRectMake(0, 0, UIScreen.mainScreen.bounds.size.width, 240 + bottomInset);
+    CGRect keyboardFrame = CGRectMake(0, 0, keyboardWidth, 240 + bottomInset);
     _keyboardView = [[CalculatorKeyboardView alloc] initWithFrame:keyboardFrame];
+    _keyboardView.autoresizingMask = UIViewAutoresizingFlexibleWidth;
     _keyboardView.input = (id)self; // Bridge pattern
 
     // Set custom keyboard
@@ -94,7 +99,8 @@ typedef struct {
 
 - (CGFloat)getBottomInset
 {
-  UIWindow *window = UIApplication.sharedApplication.windows.firstObject;
+  // key window of the active scene; windows.firstObject is unreliable with the UIScene life cycle
+  UIWindow *window = RCTKeyWindow();
   CGFloat bottom = window.safeAreaInsets.bottom > 0 ? 21 : 0;
   return bottom;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/calculator-keyboard",
-    "version": "0.167.1-test.2",
+    "version": "0.168.1-beta.10",
     "description": "react native calculator keyboard",
     "main": "./src/index.tsx",
     "files": [