├── App.js
├── Gemfile
├── app.json
├── babel.config.js
├── index.js
├── metro.config.js
├── package-lock.json
├── package.json
├── src
    └── crono.png
└── tsconfig.json


/App.js:
--------------------------------------------------------------------------------
  1 | import React, { useState } from "react";
  2 | import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
  3 | 
  4 | let timer = null
  5 | let ss = 0;
  6 | let mm = 0;
  7 | let hh = 0;
  8 | 
  9 | export default function App(){
 10 | 
 11 |     const[numero, setNumero] = useState('00:00:00');
 12 |     const[botao, setBotao]=useState('COMEÇAR')
 13 |     const[ultimo, setUltimo]=useState(null)
 14 | 
 15 |     function começar(){
 16 |       if(timer !== null){
 17 |         clearInterval(timer);
 18 |         timer = null;
 19 |         setBotao('COMEÇAR');
 20 |       }else{
 21 |         timer = setInterval(() =>{
 22 |           ss++;
 23 |           if(ss==60){
 24 |             ss = 0;
 25 |             mm++
 26 |           }
 27 |           if(mm ==60){
 28 |             mm=0;
 29 |             hh++;
 30 |           }
 31 | 
 32 |           let format =
 33 |           (hh < 10 ? '0' + hh : hh) + ':'
 34 |           + (mm < 10? '0'+ mm : mm) + ':'
 35 |           + (ss < 10? '0'+ ss : ss)
 36 | 
 37 |           setNumero(format);
 38 | 
 39 |         },1000)
 40 | 
 41 |         setBotao('PARAR')
 42 |       }
 43 | 
 44 | 
 45 |     }
 46 | 
 47 |     function limpar(){
 48 |       if(timer !== null){
 49 |         clearInterval(timer);
 50 |         timer = null;
 51 |       }
 52 | 
 53 |       setUltimo(numero)
 54 |       setNumero('00:00:00')
 55 |       ss = 0;
 56 |       mm = 0;
 57 |       hh = 0;
 58 |       setBotao('COMEÇAR')
 59 | 
 60 | 
 61 |     }
 62 | 
 63 |   return (
 64 |     <View style={styles.container}>
 65 | 
 66 |       <Image
 67 |       source={require('./src/crono.png')}
 68 |       />
 69 | 
 70 |       <Text style={styles.timer}>
 71 |         {numero}
 72 |       </Text>
 73 | 
 74 |       <View style={styles.btnArea}>
 75 |         <TouchableOpacity style={styles.btn} onPress={começar}>
 76 |           <Text style={styles.btnTexto}>{botao}</Text>
 77 |         </TouchableOpacity>
 78 | 
 79 |         <TouchableOpacity style={styles.btn} onPress={limpar}>
 80 |           <Text style={styles.btnTexto}>RESETAR</Text>
 81 |         </TouchableOpacity>
 82 |       </View>
 83 |       
 84 |       <View style={styles.areaUltima}>
 85 |         <Text style={styles.textoCorrida}>
 86 |           {ultimo ? 'Último tempo: ' + ultimo : ''}
 87 |         </Text>
 88 |       </View>
 89 | 
 90 |     </View>
 91 |   );
 92 | }
 93 | 
 94 | const styles = StyleSheet.create({
 95 | 
 96 |   container:{
 97 |     flex:1,
 98 |     alignItems: 'center',
 99 |     justifyContent: 'center',
100 |     backgroundColor: '#00aeef99'
101 |   },
102 |   timer:{
103 |     marginTop: -160,
104 |     fontSize:45,
105 |     fontWeight:'bold',
106 |     color:'#FFF',
107 |     textShadowColor: '#FFFFFF90',
108 |     textShadowRadius: 10,
109 |     shadowOffset:{
110 |       width:0,
111 |       height:2},
112 |     shadowOpacity:0.2,
113 |     elevation:10
114 |   },
115 |   btnArea:{
116 |     flexDirection: 'row',
117 |     marginTop: 130,
118 |     height:40
119 |   },
120 |   btn:{
121 |     flex:1,
122 |     justifyContent: 'center',
123 |     alignItems: 'center',
124 |     backgroundColor: '#FFF',
125 |     height:40,
126 |     margin:17,
127 |     borderRadius:9,
128 |     shadowColor:'#FFFFFF',
129 |     shadowRadius:10,
130 |     shadowOffset:{
131 |       width:0,
132 |       height:0},
133 |     shadowOpacity:1,
134 |     elevation:20
135 |   },
136 |   btnTexto:{
137 |     fontSize: 20,
138 |     fontWeight:'bold',
139 |     color:'#00aeef',
140 |     textShadowColor: '#00aeef40',
141 |     textShadowRadius: 10,
142 |     shadowOffset:{
143 |       width:0,
144 |       height:2},
145 |     shadowOpacity:0.2,
146 |     elevation:10
147 | 
148 |   },
149 |   areaUltima:{
150 |     marginTop:40,
151 |   },
152 |   textoCorrida:{
153 |     fontSize:25,
154 |     color: '#FFF',
155 |     fontStyle: 'italic',
156 |     textShadowColor: '#FFFFFF60',
157 |     textShadowRadius: 10,
158 |     shadowOffset:{
159 |       width:0,
160 |       height:2},
161 |     shadowOpacity:0.2,
162 |     elevation:10
163 |   }
164 | 
165 | 
166 | 
167 | 
168 | })


