React Native: How to make rounded corners TextInput

Last updated on October 23, 2020 A Goodman Loading... Post a comment

This article shows you how to make a rounded corners text input in React Native for both Android and iOS.

1. Add a TextInput component:

<TextInput style={styles.input} placeholder="Type something here" />

2. Style it:

input: {
    width: 300,
    height: 40,
    backgroundColor: '#fff',
    paddingVertical: 10,
    paddingHorizontal: 15,
    borderColor: '#ccc',
    borderWidth: 1,
    borderRadius: 15, 
    fontSize: 16,
},

Here’s the output on iOS and Android:

The full code of this example:

import React from 'react';
import {View, StyleSheet, TextInput} from 'react-native';

const App = () => {
  return (
    <View style={styles.screen}>
      <TextInput style={styles.input} placeholder="Type something here" />
    </View>
  );
};

const styles = StyleSheet.create({
  screen: {
    width: '100%',
    height: '100%',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#1e90ff',
  },
  input: {
    width: 300,
    height: 40,
    backgroundColor: '#fff',
    paddingVertical: 10,
    paddingHorizontal: 15,
    borderColor: '#ccc',
    borderWidth: 1,
    borderRadius: 15, 
    fontSize: 16,
  },
});

export default App;

Done!

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles