@hero-design/rn 8.45.0 → 8.45.1

package/.turbo/turbo-build.log

@@ -3,6 +3,6 @@ $ rollup -c
 
 src/index.ts → lib/index.js, es/index.js...
 (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
-(!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/runner/_work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-created lib/index.js, es/index.js in 29.7s
+(!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
+created lib/index.js, es/index.js in 22.1s
 $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @hero-design/rn
 
+## 8.45.1
+
+### Patch Changes
+
+- [#2399](https://github.com/Thinkei/hero-design/pull/2399) [`9c30d8876`](https://github.com/Thinkei/hero-design/commit/9c30d88766b22e19eafc02322cc6b4af284a14c0) Thanks [@luanlai2201](https://github.com/luanlai2201)! - [TextInput] [RichTextEditor] Fix label position if width is small
+
+- [#2390](https://github.com/Thinkei/hero-design/pull/2390) [`8c7780262`](https://github.com/Thinkei/hero-design/commit/8c77802626e1069a50b8cf54c0ff36722f5a248f) Thanks [@ttkien](https://github.com/ttkien)! - Upgrade dependencies to the versions which suggested by expo@48
+
+- Updated dependencies [[`8c7780262`](https://github.com/Thinkei/hero-design/commit/8c77802626e1069a50b8cf54c0ff36722f5a248f)]:
+  - @hero-design/react-native-month-year-picker@8.42.6
+
 ## 8.45.0
 
 ### Minor Changes

package/es/index.js

@@ -12676,9 +12676,10 @@ var StyledLabelContainerInsideTextInput = index$a(Animated.View)(function (_ref2
   return {
     flexDirection: 'row',
     alignItems: themeVariant === 'text' ? 'center' : 'flex-start',
+    justifyContent: 'center',
     position: 'absolute',
     zIndex: 1,
-    left: -theme.__hd__.textInput.space.labelLeft,
+    left: 0,
     right: 0,
     top: -theme.__hd__.textInput.space.labelTop
   };
@@ -12848,18 +12849,25 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
   var isEmptyValue = displayText.length === 0;
   var actualSuffix = loading ? 'loading' : suffix;
-  var _React$useState = React.useState(0),
+  var _React$useState = React.useState({
+      height: 0,
+      width: 0
+    }),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    inputHeight = _React$useState2[0],
-    setInputHeight = _React$useState2[1];
+    inputSize = _React$useState2[0],
+    setInputSize = _React$useState2[1];
   var _React$useState3 = React.useState(0),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
-    prefixWidth = _React$useState4[0],
-    setPrefixWidth = _React$useState4[1];
-  var _React$useState5 = React.useState(false),
+    labelWidth = _React$useState4[0],
+    setLabelWidth = _React$useState4[1];
+  var _React$useState5 = React.useState(0),
     _React$useState6 = _slicedToArray(_React$useState5, 2),
-    isFocused = _React$useState6[0],
-    setIsFocused = _React$useState6[1];
+    prefixWidth = _React$useState6[0],
+    setPrefixWidth = _React$useState6[1];
+  var _React$useState7 = React.useState(false),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    isFocused = _React$useState8[0],
+    setIsFocused = _React$useState8[1];
   var state = getState$1({
     disabled: disabled,
     error: error,
@@ -12880,13 +12888,24 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     }).start();
   }, [focusAnimation, isEmptyValue, isFocused]);
   var onLayout = useCallback(function (event) {
-    var height = event.nativeEvent.layout.height;
-    setInputHeight(height);
+    var _event$nativeEvent$la = event.nativeEvent.layout,
+      height = _event$nativeEvent$la.height,
+      width = _event$nativeEvent$la.width;
+    setInputSize(function (prev) {
+      return _objectSpread2(_objectSpread2({}, prev), {}, {
+        height: height,
+        width: width
+      });
+    });
   }, []);
   var onPrefixLayout = useCallback(function (event) {
     var width = event.nativeEvent.layout.width;
     setPrefixWidth(width);
   }, []);
+  var onLabelLayout = useCallback(function (event) {
+    var width = event.nativeEvent.layout.width;
+    setLabelWidth(width);
+  }, []);
   var innerTextInput = React.useRef();
   React.useImperativeHandle(ref, function () {
     return {
@@ -13009,12 +13028,12 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       transform: [{
         translateY: focusAnimation.interpolate({
           inputRange: [0, 1],
-          outputRange: [variant !== 'textarea' ? inputHeight / 2 : theme.space.large, 0]
+          outputRange: [variant !== 'textarea' ? inputSize.height / 2 : theme.space.large, 0]
         })
       }, {
         translateX: focusAnimation.interpolate({
           inputRange: [0, 1],
-          outputRange: [prefix ? prefixWidth * 4 : theme.space.xxxlarge, 0]
+          outputRange: [-inputSize.width / 2 + labelWidth / 2 + prefixWidth + theme.space.large, -inputSize.width / 2 + labelWidth / 2 + theme.space.small]
         })
       }, {
         scale: focusAnimation.interpolate({
@@ -13035,7 +13054,8 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     },
     nativeID: accessibilityLabelledBy,
     testID: "input-label",
-    themeState: state
+    themeState: state,
+    onLayout: onLabelLayout
   }, label)), /*#__PURE__*/React.createElement(StyledTextInputAndLabelContainer, null, renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React.createElement(StyledTextInput, _extends$1({}, nativeInputProps, {
     themeVariant: variant,
     multiline: variant === 'textarea' || nativeProps.multiline,
@@ -34031,10 +34051,17 @@ var RichTextEditor = function RichTextEditor(_ref) {
       postMessage(webview.current, message);
     }
   };
-  var _React$useState = React.useState(0),
+  var _React$useState = React.useState({
+      height: 0,
+      width: 0
+    }),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    inputHeight = _React$useState2[0],
-    setInputHeight = _React$useState2[1];
+    inputSize = _React$useState2[0],
+    setInputSize = _React$useState2[1];
+  var _React$useState3 = React.useState(0),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    labelWidth = _React$useState4[0],
+    setLabelWidth = _React$useState4[1];
   var focusAnimation = useRef(new Animated.Value(0)).current;
   useEffect(function () {
     Animated.timing(focusAnimation, {
@@ -34045,8 +34072,19 @@ var RichTextEditor = function RichTextEditor(_ref) {
     }).start();
   }, [focusAnimation, isEmptyValue, isFocused]);
   var onLayout = useCallback(function (event) {
-    var height = event.nativeEvent.layout.height;
-    setInputHeight(height);
+    var _event$nativeEvent$la = event.nativeEvent.layout,
+      height = _event$nativeEvent$la.height,
+      width = _event$nativeEvent$la.width;
+    setInputSize(function (prev) {
+      return _objectSpread2(_objectSpread2({}, prev), {}, {
+        height: height,
+        width: width
+      });
+    });
+  }, []);
+  var onLabelLayout = useCallback(function (event) {
+    var width = event.nativeEvent.layout.width;
+    setLabelWidth(width);
   }, []);
   useEffect(function () {
     var removeFocusListener = on(emitter, normalizeEventName('editor-focus'), function () {
@@ -34147,12 +34185,12 @@ var RichTextEditor = function RichTextEditor(_ref) {
       transform: [{
         translateY: focusAnimation.interpolate({
           inputRange: [0, 1],
-          outputRange: [inputHeight / 2, 0]
+          outputRange: [inputSize.height / 2, 0]
         })
       }, {
         translateX: focusAnimation.interpolate({
           inputRange: [0, 1],
-          outputRange: [theme.space.xxxlarge, 0]
+          outputRange: [-inputSize.width / 2 + labelWidth / 2 + theme.space.large, -inputSize.width / 2 + labelWidth / 2 + theme.space.small]
         })
       }, {
         scale: focusAnimation.interpolate({
@@ -34171,7 +34209,8 @@ var RichTextEditor = function RichTextEditor(_ref) {
       backgroundColor: theme.__hd__.textInput.colors.labelBackground
     },
     testID: "input-label",
-    themeState: state
+    themeState: state,
+    onLayout: onLabelLayout
   }, label)), /*#__PURE__*/React.createElement(StyledTextInputContainer, {
     onLayout: onLayout
   }, /*#__PURE__*/React.createElement(StyledBorderBackDrop, {

package/lib/index.js

@@ -12706,9 +12706,10 @@ var StyledLabelContainerInsideTextInput = index$a(reactNative.Animated.View)(fun
   return {
     flexDirection: 'row',
     alignItems: themeVariant === 'text' ? 'center' : 'flex-start',
+    justifyContent: 'center',
     position: 'absolute',
     zIndex: 1,
-    left: -theme.__hd__.textInput.space.labelLeft,
+    left: 0,
     right: 0,
     top: -theme.__hd__.textInput.space.labelTop
   };
@@ -12878,18 +12879,25 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
   var isEmptyValue = displayText.length === 0;
   var actualSuffix = loading ? 'loading' : suffix;
-  var _React$useState = React__default["default"].useState(0),
+  var _React$useState = React__default["default"].useState({
+      height: 0,
+      width: 0
+    }),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    inputHeight = _React$useState2[0],
-    setInputHeight = _React$useState2[1];
+    inputSize = _React$useState2[0],
+    setInputSize = _React$useState2[1];
   var _React$useState3 = React__default["default"].useState(0),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
-    prefixWidth = _React$useState4[0],
-    setPrefixWidth = _React$useState4[1];
-  var _React$useState5 = React__default["default"].useState(false),
+    labelWidth = _React$useState4[0],
+    setLabelWidth = _React$useState4[1];
+  var _React$useState5 = React__default["default"].useState(0),
     _React$useState6 = _slicedToArray(_React$useState5, 2),
-    isFocused = _React$useState6[0],
-    setIsFocused = _React$useState6[1];
+    prefixWidth = _React$useState6[0],
+    setPrefixWidth = _React$useState6[1];
+  var _React$useState7 = React__default["default"].useState(false),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    isFocused = _React$useState8[0],
+    setIsFocused = _React$useState8[1];
   var state = getState$1({
     disabled: disabled,
     error: error,
@@ -12910,13 +12918,24 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     }).start();
   }, [focusAnimation, isEmptyValue, isFocused]);
   var onLayout = React.useCallback(function (event) {
-    var height = event.nativeEvent.layout.height;
-    setInputHeight(height);
+    var _event$nativeEvent$la = event.nativeEvent.layout,
+      height = _event$nativeEvent$la.height,
+      width = _event$nativeEvent$la.width;
+    setInputSize(function (prev) {
+      return _objectSpread2(_objectSpread2({}, prev), {}, {
+        height: height,
+        width: width
+      });
+    });
   }, []);
   var onPrefixLayout = React.useCallback(function (event) {
     var width = event.nativeEvent.layout.width;
     setPrefixWidth(width);
   }, []);
+  var onLabelLayout = React.useCallback(function (event) {
+    var width = event.nativeEvent.layout.width;
+    setLabelWidth(width);
+  }, []);
   var innerTextInput = React__default["default"].useRef();
   React__default["default"].useImperativeHandle(ref, function () {
     return {
@@ -13039,12 +13058,12 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
       transform: [{
         translateY: focusAnimation.interpolate({
           inputRange: [0, 1],
-          outputRange: [variant !== 'textarea' ? inputHeight / 2 : theme.space.large, 0]
+          outputRange: [variant !== 'textarea' ? inputSize.height / 2 : theme.space.large, 0]
         })
       }, {
         translateX: focusAnimation.interpolate({
           inputRange: [0, 1],
-          outputRange: [prefix ? prefixWidth * 4 : theme.space.xxxlarge, 0]
+          outputRange: [-inputSize.width / 2 + labelWidth / 2 + prefixWidth + theme.space.large, -inputSize.width / 2 + labelWidth / 2 + theme.space.small]
         })
       }, {
         scale: focusAnimation.interpolate({
@@ -13065,7 +13084,8 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     },
     nativeID: accessibilityLabelledBy,
     testID: "input-label",
-    themeState: state
+    themeState: state,
+    onLayout: onLabelLayout
   }, label)), /*#__PURE__*/React__default["default"].createElement(StyledTextInputAndLabelContainer, null, renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React__default["default"].createElement(StyledTextInput, _extends$1({}, nativeInputProps, {
     themeVariant: variant,
     multiline: variant === 'textarea' || nativeProps.multiline,
@@ -34061,10 +34081,17 @@ var RichTextEditor = function RichTextEditor(_ref) {
       postMessage(webview.current, message);
     }
   };
-  var _React$useState = React__default["default"].useState(0),
+  var _React$useState = React__default["default"].useState({
+      height: 0,
+      width: 0
+    }),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    inputHeight = _React$useState2[0],
-    setInputHeight = _React$useState2[1];
+    inputSize = _React$useState2[0],
+    setInputSize = _React$useState2[1];
+  var _React$useState3 = React__default["default"].useState(0),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    labelWidth = _React$useState4[0],
+    setLabelWidth = _React$useState4[1];
   var focusAnimation = React.useRef(new reactNative.Animated.Value(0)).current;
   React.useEffect(function () {
     reactNative.Animated.timing(focusAnimation, {
@@ -34075,8 +34102,19 @@ var RichTextEditor = function RichTextEditor(_ref) {
     }).start();
   }, [focusAnimation, isEmptyValue, isFocused]);
   var onLayout = React.useCallback(function (event) {
-    var height = event.nativeEvent.layout.height;
-    setInputHeight(height);
+    var _event$nativeEvent$la = event.nativeEvent.layout,
+      height = _event$nativeEvent$la.height,
+      width = _event$nativeEvent$la.width;
+    setInputSize(function (prev) {
+      return _objectSpread2(_objectSpread2({}, prev), {}, {
+        height: height,
+        width: width
+      });
+    });
+  }, []);
+  var onLabelLayout = React.useCallback(function (event) {
+    var width = event.nativeEvent.layout.width;
+    setLabelWidth(width);
   }, []);
   React.useEffect(function () {
     var removeFocusListener = on(emitter, normalizeEventName('editor-focus'), function () {
@@ -34177,12 +34215,12 @@ var RichTextEditor = function RichTextEditor(_ref) {
       transform: [{
         translateY: focusAnimation.interpolate({
           inputRange: [0, 1],
-          outputRange: [inputHeight / 2, 0]
+          outputRange: [inputSize.height / 2, 0]
         })
       }, {
         translateX: focusAnimation.interpolate({
           inputRange: [0, 1],
-          outputRange: [theme.space.xxxlarge, 0]
+          outputRange: [-inputSize.width / 2 + labelWidth / 2 + theme.space.large, -inputSize.width / 2 + labelWidth / 2 + theme.space.small]
         })
       }, {
         scale: focusAnimation.interpolate({
@@ -34201,7 +34239,8 @@ var RichTextEditor = function RichTextEditor(_ref) {
       backgroundColor: theme.__hd__.textInput.colors.labelBackground
     },
     testID: "input-label",
-    themeState: state
+    themeState: state,
+    onLayout: onLabelLayout
   }, label)), /*#__PURE__*/React__default["default"].createElement(StyledTextInputContainer, {
     onLayout: onLayout
   }, /*#__PURE__*/React__default["default"].createElement(StyledBorderBackDrop, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.45.0",
+  "version": "8.45.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -28,11 +28,11 @@
     "nanoid": "^4.0.2"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.42.5",
+    "@hero-design/react-native-month-year-picker": "^8.42.6",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.4.3",
     "react": "18.2.0",
-    "react-native": "0.71.13",
+    "react-native": "^0.71.0",
     "react-native-gesture-handler": "^1.10.3 | ~2.5.0",
     "react-native-linear-gradient": "^2.6.2",
     "react-native-pager-view": "^5.4.25",
@@ -48,8 +48,8 @@
     "@babel/runtime": "^7.20.0",
     "@emotion/jest": "^11.11.0",
     "@hero-design/eslint-plugin": "8.42.5",
-    "@hero-design/react-native-month-year-picker": "^8.42.5",
-    "@react-native-community/datetimepicker": "^3.5.2",
+    "@hero-design/react-native-month-year-picker": "^8.42.6",
+    "@react-native-community/datetimepicker": "3.5.2",
     "@react-native-community/slider": "4.4.3",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^21.0.1",
@@ -71,7 +71,7 @@
     "jest-junit": "^16.0.0",
     "prettier-config-hd": "8.42.4",
     "react": "18.2.0",
-    "react-native": "0.71.13",
+    "react-native": "0.71.14",
     "react-native-gesture-handler": "~2.5.0",
     "react-native-linear-gradient": "^2.6.2",
     "react-native-pager-view": "^5.4.25",

package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.spec.tsx.snap

@@ -108,7 +108,8 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
               {
                 "alignItems": "center",
                 "flexDirection": "row",
-                "left": -32,
+                "justifyContent": "center",
+                "left": 0,
                 "position": "absolute",
                 "right": 0,
                 "top": -10.666666666666666,
@@ -117,7 +118,7 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
                     "translateY": 0,
                   },
                   {
-                    "translateX": 48,
+                    "translateX": 24,
                   },
                   {
                     "scale": 1,
@@ -130,6 +131,7 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
           >
             <Text
               allowFontScaling={false}
+              onLayout={[Function]}
               style={
                 [
                   {
@@ -386,7 +388,8 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
               {
                 "alignItems": "center",
                 "flexDirection": "row",
-                "left": -32,
+                "justifyContent": "center",
+                "left": 0,
                 "position": "absolute",
                 "right": 0,
                 "top": -10.666666666666666,
@@ -395,7 +398,7 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
                     "translateY": 0,
                   },
                   {
-                    "translateX": 48,
+                    "translateX": 24,
                   },
                   {
                     "scale": 1,
@@ -408,6 +411,7 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
           >
             <Text
               allowFontScaling={false}
+              onLayout={[Function]}
               style={
                 [
                   {
@@ -670,7 +674,8 @@ exports[`DatePicker renders variant Calendar 1`] = `
               {
                 "alignItems": "center",
                 "flexDirection": "row",
-                "left": -32,
+                "justifyContent": "center",
+                "left": 0,
                 "position": "absolute",
                 "right": 0,
                 "top": -10.666666666666666,
@@ -679,7 +684,7 @@ exports[`DatePicker renders variant Calendar 1`] = `
                     "translateY": 0,
                   },
                   {
-                    "translateX": 48,
+                    "translateX": 24,
                   },
                   {
                     "scale": 1,
@@ -692,6 +697,7 @@ exports[`DatePicker renders variant Calendar 1`] = `
           >
             <Text
               allowFontScaling={false}
+              onLayout={[Function]}
               style={
                 [
                   {

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap

@@ -108,7 +108,8 @@ exports[`DatePickerAndroid renders correctly 1`] = `
               {
                 "alignItems": "center",
                 "flexDirection": "row",
-                "left": -32,
+                "justifyContent": "center",
+                "left": 0,
                 "position": "absolute",
                 "right": 0,
                 "top": -10.666666666666666,
@@ -117,7 +118,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
                     "translateY": 0,
                   },
                   {
-                    "translateX": 48,
+                    "translateX": 24,
                   },
                   {
                     "scale": 1,
@@ -130,6 +131,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
           >
             <Text
               allowFontScaling={false}
+              onLayout={[Function]}
               style={
                 [
                   {

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap

@@ -108,7 +108,8 @@ exports[`DatePickerCalendar renders correctly 1`] = `
               {
                 "alignItems": "center",
                 "flexDirection": "row",
-                "left": -32,
+                "justifyContent": "center",
+                "left": 0,
                 "position": "absolute",
                 "right": 0,
                 "top": -10.666666666666666,
@@ -117,7 +118,7 @@ exports[`DatePickerCalendar renders correctly 1`] = `
                     "translateY": 0,
                   },
                   {
-                    "translateX": 48,
+                    "translateX": 24,
                   },
                   {
                     "scale": 1,
@@ -130,6 +131,7 @@ exports[`DatePickerCalendar renders correctly 1`] = `
           >
             <Text
               allowFontScaling={false}
+              onLayout={[Function]}
               style={
                 [
                   {

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -108,7 +108,8 @@ exports[`DatePickerIOS renders correctly 1`] = `
               {
                 "alignItems": "center",
                 "flexDirection": "row",
-                "left": -32,
+                "justifyContent": "center",
+                "left": 0,
                 "position": "absolute",
                 "right": 0,
                 "top": -10.666666666666666,
@@ -117,7 +118,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                     "translateY": 0,
                   },
                   {
-                    "translateX": 48,
+                    "translateX": 24,
                   },
                   {
                     "scale": 1,
@@ -130,6 +131,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
           >
             <Text
               allowFontScaling={false}
+              onLayout={[Function]}
               style={
                 [
                   {

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -148,7 +148,11 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
       postMessage(webview.current, message);
     }
   };
-  const [inputHeight, setInputHeight] = React.useState<number>(0);
+  const [inputSize, setInputSize] = React.useState<{
+    height: number;
+    width: number;
+  }>({ height: 0, width: 0 });
+  const [labelWidth, setLabelWidth] = React.useState<number>(0);
 
   const focusAnimation = useRef(new Animated.Value(0)).current;
 
@@ -162,8 +166,13 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
   }, [focusAnimation, isEmptyValue, isFocused]);
 
   const onLayout = useCallback((event: LayoutChangeEvent) => {
-    const { height } = event.nativeEvent.layout;
-    setInputHeight(height);
+    const { height, width } = event.nativeEvent.layout;
+    setInputSize((prev) => ({ ...prev, height, width }));
+  }, []);
+
+  const onLabelLayout = useCallback((event: LayoutChangeEvent) => {
+    const { width } = event.nativeEvent.layout;
+    setLabelWidth(width);
   }, []);
 
   useEffect(() => {
@@ -335,13 +344,16 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
               {
                 translateY: focusAnimation.interpolate({
                   inputRange: [0, 1],
-                  outputRange: [inputHeight / 2, 0],
+                  outputRange: [inputSize.height / 2, 0],
                 }),
               },
               {
                 translateX: focusAnimation.interpolate({
                   inputRange: [0, 1],
-                  outputRange: [theme.space.xxxlarge, 0],
+                  outputRange: [
+                    -inputSize.width / 2 + labelWidth / 2 + theme.space.large,
+                    -inputSize.width / 2 + labelWidth / 2 + theme.space.small,
+                  ],
                 }),
               },
               {
@@ -371,6 +383,7 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
             }}
             testID="input-label"
             themeState={state}
+            onLayout={onLabelLayout}
           >
             {label}
           </StyledLabelInsideTextInput>

package/src/components/RichTextEditor/__tests__/__snapshots__/RichTextEditor.spec.tsx.snap

@@ -26,7 +26,8 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
         {
           "alignItems": "center",
           "flexDirection": "row",
-          "left": -32,
+          "justifyContent": "center",
+          "left": 0,
           "position": "absolute",
           "right": 0,
           "top": -10.666666666666666,
@@ -35,7 +36,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
               "translateY": 0,
             },
             {
-              "translateX": 48,
+              "translateX": 24,
             },
             {
               "scale": 1,
@@ -49,6 +50,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
     >
       <Text
         allowFontScaling={false}
+        onLayout={[Function]}
         style={
           [
             {
@@ -342,7 +344,8 @@ exports[`RichTextEditor should render correctly 1`] = `
         {
           "alignItems": "center",
           "flexDirection": "row",
-          "left": -32,
+          "justifyContent": "center",
+          "left": 0,
           "position": "absolute",
           "right": 0,
           "top": -10.666666666666666,
@@ -351,7 +354,7 @@ exports[`RichTextEditor should render correctly 1`] = `
               "translateY": 0,
             },
             {
-              "translateX": 48,
+              "translateX": 24,
             },
             {
               "scale": 1,
@@ -365,6 +368,7 @@ exports[`RichTextEditor should render correctly 1`] = `
     >
       <Text
         allowFontScaling={false}
+        onLayout={[Function]}
         style={
           [
             {