diff --git a/addons/ondevice-controls/src/types/Number.tsx b/addons/ondevice-controls/src/types/Number.tsx
index 39744a767e..129fde3f5b 100644
--- a/addons/ondevice-controls/src/types/Number.tsx
+++ b/addons/ondevice-controls/src/types/Number.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import Slider from '@react-native-community/slider';
 import styled from '@emotion/native';
@@ -15,7 +15,7 @@ const Input = styled.TextInput(({ theme }) => ({
 export interface NumberProps {
   arg: {
     name: string;
-    value: any;
+    value: number;
     step: number;
     min: number;
     max: number;
@@ -23,21 +23,28 @@ export interface NumberProps {
     defaultValue: number;
   };
 
-  onChange: (value: any) => void;
+  onChange: (value: number) => void;
 }
 
 const NumberType = ({ arg, onChange = (value) => value }: NumberProps) => {
-  const allowComma = typeof arg.value === 'string' ? arg.value.trim().replace(/,/, '.') : arg.value;
-  const showError = Number.isNaN(Number(allowComma));
+  const showError = Number.isNaN(arg.value);
+  const [numStr, setNumStr] = useState(arg.value.toString());
+
+  const handleNormalChangeText = (text: string) => {
+    const commaReplaced = text.trim().replace(/,/, '.');
+
+    setNumStr(commaReplaced);
+    onChange(Number(commaReplaced));
+  };
 
   const renderNormal = () => {
     return (
       <Input
         autoCapitalize="none"
         underlineColorAndroid="transparent"
-        value={arg.value.toString()}
+        value={numStr}
         keyboardType="numeric"
-        onChangeText={onChange}
+        onChangeText={handleNormalChangeText}
         style={showError && styles.errorBorder}
       />
     );