How to Create Text Border in React Native

Is it possible to write text in border in react native (like in photo)?

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

const styles = StyleSheet.create({
  container: {
    height: 65, 
    position: 'relative',
  },
  labelContainer: {
    position: 'absolute',
    backgroundColor: '#FFF',
    top: -8,
    left: 25,
    padding: 5,
    zIndex: 50,
  },
  textInput: {
    flex: 1, 
    borderWidth: 1, 
    borderColor: "steel",
    justifyContent: 'flex-end',
    height: 44,
    borderRadius: 65,
    paddingHorizontal: 25,
  }
})

const CustomTextInput = ({ label, style, ...props}) => (
  <View style={styles.container}>
    <View style={styles.labelContainer}>
      <Text>{label}</Text>
    </View>
    <TextInput style={styles.textInput}/>
  </View>
);

export default CustomTextInput;

Usage:

import TextInput from './TextInput';

<TextInput label="User name" />

You can tweak the styles depending on your needs.

Here's how that looks:

React Native add border to text

Yes it is possible for that you need to wrap it in another view like this:

   <View style={styles.container}>
        <View style={styles.inner}>
  <Text>A DIFFERENT EXPERIENCE</Text>
        </View>
      </View>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderWidth:4
  },
  inner:{
  borderWidth:4

  }

Cheers:)

React Native - Text Input's Bottom Border

The documentation states "TextInput has by default a border at the bottom of its view. This border has its padding set by the background image provided by the system, and it cannot be changed."

Still, if you add borderBottomWidth: 0 to your styles, that should "remove" it.

For react-native-paper, the solution would be adding the following inside your component:

underlineColor="transparent"

Should look like this:

<TextInput
    style={styles.emptyPostPageTitleInput}
    placeholder="title"
    placeholderTextColor="grey"
    maxLength={17}
    underlineColor="transparent"/>

React Native font outline / textShadow

Yes it is possible through the following properties:

textShadowColor color
textShadowOffset ReactPropTypes.shape( {width: ReactPropTypes.number, height: ReactPropTypes.number} )
textShadowRadius ReactPropTypes.number

https://facebook.github.io/react-native/docs/text.html

Actual completed pull request:
https://github.com/facebook/react-native/pull/4975

How to add border to nested text component?

Change the wrapper to a View. A Text component should only hold text.

https://snack.expo.io/B1vAnjjZH

export default class App extends React.Component {
    render() {
        return (
            <View>
                <Text> first part of the text </Text>
                {/* this doesn't show border  */}
                <Text style={{
                    borderWidth: 1,
                    borderColor: 'black',
                    borderRadius: 12, padding: 8, color: '#577FFF',
                }}>
                    middle part of the text
                </Text>
                <Text> last part of the text </Text>
            </View>
        );
    }
}

Setting a border for react native TextInput

1 You cannot declare a specific border directly on the TextInput unless multiline is enabled (For example borderLeftWidth will not work unless multiline={true} is enabled but borderWidth will work), but you can just wrap the TextInput in a View and give it a border.

inputContainer: {
  borderLeftWidth: 4,
  borderRightWidth: 4,
  height: 70
},
input: {
  height: 70,
  backgroundColor: '#ffffff',
  paddingLeft: 15,
  paddingRight: 15
}

2 You need to declare a backgroundColor for the TextInput.

3 To make the native keyboard show up, you need to go to the simulator menu and disconnect your hardware. Go to Hardware -> Keyboard -> Connect Hardware Keyboard, toggle it off.

---

Related Topics