[Bug] The Form element adding extra white border top of the page

[kamprasad]

💬 Before You Start

• [X] I have searched the issues of this repository and believe that this is not a duplicate.

🙋 Description/Step to reproduce

I'm using Antd Form element and there is a white colour border added automatically to the page.

Could you suggest a solution for this? I want to remove this line from the UI.

🔴 Version

5.2.2

💻 Environment

iOS, Android

⚫️ Output of npx react-native info

NA

Additional comments

NA

[1uokun]

need show more code

[kamprasad]

Hi @1uokun,

I have a very basic component as below. The Form element by default adding white color as background and I set it as transparent to see parent component bg color Still one border line adding to the Form element as default which not sure how to get rid of.

import React from 'react';
import {Text, View} from 'react-native';
import {Form} from '@ant-design/react-native';

export const AppScreen = () => {
  return (
    <React.Fragment>
      <View style={{height: 100, backgroundColor: 'gray', top: 100}}>
        <Form
          initialValues={{}}
          onFinish={() => {}}
          style={{backgroundColor: 'transparent', top: 10}}
          styles={{
            Body: {
              backgroundColor: 'transparent',
              borderColor: 'transparent',
              borderBlockColor: 'transparent',
            },
            List: {
              backgroundColor: 'transparent',
              borderColor: 'transparent',
              borderBlockColor: 'transparent',
            },
          }}>
          <Text>Name</Text>
        </Form>
      </View>
    </React.Fragment>
  );
};

[1uokun]

styles={{
  BodyBottomLine: {
    height: 0,
  },
}}

[kamprasad]

Thank you ! It works perfectly.