Question: In HTML we can use fieldset-legend like this:

Code:

```
 <fieldset>
  <legend>Heading</legend>
 </fieldset>

```

O/P:

[![enter image description here](https://i.stack.imgur.com/aZGmQ.png)](https://i.stack.imgur.com/aZGmQ.png)

How can I design the same things using react-native? [Here](https://stackoverflow.com/a/45528491/3835843) I got a technique where it created text with a straight line, but I want to design it like fieldset-legend. How can I do that?

Answer: 
I got a technique to create this fieldset-legend without any library/package. Here is my JSX code:

JSX view:

```
<View style={styles.fieldSet}>
    <Text style={styles.legend}>Heading</Text>
    <Text>Some Text or control</Text>
</View>

```

JSX style:

```
const styles = StyleSheet.create({
    fieldSet:{
        margin: 10,
        paddingHorizontal: 10,
        paddingBottom: 10,
        borderRadius: 5,
        borderWidth: 1,
        alignItems: 'center',
        borderColor: '#000'
    },
    legend:{
        position: 'absolute',
        top: -10,
        left: 10,
        fontWeight: 'bold',
        backgroundColor: '#FFFFFF'
    }
});

```
This FieldSet is not working

import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, SafeAreaView, TextInput } from 'react-native';
import FieldSet from 'react-native-fieldset';
import LinearGradient from 'react-native-linear-gradient'

// create a component
export default function MyComponent() {
return (

```
        <View>
            <FieldSet  label="Fieldset label" label2='try'>

                <TextInput placeholder='House Name/ Number'/>
            </FieldSet>
        </View>

);

```

};