Step Counter - Nativebase Typing CST Test

Step Counter — Nativebase Code

Counter app with customizable step increment using NativeBase.

import React, { useState } from 'react';
import { NativeBaseProvider, Box, Input, Button, VStack, Text } from 'native-base';

export default function App() {
	const [count, setCount] = useState(0);
	const [step, setStep] = useState('1');

	const increment = () => setCount(count + parseInt(step || '1'));
	const decrement = () => setCount(count - parseInt(step || '1'));
	const reset = () => setCount(0);

	return (
		<NativeBaseProvider>
		<Box safeArea p={4}>
		<VStack space={4} alignItems="center">
		<Text fontSize="2xl">Counter: {count}</Text>
		<Input placeholder="Step" value={step} onChangeText={setStep} />
		<Button onPress={increment}>+</Button>
		<Button onPress={decrement}>-</Button>
		<Button onPress={reset}>Reset</Button>
		</VStack>
		</Box>
		</NativeBaseProvider>
	);
}

Nativebase Language Guide

NativeBase is an open-source UI component library for React Native, providing a set of cross-platform, customizable components that accelerate mobile app development with consistent design.

More Nativebase Typing Exercises

Practice Other Languages