How to run on recent EXPO SDK

[kopax]

Hi @ggomaeng , thanks for sharing this code.

Since the project is quite old and the snack is deprecated, I have tried to copy the components directory in a new expo project (SDK36).

I had to sed -i 's/exponent/expo/g' and I replace the ListView with a FlatList since react-native marked deprecated-react-native-listview.

My mail-list.js look like this:

/**
 * Created by ggoma on 2016. 11. 26..
 */
import React, { Component } from 'react';
import {
  Animated,
  Dimensions,
  View,
  Text,
  FlatList,
  StyleSheet,
} from 'react-native';

import MailListItem from './mail-list-item';


export default class MailList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: false,
      height: new Animated.Value(0),
    };

    this._renderRow = this._renderRow.bind(this);
    this.showUndo = this.showUndo.bind(this);
    this.renderRefreshControl = this.renderRefreshControl.bind(this);
  }

  showUndo() {
    this.props.showUndo();
  }

  _renderRow(row) {
    return (
      <MailListItem showUndo={this.showUndo} />
    );
  }

  renderRefreshControl() {
    this.setState({ isLoading: true });
    this.props.getData();
  }

  render() {
    return (
      <View>
        <FlatList
          data={this.props.data}
          renderItem={this._renderRow}
          keyExtractor={(item) => item.id}
          onRefresh={this.renderRefreshControl}
          refreshing={this.state.isLoading}
          initialNumToRender={8}
        />
      </View>
    );
  }
}

After starting my application, I can see this:

Not what I wanted, could I get some help (whenever you have time) to help me restore the gmail demo?

[ggomaeng]

Hi @kopax!

It seems like you're on the right direction. I think you're missing the styles for the FlatList and the Parent View that nests the FlatList. You could try adding flex: 1 to both Views and see how that changes the rendering :)

[kopax]

Wow, thanks for such a quick reply. I was on the point to give up.

Should I create a fork with a branch that includes my change? With a little of help, perhaps we can get this repository upgraded.

I don't get where are emails, I didn't understand how you were generating the data:

https://github.com/ggomaeng/react-native-gmail/blob/master/src/components/mail-list.js#L22

[ggomaeng]

I'm glad and am also sorry that I haven't maintained my repositories. This is the least I could do.

I haven't touched RN in a very long time so I might be a little rusty, but if you create a fork and link me, I could take a look!

[kopax]

You rock, I was already creating a fork and started to upgrade expo, I hope you will be able to give a hand. I am opening the PR and update when changes are in. Thanks!

[ggomaeng]

What are you passing to props.data in the code above?

[kopax]

What are you passing to props.data in the code above?

As I never tried ListView before, I took this ListView to FlatList upgrade guide: https://medium.com/@jrapala/how-to-replace-a-react-native-listview-component-with-a-flatlist-component-2fe8eaf2e296

Let's continue the discussion in #4