--------------------------------------------------------------------------------
/Gemfile:
--------------------------------------------------------------------------------
1 | source 'https://rubygems.org'
2 | 
3 | # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
4 | ruby '>= 2.6.10'
5 | 
6 | gem 'cocoapods', '>= 1.11.3'
7 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Cronometro",
3 |   "displayName": "Cronometro"
4 | }


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ['module:metro-react-native-babel-preset'],
3 | };
4 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @format
 3 |  */
 4 | 
 5 | import {AppRegistry} from 'react-native';
 6 | import App from './App';
 7 | import {name as appName} from './app.json';
 8 | 
 9 | AppRegistry.registerComponent(appName, () => App);
10 | 


--------------------------------------------------------------------------------
/metro.config.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Metro configuration for React Native
 3 |  * https://github.com/facebook/react-native
 4 |  *
 5 |  * @format
 6 |  */
 7 | 
 8 | module.exports = {
 9 |   transformer: {
10 |     getTransformOptions: async () => ({
11 |       transform: {
12 |         experimentalImportSupport: false,
13 |         inlineRequires: true,
14 |       },
15 |     }),
16 |   },
17 | };
18 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Cronometro",
 3 |   "version": "0.0.1",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "android": "react-native run-android",
 7 |     "ios": "react-native run-ios",
 8 |     "lint": "eslint .",
 9 |     "start": "react-native start",
10 |     "test": "jest"
11 |   },
12 |   "dependencies": {
13 |     "react": "18.2.0",
14 |     "react-native": "0.71.6"
15 |   },
16 |   "devDependencies": {
17 |     "@babel/core": "^7.20.0",
18 |     "@babel/preset-env": "^7.20.0",
19 |     "@babel/runtime": "^7.20.0",
20 |     "@react-native-community/eslint-config": "^3.2.0",
21 |     "@tsconfig/react-native": "^2.0.2",
22 |     "@types/jest": "^29.2.1",
23 |     "@types/react": "^18.0.24",
24 |     "@types/react-test-renderer": "^18.0.0",
25 |     "babel-jest": "^29.2.1",
26 |     "eslint": "^8.19.0",
27 |     "jest": "^29.2.1",
28 |     "metro-react-native-babel-preset": "0.73.9",
29 |     "prettier": "^2.4.1",
30 |     "react-test-renderer": "18.2.0",
31 |     "typescript": "4.8.4"
32 |   },
33 |   "jest": {
34 |     "preset": "react-native"
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/src/crono.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/snkfranco/Timer/0e1702fb434d6f4f9b056997dd07732a29344c8f/src/crono.png


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "@tsconfig/react-native/tsconfig.json"
3 | }
4 | 


--------------------------------------------------------------------------------