How to use the react-native.createClass function in react-native

* onOvershoot
 *
 *
 *
 * Additional Scenarios:
 * =====================
 *
 * - snap back to a specific point after touch release
 * - snap to pages with some interval (or array of points?)
 * - support a "mode" for each direction of the following:
 *      - "scroll": scroll with momentum based decay
 *      - "spring": spring back to origin on release
 *      - "pan": stop moving on release
 *
 */
var PanController = React.createClass({

    propTypes: {
        lockDirection: PropTypes.bool,
        allowX: PropTypes.bool,
        allowY: PropTypes.bool,
        momentumX: PropTypes.bool,
        momentumY: PropTypes.bool,
        overshootX: PropTypes.oneOf("spring", "clamp"),
        overshootY: PropTypes.oneOf("spring", "clamp"),
        xBounds: PropTypes.arrayOf(PropTypes.number),
        yBounds: PropTypes.arrayOf(PropTypes.number),
        panX: PropTypes.any, // animated
        panY: PropTypes.any, // animated
        onOvershoot: PropTypes.func,
        onDirectionChange: PropTypes.func,

{timeOptions.map((value) => {
          idx++;
          return ;
        })}
      
    );
  },
});

const AddNewUser = React.createClass({
  propTypes: {
    addUser: React.PropTypes.func.isRequired,
    goBack: React.PropTypes.func.isRequired,
  },

  getInitialState: function() {
    return {
      newUserName: '',
    };
  },
  handleSubmitEditing: function() {
    this.props.addUser(this.state.newUserName);
    this.props.goBack();
  },
  render: function () {
    const {

var TextButton = React.createClass({
  render() {
    return (
      
        
      
    );
  }
});

var FlexChild = React.createClass({
  render() {
    return (
      
        
      
    );
  }
});

var ContainerConfigPanel = React.createClass({
  update(key, val) {
    this.props.onChange(Object.assign({}, this.props.data, { [key]: val }));
  },
  render() {

var React = require("react-native");
var {
  Image,
  PixelRatio,
  StyleSheet,
  Text,
  TouchableHighlight,
  View,
  Dimensions
} = React;

var getImage = require("./helpers/getImage"),
    screen = Dimensions.get('window');

var ShotCell = React.createClass({
  render: function() {
    return (

render() {
        return (
          
        )
      },
    });

    var MyPullingIndicator = React.createClass({
      render() {
        return (
          
        )
      },
    });

    var MyHoldingIndicator = React.createClass({
      render() {
        return (
          
        )
      },
    });


var listviewReactNative = React.createClass({
    getInitialState: function() {
        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        return {
            dataSource: ds.cloneWithRows([
                {"name" : "A","age":10},
                {"name" : "B","age":10},
                {"name" : "C","age":10},

TouchableOpacity,
  Image,
  Navigator,
} = React;

var UserActions = require('../Actions/UserActions');
var UserStore = require('../Stores/UserStore');
var Video = require('react-native-video');
var Modal = require('react-native-modal');
var LinearGradient = require('react-native-linear-gradient');
var UserActions = require('../Actions/UserActions');
var styles = require('./Styles');
var UserStoreSync = require('../Mixins/UserStoreSync');
var DeviceHeight = require('Dimensions').get('window').height;

var LoginScreen = React.createClass({
  mixins: [UserStoreSync, Modal.Mixin],

  login() {
    UserActions.newFacebookSession();
  },

  afterUpdateUserFromStore() {
    var user = UserStore.getState();

    if (user.get('email')) {
      this.props.navigator.replace({id: 'user-info'});
    }
  },

  showModalTransition(transition) {
    transition('opacity', {duration: 200, begin: 0, end: 1});

StatusBarIOS,
  TextInput
} = React;

var alignSelf = ['auto', 'flex-start', 'flex-end', 'center', 'stretch'];

var containerStyles = {
  flexDirection: ['column', 'row'],
  justifyContent: ['center', 'flex-start', 'flex-end',
                   'space-between', 'space-around'],
  alignItems: ['flex-start', 'flex-end', 'center', 'stretch'],
  flexWrap: ['nowrap', 'wrap'],
  alignSelf: alignSelf
};

var ReactNativeFlexboxPlayground = React.createClass({
  componentDidMount: function() {
    StatusBarIOS.setHidden(true);
  },
  getInitialState: function() {
    var containerStyle = {};
    Object.keys(containerStyles).forEach(
      (k) => containerStyle[k] = containerStyles[k][0]
    );
    return {
      selected: null,
      containerStyle: containerStyle,
      views: [
        {
          text: "Tap the title to edit the container",
          style: this.buildBoxStyle()
        },

'use strict';

var moment = require('moment');

var React = require('react-native');

var {
    Text,
    StyleSheet,
    View,
    WebView,
    } = React;

var ViewVideo = React.createClass({

    getInitialState: function() {
        return {
            status: 'No Page Loaded',
            backButtonEnabled: false,
            forwardButtonEnabled: false,
            loading: true,
        };
    },

    render: function() {
        var pubDate = moment(this.props.video.publishedAt).fromNow(false);

        return (

},
  spinner: {
    //width: 22,
    //height: 22,
  },
}));

const Indeterminate = mdl.Progress.indeterminateProgress()
  .withStyle(styles.progress)
  .build();

const SingleColorSpinner = mdl.Spinner.singleColorSpinner()
  .withStyle(styles.spinner)
  .build();

const Progress = React.createClass({
  componentDidMount: function () {
    setTimeout((() => {
      this.refs.progBarWithBuffer.buffer = 0.8;
    }), 1000);
    setTimeout((() => {
      this.refs.progBar.progress = 0.6;
      this.refs.progBarWithBuffer.progress = 0.6;
    }), 1600);
  },

  render: function() {
    return (

);
  }
}) 

global.sideMenu = 
      }
      />;

var AppSideMenu = React.createClass({
  render: function () {
    return (
      
    );
  }
})

var styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',