diff --git a/App.js b/App.js
index 4326264..155c553 100644
--- a/App.js
+++ b/App.js
@@ -1,5 +1,5 @@
import { useEffect, useState } from 'react';
-import { KeyboardAvoidingView, Platform, Pressable, StyleSheet, Switch, Text, TextInput, View } from 'react-native';
+import { Pressable, StyleSheet, Switch, Text, View } from 'react-native';
import {
accentColor,
@@ -16,10 +16,17 @@ import {
if (__DEV__) console.info('[stim:readiness] pending');
+const SIZES = [
+ { key: 'S', label: 'small', fontSize: 16, cardPadding: 12 },
+ { key: 'M', label: 'medium', fontSize: 28, cardPadding: 20 },
+ { key: 'L', label: 'large', fontSize: 44, cardPadding: 32 },
+];
+
export default function App() {
const [count, setCount] = useState(0);
const [dark, setDark] = useState(false);
- const [name, setName] = useState('');
+ const [size, setSize] = useState('M');
+ const { fontSize, cardPadding } = SIZES.find((s) => s.key === size);
useEffect(() => {
console.log(`[stim:tutorial] started title=${titleColor} background=${backgroundColor}`);
@@ -27,23 +34,17 @@ export default function App() {
}, []);
return (
-
+
Stim Tutorial
Edit theme.js and save.
-
+
Tapped {count} {count === 1 ? 'time' : 'times'}
-
- Hello, {name.trim() || 'world'}
-
-
-
+
+ {SIZES.map(({ key, label }) => {
+ const selected = size === key;
+ return (
+ setSize(key)}
+ style={[
+ styles.chip,
+ { borderColor: selected ? buttonColor : inputBorderColor, backgroundColor: selected ? buttonColor : backgroundColor },
+ ]}
+ >
+ {key}
+
+ );
+ })}
+
+
);
}
@@ -86,11 +101,13 @@ const styles = StyleSheet.create({
container: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 24 },
title: { fontSize: 44, fontWeight: '700', marginBottom: 8 },
subtitle: { fontSize: 16 },
- card: { alignSelf: 'stretch', borderRadius: 12, padding: 16, marginTop: 32, gap: 4 },
+ card: { alignSelf: 'stretch', borderRadius: 12, marginTop: 32 },
cardText: { fontSize: 18 },
button: { alignSelf: 'stretch', borderRadius: 12, paddingVertical: 14, marginTop: 16, alignItems: 'center' },
buttonText: { fontSize: 18, fontWeight: '600' },
row: { alignSelf: 'stretch', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginTop: 16 },
label: { fontSize: 18 },
- input: { alignSelf: 'stretch', borderWidth: 1, borderRadius: 12, padding: 12, fontSize: 18, marginTop: 16 },
+ sizeRow: { alignSelf: 'stretch', flexDirection: 'row', gap: 8, marginTop: 16 },
+ chip: { flex: 1, borderWidth: 1, borderRadius: 12, paddingVertical: 12, alignItems: 'center' },
+ chipText: { fontSize: 18, fontWeight: '600' },
});