both iOS and Android has errors when first render the page

[duzliang]

react: 15.3.2 react-native: 0.37.0

  import {connect} from 'react-redux';

import React, {Component} from 'react';
import {
  StyleSheet,
  Text,
  Image,
  View,
  ScrollView,
  TouchableOpacity,
} from 'react-native';

import NavigationBar from 'react-native-navbar';
import Spinner from 'react-native-spinkit';
import AlphabetListView from 'react-native-alphabetlistview';

import BackButton from '../components/BackButton';
import style, {colors} from '../styles/style';
import * as autoActions from '../reducers/auto/autoActions';

class SectionItem extends Component {
  render() {
    return (
      <Text style={styles.selector}>
        {this.props.title }
      </Text>
    );
  }
}

class BrandLabel extends Component {
  render() {
    return (
      <View style={styles.groupTitle}>
        <Text style={[style.font12, style.textDefault]}>
          {this.props.title}
        </Text>
      </View>
    );
  }
}

class BrandItem extends Component {
  render() {
    return (
      <View style={styles.groupItem}>
        <Image
          source={{uri: `https://oh4vsloz1.qnssl.com/car_brand_${this.props.item._id}`}}
          style={{width: 50, height: 50, marginRight: 10}}
        />
        <Text style={[style.textDefault, style.font16]}>{this.props.item.name}</Text>
      </View>
    )
  }
}

class SelectBrand extends Component {
  componentDidMount() {
    if (Object.keys(this.props.auto.brands).length === 0) {
      this.props.actions.getBrands();
    }
  }

  render() {
    let {auto} = this.props;
    let configTitle = {
      title: '选择品牌',
      tintColor: colors.dark,
    };

    return (
      <View style={style.view}>
        <NavigationBar
          title={configTitle}
          tintColor={colors.yellow}
          statusBar={{style: 'default'}}
          leftButton={<BackButton />}
        />

        {
          auto.isFetching
            ?
            <Spinner
              isVisible={true}
              color={colors.yellow}
              type="Wave"
              style={style.spinner}
            />
            :
            <AlphabetListView
              data={auto.brands}
              cell={BrandItem}
              sectionHeader={BrandLabel}
              sectionListItem={SectionItem}
              cellHeight={55}
              sectionHeaderHeight={20}
            />
        }
      </View>
    )
  }
}```

data structor is like this:

```let brands =  {
"#": [
        {
          "_id": "33",
          "name": "奥迪",
          "letter": "A"
        },
        {
          "_id": "15",
          "name": "宝马",
          "letter": "B"
        },
        {
          "_id": "1",
          "name": "大众",
          "letter": "D"
        },
        {
          "_id": "3",
          "name": "丰田",
          "letter": "F"
        },
      ],
      "A": [
        {
          "_id": "33",
          "name": "奥迪",
          "letter": "A"
        }
      ],
      "B": [
        {
          "_id": "39",
          "name": "宾利",
          "letter": "B"
        },
        {
          "_id": "40",
          "name": "保时捷",
          "letter": "B"
        },
        {
          "_id": "140",
          "name": "巴博斯",
          "letter": "B"
        },
      ],}```

when first render the page, both iOS and Android has different errors:

iOS:
Argument 0 (NSNumber) of UIManager. must not be null,
Argument 0 (<null>) of UIManager. could not be processed. Aborting method call.

Android: 
Type Error: expected dynamic type `double`, but had type `null` (constructing arguments for PKUIManager.measure at argument index 0)

[camellieeee]

+1

[kssee]

+1

[pavermakov]

I have the same issue, but in case, the initial render is fine, but the subsequent ones are throwing this issue.

[joaom182]

Same issue here.

[joaom182]

On SelectableSectionsListView.js on this part:

   UIManager.measure(ReactNative.findNodeHandle(this.refs.view), (x, y, w, h) => {
        this.containerHeight = h;
        if (this.props.contentInset && this.props.data && this.props.data.length > 0) {
          this.scrollToSection(Object.keys(this.props.data)[0]);
        }
   });

For some reason this.refs.view is undefined, so UIManager.measure() is executing with undefined param input.

The possible solution to avoid this problem is fix code by this way:

   UIManager.measure(ReactNative.findNodeHandle(this.refs.view) || 0, (x, y, w, h) => {
        this.containerHeight = h;
        if (this.props.contentInset && this.props.data && this.props.data.length > 0) {
          this.scrollToSection(Object.keys(this.props.data)[0]);
        }
      });

I will try submit a P.R, but for moment i'll create a fork and use this fork on package.json

"dependencies": {
   "react-native-alphabetlistview": "github:joaom182/react-native-alphabetlistview#master"
}