App crash in release mode when using 'View.propTypes.style'

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:)

using 'View.propTypes.style'
app crash in release mode
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-

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

@ide

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

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

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

Removing View.propTypes.style works!

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

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

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.

@ghoshabhi

@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"
},

@arunjkumarp

@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.

@ghoshabhi

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

Remove style: ViewPropTypes.style

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

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

@carsonwah

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

@DanDatefit

@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:

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

DO NOT directly modify node_modules.

@carsonwah

@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..?

fix(carousel): Animated.View.propTypes will cause crash in release mode

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+

Replace `View.propTypes.style` with `ViewPropTypes.style`.

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.

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;

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

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

@ide

@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.

Navigation Menu

Repository navigation

App crash in release mode when using 'View.propTypes.style' #16542

Is this a bug report?

Have you read the Contributing Guidelines?

Environment

Steps to Reproduce

Expected Behavior

Actual Behavior

Reproducible Demo

Seven Sins

Options

Example Output

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

App crash in release mode when using 'View.propTypes.style' #16542

Description

Is this a bug report?

Have you read the Contributing Guidelines?

Environment

Steps to Reproduce

Expected Behavior

Actual Behavior

Reproducible Demo

Activity

ide commented on Oct 26, 2017

sytolk commented on Nov 23, 2017

jorgedominguezdev commented on Nov 30, 2017

travis-little commented on Dec 13, 2017

ghoshabhi commented on Jan 22, 2018

Noirdata commented on Jan 26, 2018

bamne123 commented on Feb 3, 2018

arunjkumarp commented on Feb 22, 2018

ghoshabhi commented on Feb 23, 2018

bamne123 commented on Feb 23, 2018

carsonwah commented on May 2, 2018

Seven Sins

DanDatefit commented on May 24, 2018

carsonwah commented on May 25, 2018

DanDatefit commented on May 25, 2018

joshuapinter commented on Jun 18, 2018

Options

Example Output

Melanie918 commented on Aug 9, 2018

MishraUdit commented on Aug 24, 2018

ankita1427 commented on Aug 31, 2018

ankita1427 commented on Aug 31, 2018

vvkaghera commented on Sep 17, 2018

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions