CODEWITHSUNDEEP
react-native
laja
laja

Reputation: 143

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

I can not find anywhere how to write text in border like in photo below with react native

Upvotes: 3

Views: 3763

Answers (1)

Dan
Dan

Reputation: 8794

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:

enter image description here

Upvotes: 9

Related Questions