Numbers.js 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. import React, { useState } from 'react';
  2. import {View , Text, TextInput, Button,StyleSheet} from 'react-native';
  3. import { Icon } from 'react-native-elements'
  4. export default function Numbers(props) {
  5. let [number , setNumber] = useState(props.value || '')
  6. let title = props.title || "Input";
  7. return(
  8. <View style={styles.container}>
  9. <Text style={[styles.title, styles.capFirst]}>{title}</Text>
  10. <TextInput
  11. onChangeText={(number) => {
  12. try{
  13. number = parseInt(number);
  14. } catch(e) {
  15. return;
  16. }
  17. props.onChange && props.onChange(number);
  18. setNumber(number);
  19. }}
  20. keyboardType={'numeric'}
  21. value={number.toString()}
  22. style={[styles.defaultInput]}
  23. />
  24. </View>
  25. )
  26. }
  27. const styles = StyleSheet.create({
  28. container:{
  29. flex:1,
  30. flexDirection: 'row',
  31. justifyContent:'space-between',
  32. opacity:1,
  33. alignItems: 'baseline'
  34. },
  35. capFirst: {
  36. fontSize: 14,
  37. fontFamily: 'roboto-light',
  38. textTransform: 'capitalize'
  39. },
  40. defaultInput: {
  41. width:62,
  42. height:21,
  43. borderWidth:1,
  44. backgroundColor: 'white',
  45. borderColor: '#00000030',
  46. borderRadius:14,
  47. paddingLeft: 10,
  48. paddingRight: 10
  49. }
  50. })