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

[FlatList] looks weird after call scrollToEnd(), add a gif #14033

Closed
zongwan opened this issue May 18, 2017 · 2 comments
Closed

[FlatList] looks weird after call scrollToEnd(), add a gif #14033

zongwan opened this issue May 18, 2017 · 2 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@zongwan
Copy link
Contributor

zongwan commented May 18, 2017

* React Native version: 0.45.0-rc.0
* Platform: iOS 9.3 only
* Development Operating System: macOS
* Dev tools: Xcode 8.3.2

scrollToEnd() without enough items then FlatList never comes back to top every time .

before

core code

fetchBugDetail() {
    this.setState({ fetching: true }, () => {
      const items = [...defaultItems];
      setTimeout(() => {
        this.setState(
          { items, fetching: false },
        );
      }, 1000);
      setTimeout(() => this.autoScroll(), 1300);
    });
  }

I don't know when will fetch action finish with redux-saga, so I do setTimeout. (sad for self)
Could you tell me how to trigger view's method after fetch action in a preferred way ?

----- full code -----

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  View,
  FlatList,
} from 'react-native';

const defaultItems = [
  {
    at: '2017-05-18 14:49:50',
    msg: 'ScrollView Bug?',
    type: 0,
  },
  {
    at: '2017-05-18 14:49:51',
    msg: 'scrollToEnd() without enough items',
  },
  {
    at: '2017-05-18 14:49:52',
    msg: 'It looks weird',
    type: 0,
  },
  {
    at: '2017-05-18 14:49:53',
    msg: 'how to fix it ?',
  },
  {
    at: '2017-05-18 14:49:54',
    msg: '------note------',
    type: 0,
  },
  {
    at: '2017-05-18 14:49:55',
    msg: 'Make it gray to help you understand.',
    type: 0,
  },
];
export default class example extends Component {

  constructor() {
    super();
    this.state = {
      items: [],
      fetching: false,
      input: null,
    };
  }
  componentDidMount() {
    this.fetchBugDetail();
  }
  autoScroll() {
    if (this.flatList) {
      this.flatList.scrollToEnd();
    }
  }
  fetchBugDetail() {
    this.setState({ fetching: true }, () => {
      const items = [...defaultItems];
      setTimeout(() => {
        this.setState(
          { items, fetching: false },
        );
      }, 1000);
      setTimeout(() => this.autoScroll(), 1300);
    });
  }

  renderItem({ item }) {
    let place;
    let bgc;
    let tc;
    if (item.type === 0) {
      place = 'flex-start';
      bgc = '#fff';
      tc = '#000';
    } else {
      place = 'flex-end';
      bgc = '#25b6f3';
      tc = '#fff';
    }
    return (
      <View
        style={{
          marginHorizontal: 4,
          marginVertical: 8,
        }}
      >
        <View
          style={{
            alignItems: 'center',
            justifyContent: 'center',
            marginBottom: 12,
          }}
        >
          <Text>
            {item.at}
          </Text>
        </View>
        <View
          style={{
            backgroundColor: bgc,
            borderRadius: 4,
            alignSelf: place,
            padding: 8,
          }}
        >
          <Text
            style={{
              color: tc,
            }}
          >
            {item.msg}
          </Text>
        </View>
      </View>
    );
  }
  render() {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: '#F5FCFF',
        }}
      >
        <FlatList
          contentContainerStyle={{
            backgroundColor: '#ccc',
          }}
          ref={(r) => { this.flatList = r; }}
          data={this.state.items}
          keyExtractor={item => item.at}
          renderItem={item => this.renderItem(item)}
          refreshing={this.state.fetching}
          onRefresh={() => this.fetchBugDetail()}
        />
      </View>
    );
  }
}

AppRegistry.registerComponent('example', () => example);
@zongwan zongwan changed the title FlatList looks weird after call scrollToEnd() FlatList looks weird after call scrollToEnd(), add a gif May 19, 2017
@zongwan
Copy link
Contributor Author

zongwan commented May 31, 2017

@sahrens
Please consider to fix this bug.

@hramos hramos changed the title FlatList looks weird after call scrollToEnd(), add a gif [FlatList] looks weird after call scrollToEnd(), add a gif Jun 2, 2017
@fBehzad
Copy link

fBehzad commented Oct 2, 2017

autoScroll() {
if (this.flatListRef !== null) {
this.flatList.scrollToEnd();
}
}

@facebook facebook locked as resolved and limited conversation to collaborators Jun 21, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 18, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants