Skip to content

Instantly share code, notes, and snippets.

@profh
Created September 1, 2025 21:46
Show Gist options
  • Select an option

  • Save profh/6f34b96efed695ce61630047ffac0926 to your computer and use it in GitHub Desktop.

Select an option

Save profh/6f34b96efed695ce61630047ffac0926 to your computer and use it in GitHub Desktop.
Stub for the React Native stopwatch app
import React, { useState, useRef } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
export default function App() {
// Set up useState and useRef here...
// Constants for formatting time here...
// Function for startStopTimer
// Function for resetTimer
return (
<View style={styles.container}>
<View style={styles.timeContainer}>
<Text style={styles.timeDisplay}>{ "00:00:00" }</Text>
</View>
<View style={styles.buttonContainer}>
<TouchableOpacity
// style changes depending on state...
style={[styles.button, { backgroundColor: '#44ff44' }]}
onPress={
// need a function here; empty function for now...
() => {}
}
>
<Text style={styles.buttonText}>{'Start'}</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.button, { backgroundColor: '#4444ff' }]}
onPress={
// need a function here; empty function for now...
() => {}
}
>
<Text style={styles.buttonText}>Reset</Text>
</TouchableOpacity>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f0f0f0',
justifyContent: 'center',
alignItems: 'center',
padding: 20,
},
timeContainer: {
marginBottom: 60,
},
timeDisplay: {
fontSize: 48,
fontWeight: 'bold',
color: '#333',
fontFamily: 'monospace', // Ensures consistent character width
},
buttonContainer: {
flexDirection: 'row',
justifyContent: 'space-around',
width: '100%',
maxWidth: 300,
},
button: {
paddingVertical: 15,
paddingHorizontal: 30,
borderRadius: 8,
marginHorizontal: 10,
minWidth: 100,
alignItems: 'center',
justifyContent: 'center',
},
buttonText: {
color: 'white',
fontSize: 18,
fontWeight: 'bold',
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment