How to create a link url input field in React Native? Code Example

A link url is made up http, :, //, www, ., and other characters. It is beneficial if the keyboard for this input field provides easy access to these entities.

React Native TextInput component has keyboarType=url param which displays a handy keyboard for typing url.

It works with both Android and iOS apps.

Code Example

import React from "react";
import { SafeAreaView, StyleSheet, TextInput, View, Text } from "react-native";

const PhoneNumberTextInput = () => {
  const [number, onChangeNumber] = React.useState(null);

  return (
    <SafeAreaView>
      <View style={styles.container}>
        <Text>keyboardType = url</Text>
        <TextInput
          style={styles.input}
          onChangeText={onChangeNumber}
          value={number}
          keyboardType="url"
        />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    marginTop: 40
  },
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
});

export default PhoneNumberTextInput;

Output –

From the image you can see that keyboard is showing buttons for / . com etc. Because for creating a url, we generally need these characters or phrases. Both the Android and iOS phones have keyboards with url layout.

In the code we are setting keyboardType=url in line 15.

Live Demo

Conclusion

To create an input field for link url, you need to provide simplicity in the insertion. This is done by setting keyboardType=url prop in TextInput component in React Native.