hybrid

import React from 'react';
import {
  NavigationParams,
  NavigationScreenProp,
  NavigationState,
} from 'react-navigation';
import {
  View,
  TouchableOpacity,
  Text,
  StyleSheet,
  Dimensions,
  RCTNativeAppEventEmitter,
  Button,
} from 'react-native';
import Orientation from 'react-native-orientation';

export interface Props {
  navigation: NavigationScreenProp<NavigationState, NavigationParams>;
  orientation: string;
  count: number;
  boardSizeNumber: number;
}

interface NavigationParams {
  boardSize: string;
}

const numbers = [
  {index: 0, value: '1'},
  {index: 1, value: '2'},
  {index: 2, value: '3'},
  {index: 3, value: '4'},
  {index: 4, value: '5'},
  {index: 5, value: '6'},
  {index: 6, value: '7'},
  {index: 7, value: '8'},
  {index: 8, value: '9'},
  {index: 9, value: '10'},
  {index: 10, value: '11'},
  {index: 11, value: '12'},
  {index: 12, value: '13'},
  {index: 13, value: '14'},
  {index: 14, value: '15'},
  {index: 15, value: ' '},
];

export class GameScreen extends React.Component<Props> {
  static navigationOptions = {title: 'Game Screen'};

  constructor(props: Props) {
    super(props);

    this.state = {
      count: 0,
      screenOrientationIsPortrait: Boolean,
      boardSizeNumber: parseInt(this.props.navigation.state.params!.boardSize),
    };
  }

  componentWillMount() {
    // The getOrientation method is async. It happens sometimes that
    // you need the orientation at the moment the JS runtime starts running on device.
    // `getInitialOrientation` returns directly because its a constant set at the
    // beginning of the JS runtime.

    const initial = Orientation.getInitialOrientation();
    if (initial === 'PORTRAIT') {
      // do something
      this.setState({
        screenOrientationIsPortrait: true,
      });
    } else {
      // do something else
      this.setState({
        screenOrientationIsPortrait: false,
      });
    }
  }

  componentDidMount() {
    // this locks the view to Portrait Mode
    //Orientation.lockToPortrait();

    // this locks the view to Landscape Mode
    // Orientation.lockToLandscape();

    // this unlocks any previous locks to all Orientations
    // Orientation.unlockAllOrientations();

    Orientation.addOrientationListener(this._orientationDidChange);
  }

  _orientationDidChange = orientation => {
    if (orientation === 'LANDSCAPE') {
      // do something with landscape layout
      this.setState({
        screenOrientationIsPortrait: false,
      });
    } else {
      // do something with portrait layout
      this.setState({
        screenOrientationIsPortrait: true,
      });
    }
  };

  componentWillUnmount() {
    Orientation.getOrientation((err, orientation) => {
      console.log(`Current Device Orientation: ${orientation}`);
    });

    // Remember to remove listener
    Orientation.removeOrientationListener(this._orientationDidChange);
  }

