How to design fieldset legend using react-native

user_3835843 0
Viewed 6064

In HTML we can use fieldset-legend like this:

Code:

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

O/P:

enter image description here

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?

react-native reactjs
2 Answers

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

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>
  );
//...
user_114071630
Related