Apps single screen simples feitos com react-native

App.js

/*
**  Simples calculadora de imc feita com react-native
*/
import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  TextInput,
  Text,
  TouchableOpacity,
  View
} from "react-native";
import { bold } from "ansi-colors";

type Props = {};
export default class App extends Component<Props> {
  constructor(Props) {
    super(Props);
    this.state = { altura: 0, massa: 0, resultado: 0, resultadoText: "" };
    this.calcular = this.calcular.bind(this);
  }
  calcular() {
    let imc = this.state.massa / (this.state.altura * this.state.altura);

    let s = this.state;
    s.resultado = imc;

    if (s.resultado < 16) {
      s.resultadoText = "Magreza grave";
    } else if (s.resultado < 17) {
      s.resultadoText = "Magreza moderada";
    } else if (s.resultado < 18.5) {
      s.resultadoText = "Magreza leve";
    } else if (s.resultado < 25) {
      s.resultadoText = "Saudavel";
    } else if (s.resultado < 30) {
      s.resultadoText = "Sobrepeso";
    } else if (s.resultado < 35) {
      s.resultadoText = "Obesidade Grau I";
    } else if (s.resultado < 40) {
      s.resultadoText = "Obesidade Grau II";
    } else {
      s.resultadoText = "Obesidade Grau III morbida";
    }

    this.setState(s);
  }


  render() {
    return (
      <View style={styles.container}>
        <View style={styles.entradas}>
          <TextInput
            placeholder="Massa"
            keyboardType="numeric"
            style={styles.input}
            onChangeText={massa => {
              this.setState({ massa });
            }}
          />
          <TextInput
            placeholder="Altura"
            keyboardType="numeric"
            style={styles.input}
            onChangeText={altura => {
              this.setState({ altura });
            }}
          />
        </View>
        <TouchableOpacity onPress={this.calcular} style={styles.button}>
          <Text style={styles.buttonText}>CALCULAR</Text>
        </TouchableOpacity>
        <Text style={styles.result}>{this.state.resultado.toFixed(2)}</Text>
        <Text style={[styles.result, { fontSize: 35 }]}>
          {this.state.resultadoText}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#F5FCFF"
  },
  entradas: {
    flexDirection: "row"
  },
  input: {
    height: 80,
    width: "50%",
    textAlign: "center",
    fontSize: 50,
    marginTop: 24,
    color: "gray"
  },
  button: {
    backgroundColor: "#89ffa5"
  },
  buttonText: {
    alignSelf: "center",
    padding: 30,
    fontSize: 25,
    fontWeight: "bold",
    color: "#6dc4a4"
  },
  result: {
    alignSelf: "center",
    color: "lightgray",
    padding: 15,
    fontSize: 65
  }
});

App1.js

/*
**  Tela simples que exibe um card e um alert baseado no OS que está rodando o app
**  Feito para o workshop de introdução ao react-native ministrado por mim
*/
import React from 'react';
import {
  View, Text, StyleSheet, TouchableOpacity, Alert, Platform
} from 'react-native';
export default class Hello extends React.Component {
  clickMe() {
    Alert.alert(Platform.select({
      ios: 'Welcome to iOS!',
      android: 'Welcome to Android!'
    }));
  }
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this.clickMe.bind(this)}>
          <View style={styles.box}>
            <Text>
              Hello {this.props.platforms}. Please click me.
            </Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
  },
  box: {
    borderColor: 'red',
    backgroundColor: '#fff',
    borderWidth: 1,
    padding: 10,
    width: 100,
    height: 100,
  },
});