React-Native example problem

[ivanbabanov]

I'm trying to make some simple example for react native.

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableWithoutFeedback,
} = React;

var tweenState = require('react-tween-state');

var NewAnim = React.createClass({
  //mixins: [tweenState.Mixin],

  getInitialState() {
    return { opacity: 1 }
  },

  _animateOpacity() {
    // this.tweenState('opacity', {
    //   easing: tweenState.easingTypes.easeOutQuint,
    //   duration: 1000,
    //   endValue: this.state.opacity === 0.2 ? 1 : 0.2,
    // });
  },

  render() {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <TouchableWithoutFeedback onPress={this._animateOpacity}>
          <View ref={component => this._box = component}
                style={{width: 200, height: 200, backgroundColor: 'red',
                        }} />
        </TouchableWithoutFeedback>
      </View>
    )
  },
});

AppRegistry.registerComponent('NewAnim', () => NewAnim)

module.exports = NewAnim;

I've tried to comment out all functionality and determine place where error appears. Now I see that it appears when line with

var tweenState = require('react-tween-state');

becomes uncommented

[ivanbabanov]

looks like the last ";" in index.js causes a problem

[idmontie]

I had to delete the sourcemap line in index.js to get my react native example to work.

Might be related to: https://github.com/facebook/react-native/issues/393 ? I'm not exactly sure. Maybe I'm on an old version of React Native?

Whatever the case, it appears to be a problem with React native and not with React Tween State.

[sghiassy]

The problem is because the last line of the index.js file ends in a comment. Which causes a problem with the way Packager concats files (https://github.com/facebook/react-native/issues/1005).

Simply add a carriage-return at the end of the file react-tween-state/lib/index.js and you should be fine.

[idmontie]

@sghiassy :+1: Thanks for making the problem clear! I guess this can be closed now. Although, shouldn't all JS files end in a new line?

[chenglou]

Humm lib/index.js is webpack's output, I don't manually touch it. I see that the issue's been solved. Closing then =)

[sghiassy]

I created PR https://github.com/chenglou/react-tween-state/pull/41 for a permament fix to the issue.