How to design fieldset legend using react-native - reactjs

Question

In HTML we can use fieldset-legend like this:
Code:
<fieldset>
<legend>Heading</legend>
</fieldset>
O/P:
How can I design the same things using react-native? Here 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 1

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'
}
});

Answer 2

You could you Readymade package - react-native-fieldset
Its very easy to work with it.
You could directly do-
import FieldSet from 'react-native-fieldset';
import { View, Text } from 'react-native';
//...
return (
<View>
<FieldSet label="Fieldset label">
<Text>Field Set Body</Text>
</FieldSet>
</View>
);
//...

Answer 3

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>
);
};