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.

Sign up for GitHub

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

Jump to bottom

Flatlist does not show refresh activity programmably after a user refresh #17734

Closed
flyingxu opened this issue Jan 25, 2018 · 12 comments
Closed

Flatlist does not show refresh activity programmably after a user refresh #17734

flyingxu opened this issue Jan 25, 2018 · 12 comments
Labels
Ran Commands One of our bots successfully processed a command. Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@flyingxu
Copy link

flyingxu commented Jan 25, 2018 •
edited
Loading

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: macOS High Sierra 10.13.3
Node: 6.11.3
Yarn: 0.26.1
npm: 5.8.0
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 2.3 AI-162.4069837

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.3 => 0.55.3

Target Platform: iOS (11.2)

Steps to Reproduce

(Write your steps here:)

  1. Create a react-native project from the react-native init cmd and change the app.js as the link below:
  2. Click the "Click to Refresh" button and wait for several seconds and then click the "Click to Stop" button, the refresh activity shows. I call this as a "programmable refresh".
  3. Slide down the "aaaaaaaaaa" "bbbbbbbb" list to let the flatlist display refresh activity, click the "Click to Stop" button to stop refreshing. I call this as a "user refresh"
  4. After the "user refresh", click the "Click to Refresh" to start a programmable refresh again.

Expected Behavior

The refresh activity shows, just as in the step 2's result.

(Write what you thought would happen.)

Actual Behavior

The refresh activity does not show, but there is a very slight movement of the flatlist

(Write what happened. Add screenshots!)

Reproducible Demo

https://snack.expo.io/SJjZfR8rG

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    Button,
    FlatList,
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component<{}> {
    constructor(){
        super();
        this.state = {refreshing : false};
    }

  render() {
    return (
      <View style={styles.container}>
          <FlatList
              data={[{key: 'aaaaaaaaaa'}, {key: 'bbbbbbbbbbbbbb'}]}
              renderItem={({item}) => <Text style={{width: 200, fontSize:20}}>{item.key}</Text>}
              refreshing ={this.state.refreshing}
              onRefresh ={this.onRefresh}
          />
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
          <Button
              title = {'Click to Refresh'}
              onPress = {this.onRefresh}
          ></Button>
          <Button
              title = {'Click to Stop'}
              onPress = {this.onStop}
          ></Button>
      </View>
    );
  }

  onRefresh = ()=>{
      this.setState({refreshing : true});
  }
    onStop = ()=>{
            this.setState({refreshing : false});
    }

}

const styles = StyleSheet.create({
  container: {
      flexDirection : 'column',
      padding: 50,
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

(Paste the link to an example project and exact instructions to reproduce the issue.)
1: click "Click to Refresh"
2: click "Click to Stop"
3: slide down to refresh
4: click "Click to Stop"
5: click "Click to Refresh" again
@flyingxu
Copy link
Author

it seems that it's not directly related to Flatlist, SectionList seems to have the same issue.

<SectionList
              sections = {[{
                  title : 'test',
                  data : [{key: 'aaaaaaaaaa'}, {key: 'bbbbbbbbbbbbbb'}]
              }]}
              renderItem={({item}) => <Text style={{width: 200, fontSize:20}}>{item.key}</Text>}
              refreshing ={this.state.refreshing}
              onRefresh ={this.onRefresh}
          />

Same issue as Flatlist.

@vonovak
Copy link
Collaborator

vonovak commented Jan 26, 2018

@flyingxu can you verify if this fixes your issue? #17727

@flyingxu
Copy link
Author

@vonovak unfortunately, it does not fix this issue.

This is how I test it:

Copy the changed line from that PR (just 1 line of code) to my project's local file of FlatlistRefresh/node_modules/react-native/React/Views then run the app again. The issue still exists.

I debugged into it a little bit (first time debugging using xcode, surprised to see how hard to display a variable value in xcode),

CGPoint offset = {scrollView.contentOffset.x, scrollView.contentOffset.y - self.frame.size.height};

in normal case: self.frame.size.height is 60,
but after a user refresh, and then programmatically refresh:
self.frame.size.height is 0.5

I'm sorry I'm not an experienced xcode developer, if someone can guide me how to debug into it, I might find out how the value of self.frame.size.height is changed. I can't find how the height is changed in RCTRefreshControl.m. I can't find how a user refresh is handled, either. I need some guidance here.

@vonovak
Copy link
Collaborator

vonovak commented Jan 27, 2018

@flyingxu then this PR is probably the fix: #14259

@flyingxu
Copy link
Author

flyingxu commented Jan 28, 2018 •
edited
Loading

Maybe.....but that PR was closed already.

@flyingxu
Copy link
Author

if I make self.frame.size.height to be const as 60, the issue is fixed.
Then the root cause might be how self.frame.size.height is changed to 0.5.

@react-native-bot
Copy link
Collaborator

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

How to Contribute • What to Expect from Maintainers

@react-native-bot react-native-bot added Ran Commands One of our bots successfully processed a command. Stale There has been a lack of activity on this issue and it may be closed soon. labels Feb 24, 2018
@salmanwaheed
Copy link

salmanwaheed commented Feb 24, 2018 via email

@flyingxu
Copy link
Author

This bug still exists in 0.55.3. Could you @react-native-bot reopen it?

@shahchaitanya
Copy link

shahchaitanya commented May 1, 2018 •
edited
Loading

@flyingxu Here is my work around.

  • Initialize a local state called isScrolled to false.
  • Set isScrolled state to true while calling onRefresh method of FlatList.
  • Check isScrolled value when you call programmable refresh function.
    • If isScrolled is true then Scroll FlatList to -60. Using scrollToOffset method.
    • Set isScrolled to false.

@flyingxu
Copy link
Author

flyingxu commented May 4, 2018

@shahchaitanya Thanks, and my workaround is more direct:
in node_modules\react-native\React\Views\RCTRefreshControl.m I change it to:

CGPoint offset = {scrollView.contentOffset.x, scrollView.contentOffset.y - 60}; //self.frame.size.height

It seems dangerous at the first sight, but here in my app it runs beautifully

@shahchaitanya
Copy link

@flyingxu Your solution is correct. But it's better practise not to update node_modules. Because we don't usually commit node_modules.

@facebook facebook locked and limited conversation to collaborators May 15, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Ran Commands One of our bots successfully processed a command. Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@flyingxu @vonovak @shahchaitanya @salmanwaheed @react-native-bot