Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RefreshControl in FlatList makes borderWidth not working #22752

Closed
3 tasks done
MoKhajavi75 opened this issue Dec 22, 2018 · 2 comments
Closed
3 tasks done

RefreshControl in FlatList makes borderWidth not working #22752

MoKhajavi75 opened this issue Dec 22, 2018 · 2 comments

Comments

@MoKhajavi75
Copy link

MoKhajavi75 commented Dec 22, 2018

Environment

React Native Environment Info:
  System:
    OS: Windows 8.1
    CPU: (8) x64 Intel(R) Core(TM) i7-4710HQ CPU @ 2.50GHz
    Memory: 8.41 GB / 15.92 GB
  Binaries:
    Yarn: 1.12.3 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
  IDEs:
    Android Studio: Version  2.3.0.0 AI-162.3871768

Description

Describe your issue in detail. Include screenshots if needed. If this is a regression, let us know.

Reproducible Demo

  1. react-native init MyTestingProject
  2. cd MyTestingProject
  3. react-native run-android
  4. Create a normal <FlatList>:
import * as React from 'react';
import { Text, FlatList, RefreshControl } from 'react-native';

export default class App extends React.Component {
  state = {isLoading: false};

  render() {
    return (
      <FlatList
        style={{
          flex: 1,
          alignSelf: "stretch",
          borderWidth: 2,
          borderColor: "red"
        }}
        data={["a", "b", "c"]}
        renderItem={({ item }) => (
          <Text>
            {item}
          </Text>
        )}
        refreshControl={
          <RefreshControl
            colors={["red", "yellow"]}
            refreshing={this.state.isLoading}
            onRefresh={() => this.reload()}
          />
        }
      />
    );
  }
}
  1. We have no borders! Now remove the refreshControl to see the borders:
<FlatList
  style={{
    flex: 1,
    alignSelf: "stretch",
    borderWidth: 2,
    borderColor: "red"
  }}
  data={["a", "b", "c"]}
  renderItem={({ item }) => (
    <Text>
      {item}
    </Text>
  )}
/>;
@elicwhite
Copy link
Member

I was able to repro this on 0.59.

@Nizarius
Copy link
Contributor

@TheSavior it seems that the bug is caused by one line of legacy code. Please, look at my PR.

kelset pushed a commit that referenced this issue Jun 7, 2019
Summary:
Fixes #22752

On line 1021 you are passing base style to props:
`style: [baseStyle, this.props.style],`

Explicitly passing base style to ScrollView just overrides this line and doesn't let developers to customise style of any inheritors of ScrollView (not only FlatList) with custom RefreshControl.

So this line (1113) seems to be removed.

## Changelog

[GENERAL] [Fixed] - fix of Android's bug that doesn't let override ScrollView's Style with custom RefreshControl.
Pull Request resolved: #24411

Differential Revision: D15713061

Pulled By: cpojer

fbshipit-source-id: 461259800f867af15e53e0743a5057ea4528ae69
M-i-k-e-l pushed a commit to M-i-k-e-l/react-native that referenced this issue Mar 10, 2020
…ok#24411)

Summary:
Fixes facebook#22752

On line 1021 you are passing base style to props:
`style: [baseStyle, this.props.style],`

Explicitly passing base style to ScrollView just overrides this line and doesn't let developers to customise style of any inheritors of ScrollView (not only FlatList) with custom RefreshControl.

So this line (1113) seems to be removed.

## Changelog

[GENERAL] [Fixed] - fix of Android's bug that doesn't let override ScrollView's Style with custom RefreshControl.
Pull Request resolved: facebook#24411

Differential Revision: D15713061

Pulled By: cpojer

fbshipit-source-id: 461259800f867af15e53e0743a5057ea4528ae69
@facebook facebook locked as resolved and limited conversation to collaborators Jun 7, 2020
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jun 7, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants