Preparation: Develop apps in the browser

Getting started with Expo Snack

A simple component

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.box} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    backgroundColor: 'red',
    width: 150,
    height: 150
  }
});

<View style={styles.container}>
  <View style={styles.box} />
</View>

Styling in React Native

container: {
  flex: 1,
  alignItems: 'center',
  justifyContent: 'center',
},

Show three squares and a button

import React, { Component } from 'react';
import { Button, View, StyleSheet } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.box} />
        <View style={styles.box} />
        <View style={styles.box} />
        <Button title="Neues Spiel" onPress={() => alert('Klick!')} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-around',
    paddingTop: 30
  },
  box: {
    backgroundColor: 'red',
    width: 150,
    height: 150
  }
});

onPress={() => alert('Klick!')}

Integrate touchable components

import React, { Component } from 'react';
import { Button, TouchableOpacity, View, StyleSheet } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity>
          <View style={[styles.box, { backgroundColor: 'blue' }]} />
        </TouchableOpacity>
        <TouchableOpacity>
          <View style={[styles.box, { backgroundColor: 'red' }]} />
        </TouchableOpacity>
        <TouchableOpacity>
          <View style={[styles.box, { backgroundColor: 'green' }]} />
        </TouchableOpacity>
        <Button title="Neues Spiel" onPress={() => alert('Klick!')} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-around',
    paddingTop: 30,
  },
  box: {
    width: 150,
    height: 150,
  },
});

<TouchableOpacity>
  <View style={[styles.box, { backgroundColor: 'blue' }]} />
</TouchableOpacity>

Simple variant of the game with state (state)

1. No game is active (the app was previously launched or just ended a game).
2. A game is active (the bottom button has been tapped) and a list of colors has been set.
3. The user taps the wrong square in the order to be reproduced, ending the game.
4. The user taps on the correct square in the order. The current number of sequences is cached for the next tap of a square.

1. game – game is active (true) or not (false),
2. colorList – a list (array) of colors that the user must select in exactly that order, eg. B. [‘blue’, ‘red’, ‘green’] and
3. pressed – a number from 0 to colorList.length – 1, which represents the last tapped square.

export default class App extends Component {
  state = { game: false, colorList: [], pressed: 0 };
  // der Rest bleibt unverändert…

<Button title="Neues Spiel" onPress={() => this._newGame()} />

_newGame() {
  if (this.state.game) return;
  const theColors = ['blue', 'red', 'green'];
  this.setState({ game: true, colorList: theColors, pressed: 0 });
}

_checkColor(color) {
  const { game, pressed, colorList } = this.state;
  if (!game) return;
  if (colorList[pressed]!== color) {
    alert('Leider hast du verloren!');
    this.setState({ game: false });
  } else if (pressed === colorList.length - 1) {
    alert('Super, du hast gewonnen!');
    this.setState({ game: false });
  } else {
    this.setState({ pressed: pressed + 1 });
  }
}

1. The wrong square was tapped – this leads to a corresponding hint and to the end of the game.
2. The correct square was tapped and this is the last of the order – a fitting indication appears that the user has won and the game ends.
3. The correct square was tapped and the current counter is increased by 1 (in this case a game is active and we have not yet reached the end of the order).

render() {
  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={() => this._checkColor('blue')}>
        <View style={[style
s.box, { backgroundColor: 'blue' }]} />
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this._checkColor('red')}>
        <View style={[styles.box, { backgroundColor: 'red' }]} />
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this._checkColor('green')}>
        <View style={[styles.box, { backgroundColor: 'green' }]} />
      </TouchableOpacity>
      <Button title="Neues Spiel" onPress={() => this._newGame()} />
    </View>
  );
}

import React, { Component } from 'react';
import { Button, TouchableOpacity, View, StyleSheet } from 'react-native';

export default class App extends Component {
  state = { game: false, colorList: [], pressed: 0 };

  _newGame() {
    if (this.state.game) return;
    const theColors = ['blue', 'red', 'green'];
    this.setState({ game: true, colorList: theColors, pressed: 0 });
  }

  _checkColor(color) {
    const { game, pressed, colorList } = this.state;
    if (!game) return;
    if (colorList[pressed]!== color) {
      alert('Leider hast du verloren!');
      this.setState({ game: false });
    } else if (pressed === colorList.length - 1) {
      alert('Super, du hast gewonnen!');
      this.setState({ game: false });
    } else {
      this.setState({ pressed: pressed + 1 });
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={() => this._checkColor('blue')}>
          <View style={[styles.box, { backgroundColor: 'blue' }]} />
        </TouchableOpacity>
        <TouchableOpacity onPress={() => this._checkColor('red')}>
          <View style={[styles.box, { backgroundColor: 'red' }]} />
        </TouchableOpacity>
        <TouchableOpacity onPress={() => this._checkColor('green')}>
          <View style={[styles.box, { backgroundColor: 'green' }]} />
        </TouchableOpacity>
        <Button title="Neues Spiel" onPress={() => this._newGame()} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-around',
    paddingTop: 30,
  },
  box: {
    width: 150,
    height: 150,
  },
});

Create random colors

_newGame() {
  if (this.state.game) return;
  const theColors = ['blue', 'red', 'green'];
  const colorList = Array.from(
    { length: 5 },
    () => theColors[Math.floor(Math.random() * theColors.length)]
  );
  console.log(colorList);
  this.setState({ game: true, colorList: colorList, pressed: 0 });
}

Show the color order with animations

import React, { Component } from 'react';
import {
  Animated,
  Button,
  TouchableOpacity,
  View,
  StyleSheet
} from 'react-native';

export default class App extends Component {
  state = {
    game: false,
    colorList: [],
    pressed: 0,
    blue: new Animated.Value(1),
    red: new Animated.Value(1),
    green: new Animated.Value(1)
  };

  // der Rest bleibt unverändert

render() {
  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={() => this._checkColor('blue')}>
        <Animated.View
          style={[
            styles.box,
            { backgroundColor: 'blue', opacity: this.state.blue }
          ]}
        />
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this._checkColor('red')}>
        <Animated.View
          style={[
            styles.box,
            { backgroundColor: 'red', opacity: this.state.red }
          ]}
        />
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this._checkColor('green')}>
        <Animated.View
          style={[
            styles.box,
            { backgroundColor: 'green', opacity: this.state.green }
          ]}
        />
      </TouchableOpacity>
      <Button title="Neues Spiel" onPress={() => this._newGame()} />
    </View>
  );
}

_newGame() {
  if (this.state.game) return;
  const theColors = ['blue', 'red', 'green'];
  const colorList = Array.from(
    { length: 5 },
    () => theColors[Math.floor(Math.random() * theColors.length)]
  );
  this.setState({ game: true, colorList: colorList, pressed: 0 });
  let animations = [];
  colorList.forEach(color => {
    animations.push(
      Animated.timing(this.state[color], {
        toValue: 0,
        duration: 500
      })
    );
    animations.push(
      Animated.timing(this.state[color], {
        toValue: 1,
        duration: 500
      })
    );
  });
  Animated.sequence(animations).start();
}

import React, { Component } from 'react';
import {
  Animated,
  Button,
  TouchableOpacity,
  View,
  StyleSheet
} from 'react-native';

export default class App extends Component {
  state = {
    game: false,
    colorList: [],
    pressed: 0,
    blue: new Animated.Value(1),
    red: new Animated.Value(1),
    green: new Animated.Value(1)
  };

  _checkColor(color) {
    const { game, pressed, colorList } = this.state;
    if (!game) return;
    if (colorList[pressed]!== color) {
      alert('Leider hast du verloren!');
      this.setState({ game: false });
    } else if (pressed === colorList.length - 1) {
      alert('Super, du hast gewonnen!');
      this.setState({ game: false });
    } else {
      this.setState({ pressed: pressed + 1 });
    }
  }

  _newGame() {
    if (this.state.game) return;
    const theColors = ['blue', 'red', 'green'];
    const colorList = Array.from(
      { length: 5 },
      () => theColors[Math.floor(Math.random() * theColors.length)]
    );
    this.setState({ game: true, colorList: colorList, pressed: 0 });
    let animations = [];
    colorList.forEach(color => {
      animations.push(
        Animated.timing(this.state[color], {
          toValue: 0,
          duration: 500
        })
      );
      animations.push(
        Animated.timing(this.state[color], {
          toValue: 1,
          duration: 500
        })
      );
    });
    Animated.sequence(animations).start();
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={() => this._checkColor('blue')}>
          <Animated.View
            style={[
              styles.box,
              { backgroundColor: 'blue', opacity: this.state.blue }
            ]}
          />
        </TouchableOpacity>
        <TouchableOpacity onPress={() => this._checkColor('red')}>
          <Animated.View
            style={[
              styles.box,
              { backgroundColor: 'red', opacity: this.state.red }
            ]}
          />
        </TouchableOpacity>
        <TouchableOpacity onPress={() => this._checkColor('green')}>
          <Animated.View
            style={[
              styles.box,
              { backgroundColor: 'green', opacity: this.state.green }
            ]}
          />
        </TouchableOpacity>
        <Button title="Neues Spiel" onPress={() => this._newGame()} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-around',
    paddingTop: 30
  },
  box: {
    width: 150,
    height: 150
  }
});

1. Prof. Dr. Erik Behrends: 8 Gründe, warum Sie Ihre Apps mit React Native entwickeln sollten
2. React Native
3. Who’s using React Native?
4. Simple Senso Game
5. Expo development tools
6. App bei GooglePlay
   App auf iTunes
7. Ausgangspunkt für das online-Tutorial auf www.informatik-aktuell.de
8. React Native – Build your first app in the next 5 minutes
9. React Native – Getting Started