Experimentation React Native

index.ios.js

/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';

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

var COLOR_ON = '#4CD964';
var COLOR_OFF = '#C7C7CC';

class Experiment extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      switchValue: false,
      backgroundColor: COLOR_OFF
    };
    console.log("constructor");
  }

  _switchStateChanged(value: Bool) {
    this.setState({
      switchValue: value,
      backgroundColor: (value) ? COLOR_ON : COLOR_OFF
    });
  }

  render() {
    console.log("render");
    return (
      <View style={styles.container}
        backgroundColor={this.state.backgroundColor}>
        <Text style={styles.description}>
          {"My first React Native Application 📱😮👍 !!"}
        </Text>
        <SwitchIOS
         style={styles.switch}
         onValueChange={(value) => {this._switchStateChanged(value)}}
         value={this.state.switchValue}/>
         <Text style={styles.help}>
           {"Switch for change the background color !!"}
         </Text>
      </View>
    );
  }
};

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  description: {
    color: 'white',
    fontSize:32,
    bottom: 20,
    textAlign: 'center'
  },
  switch: {
    justifyContent: 'center',
    alignSelf: 'center'
  },
  help: {
    color: 'white',
    fontSize:12,
    top: 20
  }
});

AppRegistry.registerComponent('Experiment', () => Experiment);