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, styles.capFirst]}>{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:24,
		paddingTop: 0,
		flex:1,
		flexDirection: 'row',
		justifyContent:'space-between',
		opacity:1,
		alignItems: 'baseline'
	},
	capFirst: {
		fontSize: 14, 
		fontFamily: 'roboto-light',
		textTransform: 'capitalize'
	},
	defaultInput: {
		width:62,
		height:21,
		borderWidth:1,
		backgroundColor: 'white',
		borderColor: '#00000030',
		borderRadius:14,
		paddingLeft: 10,
		paddingRight: 10
											
	}
})