├── .gitignore ├── .watchmanconfig ├── App.js ├── README.md ├── app.json ├── assets ├── icon.png ├── relogio.png └── splash.png ├── babel.config.js ├── package-lock.json └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/**/* 2 | .expo/* 3 | npm-debug.* 4 | *.jks 5 | *.p12 6 | *.key 7 | *.mobileprovision 8 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { StyleSheet, Text, View, Image, TouchableOpacity } from "react-native"; 3 | 4 | export default class App extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | this.state = {n:0, botao:'VAI'}; 8 | this.timer = null; 9 | 10 | this.vai = this.vai.bind(this); 11 | this.limpar = this.limpar.bind(this); 12 | } 13 | 14 | vai() { 15 | let s = this.state; 16 | 17 | if(this.timer != null) { 18 | // PARAR O TIMER 19 | clearInterval(this.timer); 20 | this.timer = null; 21 | s.botao = "VAI"; 22 | } else { 23 | // COMEÇAR O TIMER 24 | this.timer = setInterval(()=>{ 25 | let s = this.state; 26 | s.n += 0.1; 27 | this.setState(s); 28 | }, 100); 29 | 30 | s.botao = "PARAR"; 31 | } 32 | 33 | this.setState(s); 34 | } 35 | 36 | limpar() { 37 | if(this.timer != null) { 38 | // PARAR O TIMER 39 | clearInterval(this.timer); 40 | this.timer = null; 41 | } 42 | 43 | let s = this.state; 44 | s.n = 0; 45 | s.botao = "VAI"; 46 | this.setState(s); 47 | } 48 | render() { 49 | return ( 50 | 51 | 52 | {this.state.n.toFixed(1)} 53 | 54 | 55 | {this.state.botao} 56 | 57 | 58 | LIMPAR 59 | 60 | 61 | 62 | ); 63 | } 64 | } 65 | 66 | const styles = StyleSheet.create({ 67 | container: { 68 | flex: 1, 69 | backgroundColor: "#2c1f30", 70 | alignItems: "center", 71 | justifyContent: "center" 72 | }, 73 | timer: { 74 | color: "#BAA07A", 75 | fontSize: 80, 76 | fontWeight: "bold", 77 | backgroundColor: "transparent", 78 | marginTop: -150 79 | }, 80 | botaoArea: { 81 | flexDirection: "row", 82 | height: 40, 83 | marginTop: 80 84 | }, 85 | botao: { 86 | flex: 1, 87 | justifyContent: "center", 88 | alignItems: "center", 89 | backgroundColor: "#886532", 90 | height: 40, 91 | borderRadius: 5, 92 | margin: 10 93 | }, 94 | botaoText: { 95 | fontSize: 17, 96 | fontWeight: "bold", 97 | color: "#FFF" 98 | } 99 | }); 100 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # SimpleReactTimerExample 2 | Executar npm start para executar Expo 3 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "Cronometro", 4 | "slug": "cronometro", 5 | "privacy": "public", 6 | "sdkVersion": "32.0.0", 7 | "platforms": [ 8 | "ios", 9 | "android" 10 | ], 11 | "version": "1.0.0", 12 | "orientation": "portrait", 13 | "icon": "./assets/icon.png", 14 | "splash": { 15 | "image": "./assets/splash.png", 16 | "resizeMode": "contain", 17 | "backgroundColor": "#ffffff" 18 | }, 19 | "updates": { 20 | "fallbackToCacheTimeout": 0 21 | }, 22 | "assetBundlePatterns": [ 23 | "**/*" 24 | ], 25 | "ios": { 26 | "supportsTablet": true 27 | } 28 | } 29 | } -------------------------------------------------------------------------------- /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/toshiossada/SimpleReactTimerExample/b0a2f32f692ffd8c847d7111dce8ce0227de0c75/assets/icon.png -------------------------------------------------------------------------------- /assets/relogio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/toshiossada/SimpleReactTimerExample/b0a2f32f692ffd8c847d7111dce8ce0227de0c75/assets/relogio.png -------------------------------------------------------------------------------- /assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/toshiossada/SimpleReactTimerExample/b0a2f32f692ffd8c847d7111dce8ce0227de0c75/assets/splash.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "scripts": { 4 | "start": "expo start", 5 | "android": "expo start --android", 6 | "ios": "expo start --ios", 7 | "eject": "expo eject" 8 | }, 9 | "dependencies": { 10 | "expo": "^32.0.0", 11 | "react": "16.5.0", 12 | "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz" 13 | }, 14 | "devDependencies": { 15 | "babel-preset-expo": "^5.0.0" 16 | }, 17 | "private": true 18 | } 19 | --------------------------------------------------------------------------------