React-native: App crash in release mode when using 'View.propTypes.style'

[yiky84119]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: macOS High Sierra 10.13
Node: 8.7.0
Yarn: 1.2.1
npm: 5.4.2
Watchman: 4.7.0
Xcode: Xcode 9.0.1 Build version 9A1004
Android Studio: 2.3 AI-162.4069837

Packages: (wanted => installed)
react: 16.0.0 => 16.0.0
react-native: 0.49.3 => 0.49.3

Steps to Reproduce

(Write your steps here:)

1. using 'View.propTypes.style'
2. app crash in release mode
3. not crash in debug mode.

Expected Behavior

App work well

Actual Behavior

Crash

(Write what happened. Add screenshots!)
undefined is not an object(evaluating '_reactNative.View.propTypes.style')

Reproducible Demo

https://snack.expo.io/SkG37a0a-

[ide]

View.propTypes.style isn't valid and printed a deprecation message for several releases before it was removed. Use ViewPropTypes.style instead.

[sytolk]

@ide why View.propTypes.style working in develop build ?

[jorgedc93]

We have found the same issue. It only crashes in release mode, but if we are running the packager locally and using debug mode it works

[travis-little]

We have run into this issue as well - runs fine in Debug, crashes in Release.
That's not how things are supposed to work!

[ghoshabhi]

Removing View.propTypes.style works!

react-native-cli: 2.0.1
react-native: 0.49.3

[MonsieurPetion]

underfined is not an object(evaluating '_reactNative.View.propType.style'
in hashAssetFiles:127
someone know about that?

[bamne123]

This is because of the Reactoron, which is not available at release mode.
Install the plugin which will remove the Reactoron and its calls at time of creating release build.
Follow the instruction. (Not sure if it will work for others who are not using Ignite)
Ignite-Ignore-Reactotron
Hope this will help.

[arunjkumarp]

@ghoshabhi How you remove View.propTypes.style.

My project is working in simulator but not in real device.

How i find which library have issue.

"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"axios": "^0.17.1",
"react": "16.0.0-beta.5",
"react-native": "0.49.3",
"react-native-collapsible": "^0.9.0",
"react-native-country-picker-modal": "^0.5.1",
"react-native-dash": "0.0.7",
"react-native-datepicker": "^1.6.0",
"react-native-elements": "^0.17.0",
"react-native-form-validator": "^0.2.0",
"react-native-modal-dropdown": "^0.5.0",
"react-native-router-flux": "^4.0.0-beta.28",
"react-native-vector-icons": "^4.4.2",
"react-navigation": "^1.0.0-beta.13",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-persist": "^5.5.0",
"redux-thunk": "^2.2.0",
"rm": "^0.1.8",
"validate.js": "^0.12.0"
},
"devDependencies": {
"babel-jest": "21.2.0",
"babel-preset-react-native": "4.0.0",
"jest": "21.2.1",
"react-test-renderer": "16.0.0-beta.5"
},

[ghoshabhi]

@arunjkumarp : I searched for View.propTypes.style in my project and removed at all the places I found it (I found only one)! By _removed_ I mean commenting out or deleting that line.

[bamne123]

@ghoshabhi
Follow steps on following page.
https://github.com/infinitered/babel-plugin-ignite-ignore-reactotron

[carsonwah]

Hi, I just run across this issue after building my Expo app and submitted to Testflight and tested it on my real device to find out something wrong.

I don't think this issue should be closed. This issue is just so crazy. I did not expect react-native to ever do any subtle thing that can break almost all existing apps instantly.

Seven Sins

1. You can only discover it in production mode.
2. View.propTypes exists in many many packages, and libraries are very likely to suppress their warnings.
3. This does not bring much benefit, if any.
4. Libraries may have breaking changes upon updates, so you expect everyone updates all the libraries just to upgrade a version of react-native?
5. Some old libraries, that are out of maintenence but usable, are all ruined by this change.
6. You cannot simply replace it with new code. You need to use something like ViewPropTypes ? ViewPropTypes.style : View.propTypes.style.
7. Oh my god, this issue is just so crazy. Mind=Blown.

[DanDatefit]

@carsonwah I have the same views... what did you do to get around the issue being in other packages?

[carsonwah]

@DanDatefit I search for "View.propTypes.style" in my node_modules/ (with sublime) and identify which packages are crashing. I basically updated them and it is working now (thankfully).

If you have some packages that did not update for this because of out of maintainence, I guess you should:

1. Fork it
2. Edit it
3. In your package.json, change the dependency of that package to pointing to your forked repo

DO NOT directly modify node_modules.

[DanDatefit]

@carsonwah figured I'd need to fork it like you mentioned, most people are just editing the node_modules folder and calling it a day and I'm like wait whaaaatttt. Thanks for responding, luckily most packages have updated and there's only a few culprits that need utensiled.

Couldn't we just create a backwards combat library that just polyfills View.popTypes.style..?

[joshuapinter]

A little tip for anybody trying to find what dependencies they have that are using View.propTypes.style. You can run this in your project directory:

grep -onr "View.propTypes.style" .

Options

• -o Only outputs the matching text (for a clean output).
• -n Shows the line number the matching text is on.
• -r Recursively checks the directory and subdirectories.

Example Output

./node_modules/react-native-sortable-list/src/Row.js:12:View.propTypes.style
./node_modules/react-native-sortable-list/src/SortableList.js:19:View.propTypes.style
./node_modules/react-native-sortable-list/src/SortableList.js:20:View.propTypes.style
./node_modules/react-native-swiper/src/index.js:103:View.propTypes.style