  onPress = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };

  render() {
    const {navigate} = this.props.navigation;

    return (
      <View
        style={
          this.state.screenOrientationIsPortrait === true
            ? this.styles.masterContainer
            : this.styles.masterContainerLandscape
        }>
        <View style={{flexGrow: 1, flex: 1}}>
          <Text
            style={{
              textAlign: 'center',
              textAlignVertical: 'center',
              height: '100%',
              fontSize: 30,
            }}>
            {}
            Moves: {this.state.count}
          </Text>
        </View>

        <View style={{flexGrow: 1, flex: 1}}>
          <Text
            style={{
              textAlign: 'center',
              textAlignVertical: 'center',
              height: '100%',
              fontSize: 30,
            }}>
            Time: 1:30
            {this.state.screenOrientationIsPortrait === true
              ? 'Portrait'
              : 'Landscape'}
          </Text>
        </View>

        <View style={this.styles.gameContainer}>
          <View style={{flexDirection: 'row', flex: 1}}>
            <View style={this.styles.gameButtonView}>
              <TouchableOpacity
                onPress={this.onPress}
                style={this.styles.gameButtonTouchableOpacity}>
                <Text style={this.styles.gameButtonText}>
                  {numbers.find(v => v.index === 0).value}
                </Text>
              </TouchableOpacity>
            </View>
            <View style={this.styles.gameButtonView}>
              <TouchableOpacity
                onPress={this.onPress}
                style={this.styles.gameButtonTouchableOpacity}>
                <Text style={this.styles.gameButtonText}>
                  {numbers.find(v => v.index === 1).value}
                </Text>
              </TouchableOpacity>
            </View>
            <View style={this.styles.gameButtonView}>
              <TouchableOpacity
                onPress={this.onPress}
                style={this.styles.gameButtonTouchableOpacity}>
                <Text style={this.styles.gameButtonText}>
                  {numbers.find(v => v.index === 2).value}
                </Text>
              </TouchableOpacity>
            </View>
            <View style={this.styles.gameButtonView}>
              <TouchableOpacity
                onPress={this.onPress}
                style={this.styles.gameButtonTouchableOpacity}>
                <Text style={this.styles.gameButtonText}>
                  {numbers.find(v => v.index === 3).value}
                </Text>
              </TouchableOpacity>
            </View>
          </View>

          <View style={{flexDirection: 'row', flex: 1}}>
            <View style={this.styles.gameButtonView}>
              <TouchableOpacity
                onPress={this.onPress}
                style={this.styles.gameButtonTouchableOpacity}>
                <Text style={this.styles.gameButtonText}>
                  {numbers.find(v => v.index === 4).value}
                </Text>
              </TouchableOpacity>
            </View>
            <View style={this.styles.gameButtonView}>
              <TouchableOpacity
                onPress={this.onPress}
                style={this.styles.gameButtonTouchableOpacity}>
                <Text style={this.styles.gameButtonText}>
                  {numbers.find(v => v.index === 5).value}
                </Text>
              </TouchableOpacity>
            </View>
            <View style={this.styles.gameButtonView}>
              <TouchableOpacity
                onPress={this.onPress}
                style={this.styles.gameButtonTouchableOpacity}>
                <Text style={this.styles.gameButtonText}>
                  {numbers.find(v => v.index === 6).value}
                </Text>
              </TouchableOpacity>
            </View>
            <View style={this.styles.gameButtonView}>
              <TouchableOpacity
                onPress={this.onPress}
                style={this.styles.gameButtonTouchableOpacity}>
                <Text style={this.styles.gameButtonText}>
                  {numbers.find(v => v.index === 7).value}
                </Text>
              </TouchableOpacity>
            </View>
          </View>

          <View style={{flexDirection: 'row', flex: 1}}>
            <View style={this.styles.gameButtonView}>
              <TouchableOpacity
                onPress={this.onPress}
                style={this.styles.gameButtonTouchableOpacity}>
                <Text style={this.styles.gameButtonText}>
                  {numbers.find(v => v.index === 8).value}
                </Text>
              </TouchableOpacity>
            </View>
            <View style={this.styles.gameButtonView}>
              <TouchableOpacity
                onPress={this.onPress}
                style={this.styles.gameButtonTouchableOpacity}>
                <Text style={this.styles.gameButtonText}>
                  {numbers.find(v => v.index === 9).value}
                </Text>
              </TouchableOpacity>
            </View>
            <View style={this.styles.gameButtonView}>
              <TouchableOpacity
                onPress={this.onPress}
                style={this.styles.gameButtonTouchableOpacity}>
                <Text style={this.styles.gameButtonText}>
                  {numbers.find(v => v.index === 10).value}
                </Text>
              </TouchableOpacity>
            </View>
            <View style={this.styles.gameButtonView}>
              <TouchableOpacity
                onPress={this.onPress}
                style={this.styles.gameButtonTouchableOpacity}>
                <Text style={this.styles.gameButtonText}>
                  {numbers.find(v => v.index === 11).value}
                </Text>
              </TouchableOpacity>
            </View>
          </View>

          <View style={{flexDirection: 'row', flex: 1}}>
            <View style={this.styles.gameButtonView}>
              <TouchableOpacity
                onPress={this.onPress}
                style={this.styles.gameButtonTouchableOpacity}>
                <Text style={this.styles.gameButtonText}>
                  {numbers.find(v => v.index === 12).value}
                </Text>
              </TouchableOpacity>
            </View>
            <View style={this.styles.gameButtonView}>
              <TouchableOpacity
                onPress={this.onPress}
                style={this.styles.gameButtonTouchableOpacity}>
                <Text style={this.styles.gameButtonText}>
                  {numbers.find(v => v.index === 13).value}
                </Text>
              </TouchableOpacity>
            </View>
            <View style={this.styles.gameButtonView}>
              <TouchableOpacity
                onPress={this.onPress}
                style={this.styles.gameButtonTouchableOpacity}>
                <Text style={this.styles.gameButtonText}>
                  {numbers.find(v => v.index === 14).value}
                </Text>
              </TouchableOpacity>
            </View>
            <View style={this.styles.gameButtonView}>
              <TouchableOpacity
                onPress={this.onPress}
                style={this.styles.gameButtonTouchableOpacityEmpty}>
                <Text>{numbers.find(v => v.index === 15).value}</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </View>
    );
  }

  styles = StyleSheet.create({
    masterContainer: {
      flexDirection: 'column',
      width: '100%',
      height: '100%',
    },
    masterContainerLandscape: {
      flexDirection: 'row',
      width: '100%',
      height: '100%',
    },
    gameContainer: {
      flexGrow: 2,
      flex: 1,
      flexDirection: 'column',
      padding: 5,
    },
    gameContainerLandscape: {
      flexGrow: 3,
      flex: 1,
      flexDirection: 'column',
      padding: 5,
    },
    gameButtonView: {
      backgroundColor: '#1a1a1a',
      borderColor: '#000',
      borderWidth: 2,
      flex: 1,
      flexGrow: 1,
    },

    gameButtonTouchableOpacity: {
      height: '100%',
      alignItems: 'center',
      backgroundColor: '#262626',
    },

    gameButtonTouchableOpacityEmpty: {
      height: '100%',
      alignItems: 'center',
      backgroundColor: '#fff',
    },

    gameButtonText: {
      height: '100%',
      color: '#fff',
      textAlign: 'center',
      textAlignVertical: 'center',
      fontSize: 30,
    },
  });
}