A counter with a label and a button, the first thing most tutorials build:
SwiftUIimport SwiftUI
struct WaterView: View {
@State private var glasses = 0
var body: some View {
VStack(spacing: 12) {
Text("Glasses today: \(glasses)")
Button("Add a glass") { glasses += 1 }
}
}
}
React Nativeimport { useState } from "react";
import { Button, Text, View } from "react-native";
export default function Water() {
const [glasses, setGlasses] = useState(0);
return (
<View style={{ gap: 12 }}>
<Text>Glasses today: {glasses}</Text>
<Button title="Add a glass" onPress={() => setGlasses(glasses + 1)} />
</View>
);
}
Both describe what the screen shows and let the framework redraw it when the number changes. SwiftUI calls that a declarative syntax; in React Native, React components stand for the platform’s native views.