CODEWITHSUNDEEP
react-native
Shunsuke
Shunsuke

Reputation: 3

How can I refresh the page by using refreshcontrol in React Native

I would like to use refreshcontrol API,and reflect as my code included FlatList can refresh when pulled down the page.Now I wrote my code so that it can,but it don't move.Could you add the correct code to my code??


fetchData = () => {
const FEED_URL = 'https://headlines.yahoo.co.jp/rss/tamahiyo-all.xml';
}


type Props = {};

type FeedItem = {
  link: Array<string>,
  title: Array<string>,
  pubDate: Array<string>,
};

type State = {
  feedItems: Array<FeedItem>,
};


const renderItem = (params: { item: FeedItem }) => (
  <TouchableOpacity onPress={() => Linking.openURL(params.item.link[0])}>
    <View style={styles.row}>
    <Text style={styles.article} >{params.item.title[0]}</Text>
    <Text style={styles.date}>{params.item.pubDate[0]}</Text>
    </View>
  </TouchableOpacity>
);

export default class App extends Component<Props, State> {
  state = {
    feedItems: [],
  }

  componentDidMount() {
    fetch(FEED_URL)
      .then(res => res.text())
      .then((xml) => {
        const parser = xml2js.Parser();
        parser.parseString(xml, (err, result) => {
          this.setState({ feedItems: result.rss.channel[0].item });
        });
      });
  }
_onRefresh = () => {
    this.setState({refreshing: true});
    fetchData().then(() => {
      this.setState({refreshing: false});
    });
  }

  render() {
    return (

      <ImageBackground source={require('../image/akachan2.jpg')} style={styles.imageBackground}>
      <Text style={styles.header}>赤ちゃんにゅーす</Text>
        <FlatList
          ItemSeparatorComponent={() => <View style={styles.separator} />}
          data={this.state.feedItems}
          renderItem={renderItem}
          keyExtractor={item => item.link[0]}
 refreshControl={
          <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this._onRefresh}
          />
            }
        />
        </ImageBackground>
      
    );
  }
}

I think fetch function(fetchData()) don't work,but indicator can work.URL is RSS feed.

Upvotes: 0

Views: 854

Answers (1)

Ferin Patel
Ferin Patel

Reputation: 3998

You don't need RefreshControl on FlatList. It Support pull to refresh by default.

<FlatList
    ItemSeparatorComponent={() => <View style={styles.separator} />}
    data={this.state.feedItems}
    renderItem={renderItem}
    keyExtractor={item => item.link[0]}
    refreshing={this.state.refreshing}
    onRefresh={this._onRefresh}
/>

Upvotes: 2

Related Questions