I’m encountering an issue with my React Native application when running it on macOS using Mac Catalyst. A black border appears at the top of the ScrollView. I have tried various approaches to remove it but none have worked so far.
Screenshot:
My Code:
<code>import { ScrollView } from 'react-native';
import { IProps } from './types';
export const ScrollViewComponent: React.FC<IProps> = (props) => {
const { children, contentContainerStyle } = props;
return <ScrollView>{children}</ScrollView>;
};
</code>
<code>import { ScrollView } from 'react-native';
import { IProps } from './types';
export const ScrollViewComponent: React.FC<IProps> = (props) => {
const { children, contentContainerStyle } = props;
return <ScrollView>{children}</ScrollView>;
};
</code>
import { ScrollView } from 'react-native';
import { IProps } from './types';
export const ScrollViewComponent: React.FC<IProps> = (props) => {
const { children, contentContainerStyle } = props;
return <ScrollView>{children}</ScrollView>;
};
Steps I’ve Taken:
- Tried setting borderWidth: 0 and borderColor: ‘transparent’ in the ScrollView styles.
- Used Platform.OS to apply macOS-specific styles.
- Checked parent components for unintended styles.
- Ensured my React Native and relevant dependencies are up to date.
<code></code>
<code></code>