That will help you establish which dependencies you need to update in order to update to React Native 0.49+

[Melanie918]

I have found that situation react native 0.55.4.
So I have replaced View.propTypes.style with ViewPropTypes.style.

Then it works well in release mode.

[MishraUdit]

I have tried the above methods however none of them is solving my issue:

this is my index.js file:

import { View, Modal, Text, ScrollView, TouchableOpacity, Image } from 'react-native';
import PropTypes from 'prop-types';
import styles from './style';
import BaseComponent from './BaseComponent';

let componentIndex = 0;

const propTypes = {
  data: PropTypes.array,
  onChange: PropTypes.func,
  initValue: PropTypes.string,
  style: View.propTypes.style,
  selectStyle: View.propTypes.style,
  optionStyle: View.propTypes.style,
  optionTextStyle: Text.propTypes.style,
  sectionStyle: View.propTypes.style,
  sectionTextStyle: Text.propTypes.style,
  cancelStyle: View.propTypes.style,
  cancelTextStyle: Text.propTypes.style,
  overlayStyle: View.propTypes.style,
  cancelText: PropTypes.string,
};

const defaultProps = {
  data: [],
  onChange: () => {},
  initValue: 'Select me!',
  style: {},
  selectStyle: {},
  optionStyle: {},
  optionTextStyle: {},
  sectionStyle: {},
  sectionTextStyle: {},
  cancelStyle: {},
  cancelTextStyle: {},
  overlayStyle: {},
  cancelText: 'cancel',
};

export default class ModalPicker extends BaseComponent {
  constructor() {
    super();

    this._bind('onChange', 'open', 'close', 'renderChildren');

    this.state = {
      animationType: 'slide',
      modalVisible: false,
      transparent: false,
      selected: 'please select',
      data: [],
    };
  }

  componentDidMount() {
    this.setState({ selected: this.props.initValue });
    this.setState({ cancelText: this.props.cancelText });
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ data: nextProps.data });
  }

  onChange(item) {
    this.props.onChange(item);
    this.setState({ selected: item.label });
    this.close();
  }

  close() {
    this.setState({
      modalVisible: false,
    });
  }

  open() {
    this.setState({
      modalVisible: true,
    });
  }

  renderSection(section) {
    return (
      <View key={section.key} style={[styles.sectionStyle, this.props.sectionStyle]}>
        <Text style={[styles.sectionTextStyle, this.props.sectionTextStyle]}>{section.label}</Text>
      </View>
    );
  }

  renderOption(option) {
    return (
      <TouchableOpacity key={option.key} onPress={() => this.onChange(option)}>
        <View
          style={[
            styles.optionStyle,
            this.props.optionStyle,
            {
              flex: 1,
              flexDirection: 'row',
              justifyContent: 'space-between',
              alignItems: 'center',
            },
          ]}
        >
          <View style={{ flex: 0.15 }}>
            <Image source={option.image} resizeMode="stretch" style={{ width: 30, height: 16 }} />
          </View>
          <View style={{ flex: 0.7, alignItems: 'center' }}>
            <Text
              style={[
                styles.optionTextStyle,
                this.props.optionTextStyle,
                { color: '#434343', fontSize: 14 },
              ]}
            >
              {option.label}
            </Text>
          </View>
          <View style={{ flex: 0.15, alignItems: 'flex-end' }}>
            <Text
              style={[
                styles.optionTextStyle,
                this.props.optionTextStyle,
                { color: 'grey', fontSize: 12 },
              ]}
            >
              {option.dialCode}
            </Text>
          </View>
        </View>
      </TouchableOpacity>
    );
  }

  renderOptionList() {
    const options = this.state.data.map((item) => {
      if (item.section) {
        return this.renderSection(item);
      }

      return this.renderOption(item);
    });

    return (
      <View
        style={[styles.overlayStyle, this.props.overlayStyle]}
        key={`modalPicker${componentIndex++}`}
      >
        <View style={styles.optionContainer}>
          <ScrollView keyboardShouldPersistTaps="always">
            <View style={{ paddingHorizontal: 10 }}>{options}</View>
          </ScrollView>
        </View>
        <View style={styles.cancelContainer}>
          <TouchableOpacity onPress={this.close}>
            <View style={[styles.cancelStyle, this.props.cancelStyle]}>
              <Text style={[styles.cancelTextStyle, this.props.cancelTextStyle]}>
                {this.props.cancelText}
              </Text>
            </View>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

  renderChildren() {
    if (this.props.children) {
      return this.props.children;
    }
  }

  render() {
    const dp = (
      <Modal
        transparent
        ref={(ref) => { this.modal = ref; }}
        visible={this.state.modalVisible}
        onRequestClose={this.close}
        animationType={this.state.animationType}
      >
        {this.renderOptionList()}
      </Modal>
    );

    return (
      <View style={this.props.style}>
        {dp}

        <TouchableOpacity onPress={this.open}>{this.renderChildren()}</TouchableOpacity>
      </View>
    );
  }
}

ModalPicker.propTypes = propTypes;
ModalPicker.defaultProps = defaultProps;

[ankita1427]

I am having the same issue when i replace View.propTypes.style with ViewPropTypes.style it worked fine but when i again compile my app by command "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res" it again start giving the same error

[ankita1427]

plz help asap i am working on window with ver-0.55.4

[vvkaghera]

@ide @carsonwah @sytolk @joshuapinter In my app there is no View.propTypes.style but coming the same error. for more details please check my question from this link Thanks.