ant-design / ant-design-mobile-rn

Ant Design for React Native
https://rn.mobile.ant.design/
MIT License
3.05k stars 612 forks source link

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

Open kamprasad opened 1 week ago

kamprasad commented 1 week ago

💬 Before You Start

🙋 Description/Step to reproduce

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

image image

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 commented 1 week ago

need show more code

kamprasad commented 5 days ago

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

image