gistfile1.txt

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

import TicTacToe from './components/TicTacToe'

const App: () => React$Node = () => {
  return (
      <TicTacToe />
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
});

export default App;
import React from 'react';
import { View,
  Text,
} from 'react-native';

import TicTacToeView from './TicTacToeView';

// manage click/press
function handlePress(index) {
}

const PLAYER = {
  A: 'A',
  B: 'B',
};

export default class TicTacToe extends React.Component {
  state = {
    player: PLAYER.A,
    matrix: [
      [0, 0, 0],
      [0, 0, 0],
      [0, 0, 0],
    ],
  };

  handlePress = (i, j) => {
    let result = this.state.matrix;
    result[i][j] = this.state.player;

    this.setState({ matrix: result })
  };
  render() {
    return (
      <TicTacToeView matrix={this.state.matrix} handlePress={this.handlePress} />
    );
  }
}
import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
} from 'react-native';

// manage click/press
function handlePress(index) {
}

function Button(props) {
  const { onPress, value } = props;
  return (
    <View style={styles.btnContainer}>
     <TouchableOpacity
       style={styles.button}
       onPress={onPress}
     >
       <Text>{value}</Text>
     </TouchableOpacity>
    </View>
  );
}

export default class TicTacToe extends React.Component {
  render() {
    const { handlePress, matrix } = this.props;
    return (
      <View style={styles.container}>
        <View style={styles.row}>
          <Button value={matrix[0, 0]} onPress={() => handlePress(0, 0)} />
          <Button value={matrix[0, 1]} onPress={() => handlePress(0, 1)} />
          <Button value={matrix[0, 2]} onPress={() => handlePress(0, 2)} />
        </View>
        <View style={styles.row}>
          <Button value={matrix[1, 0]} onPress={() => handlePress(1, 0)} />
          <Button value={matrix[1, 1]} onPress={() => handlePress(1, 1)} />
          <Button value={matrix[1, 2]} onPress={() => handlePress(1, 2)} />
        </View>
        <View style={styles.row}>
          <Button value={matrix[2, 0]} onPress={() => handlePress(2, 0)} />
          <Button value={matrix[2, 1]} onPress={() => handlePress(2, 1)} />
          <Button value={matrix[2, 2]} onPress={() => handlePress(2, 2)} />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    backgroundColor: '#1652f0',
  },
  row: {
    flex: 1,
    flexDirection: 'row',
  },
  btnContainer: {
    flex: 1,
    justifyContent: 'center',
  },
  button: {
    height: 100,
    width: 100,
  },
});