Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
yiky84119 opened this issue Oct 26, 2017 · 20 comments
Closed

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

yiky84119 opened this issue Oct 26, 2017 · 20 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@yiky84119
Copy link

yiky84119 commented Oct 26, 2017

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
Copy link
Contributor

ide commented Oct 26, 2017

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

@sytolk
Copy link

sytolk commented Nov 23, 2017

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

@jorgedc93
Copy link

jorgedc93 commented Nov 30, 2017

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
Copy link

travis-little commented Dec 13, 2017

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
Copy link

Removing View.propTypes.style works!

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

@AlbertIntelligence
Copy link

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

@bamne123
Copy link

bamne123 commented Feb 3, 2018

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
Copy link

@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
Copy link

ghoshabhi commented Feb 23, 2018

@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
Copy link

ajaxmac added a commit to ajaxmac/react-native-keyboard-spacer that referenced this issue Feb 27, 2018
On React Native 0.53.3 my app runs in DEV mode, but when archived and deployed to a device crashes with: `underfined is not an object(evaluating '_reactNative.View.propType.style'`. See facebook/react-native#16542.

Removing this prop solves this crash.
@carsonwah
Copy link

carsonwah commented May 2, 2018

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
Copy link

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

@carsonwah
Copy link

@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
Copy link

@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
Copy link
Contributor

joshuapinter commented Jun 18, 2018

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+

joshuapinter added a commit to joshuapinter/react-native-sortable-list that referenced this issue Jun 22, 2018
@Melanie918
Copy link

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
Copy link

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

screenshot_20180824-181903

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
Copy link

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
Copy link

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

@vvkaghera
Copy link

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

@facebook facebook locked as resolved and limited conversation to collaborators Oct 26, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Oct 26, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests