How to design fieldset legend using react-native

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