Editor/Components/Numbers.js

import React, { useState } from 'react';
import {View , Text, TextInput, Button,StyleSheet} from 'react-native';
import { Icon } from 'react-native-elements'

export default function Numbers(props) {

	let [number , setNumber] = useState(props.number || '')
	let title = props.title || "Input";
	return(
		<View style={styles.container}>
			<Text style={styles.title}>{title}</Text>
			<TextInput 
					onChangeText={(number) => {
						try{
							number = parseInt(number);
						} catch(e) {
							return;
						}
						props.onChange && props.onChange(number);
						setNumber(number);
						
					}}
					keyboardType={'numeric'}
    				value={number.toString()}
    				style={[styles.defaultInput]} 

    				/>
		</View>
		)

}


const styles = StyleSheet.create({
	container:{
		padding:10,
		flex:1,
		flexDirection: 'row',
		justifyContent:'space-between',
		opacity:1
	},
	defaultInput: {
		width:62,
		height:21,
		borderWidth:1,
		borderColor: '#00000030',
		borderRadius:14,
		paddingLeft: 10,
		paddingRight: 10
											
	}
})