input type tel react native textinput code example

Example 1: react native numbers only input

/\*\*  
 \* Sample React Native App  
 \* https://github.com/facebook/react-native  
 \* @flow  
 \*/  

import React, { Component } from "react";  
import { Platform, StyleSheet, View, Button, TextInput, } from "react-native";  

export default class App extends Component {  

  render() {  
return (  
<View style={styles.container}>  

<TextInput  
          placeholder="Enter Your Mobile Number"  
          underlineColorAndroid='transparent'  
          style={styles.TextInputStyle}  
**keyboardType={'numeric'}**  
/>  

</View>  
);  
}  
}  

const styles = StyleSheet.create({  
  container: {  
    flex: 1,  
    justifyContent: 'center',  
},  
  headerText: {  
    fontSize: 20,  
    textAlign: "center",  
    margin: 10,  
    fontWeight: "bold"  
},  
TextInputStyle: {  
    textAlign: 'center',  
    height: 40,  
    borderRadius: 10,  
    borderWidth: 2,  
    borderColor: '#009688',  
    marginBottom: 10  
}  
});

Example 2: react native form input

import React, { useState } from 'react'
import * as rn from 'react-native'

const FormLogin = () => {
  const [value, setValue] = useState({
    username: '',
    password: ''
  })

  const onPress = () => {
    rn.Alert.alert(JSON.stringify(value))
    setValue({
      username: '',
      password: ''
    })
  }

  return (
    <rn.View style={styles.container}>
      <rn.Text style={styles.titleLogin}>Form Login</rn.Text>
      <rn.View style={styles.form}>
        <rn.TextInput
          style={styles.input}
          placeholder='enter username'
          placeholderTextColor='lightgrey'
          onChangeText={(text) => setValue({ ...value, username: text })}
          value={value.username}
          autoCompleteType='off'
        />
        <rn.TextInput
          style={styles.input}
          placeholder='enter password'
          placeholderTextColor='lightgrey'
          onChangeText={(text) => setValue({ ...value, password: text })}
          value={value.password}
          autoCompleteType='off'
          secureTextEntry
        />
        <rn.View style={styles.button}>
          <rn.Button title='login' color='green' onPress={onPress} />
        </rn.View>
      </rn.View>
    </rn.View>
  )
}

const styles = rn.StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    padding: 10,
    margin: 10
  },
  titleLogin: {
    fontSize: 22,
    textAlign: 'center',
    color: 'black',
    fontWeight: '600'
  },
  form: {
    width: '100%',
    height: 'auto',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 5,
    marginTop: 5
  },
  input: {
    width: 350,
    height: 40,
    padding: 5,
    margin: 5,
    borderWidth: 1,
    borderColor: 'grey',
    borderStyle: 'solid',
    borderRadius: 3
  },
  button: {
    width: 360,
    height: 40,
    padding: 5,
    margin: 5,
    borderRadius: 3
  }
})

export default FormLogin