Learn Nativebase - 9 Code Examples & CST Typing Practice Test

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.

View all 9 Nativebase code examples →

NativeBase Simple Todo App NativeBase Counter App NativeBase Dark Mode Counter NativeBase Step Counter NativeBase Multi Counter NativeBase Auto Increment Counter NativeBase Todo With Priority NativeBase Countdown Timer NativeBase Counter With Alert

Learn NATIVEBASE with Real Code Examples

Updated Nov 23, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

NativeBase Simple Todo App

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

export default function App() {
    const [todos, setTodos] = useState([]);
    const [newTodo, setNewTodo] = useState('');

    const addTodo = () => {
        if (newTodo.trim()) {
        setTodos([...todos, newTodo]);
        setNewTodo('');
        }
    };

    return (
        <NativeBaseProvider>
        <Box safeArea p={4}>
        <VStack space={4}>
        <Input placeholder="New Todo" value={newTodo} onChangeText={setNewTodo} />
        <Button onPress={addTodo}>Add</Button>
        {todos.map((todo, index) => (
        <Text key={index}>{todo}</Text>
        ))}
        </VStack>
        </Box>
        </NativeBaseProvider>
    );
}

Demonstrates a simple React Native app using NativeBase components with a Todo list, adding tasks, and displaying them with consistent UI.

Let’s Try →

NativeBase Counter App

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

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

    return (
        <NativeBaseProvider>
        <Box safeArea p={4}>
        <VStack space={4} alignItems="center">
        <Text fontSize="2xl">Counter: {count}</Text>
        <Button onPress={() => setCount(count + 1)}>+</Button>
        <Button onPress={() => setCount(count - 1)}>-</Button>
        <Button onPress={() => setCount(0)}>Reset</Button>
        </VStack>
        </Box>
        </NativeBaseProvider>
    );
}

Simple counter with increment, decrement, and reset buttons using NativeBase components.

Let’s Try →

NativeBase Dark Mode Counter

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

export default function App() {
    const [count, setCount] = useState(0);
    const [isDark, setIsDark] = useState(false);
    const theme = extendTheme({ config: { initialColorMode: isDark ? 'dark' : 'light' } });

    return (
        <NativeBaseProvider theme={theme}>
        <Box safeArea p={4} flex={1} alignItems="center" justifyContent="center">
        <VStack space={4} alignItems="center">
        <Text fontSize="2xl">Counter: {count}</Text>
        <Button onPress={() => setCount(count + 1)}>+</Button>
        <Button onPress={() => setCount(count - 1)}>-</Button>
        <Button onPress={() => setCount(0)}>Reset</Button>
        <Button onPress={() => setIsDark(!isDark)}>Toggle Theme</Button>
        </VStack>
        </Box>
        </NativeBaseProvider>
    );
}

Counter app with light/dark theme toggle using NativeBase components.

Let’s Try →

NativeBase Step Counter

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>
    );
}

Counter app with customizable step increment using NativeBase.

Let’s Try →

NativeBase Multi Counter

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

export default function App() {
    const [counters, setCounters] = useState([0,0,0]);

    const increment = i => setCounters(counters.map((c,index) => index===i ? c+1 : c));
    const decrement = i => setCounters(counters.map((c,index) => index===i ? c-1 : c));

    return (
        <NativeBaseProvider>
        <Box safeArea p={4}>
        <VStack space={4} alignItems="center">
        {counters.map((c,i) => (
        <Box key={i} alignItems="center">
        <Text fontSize="xl">Counter {i+1}: {c}</Text>
        <Button onPress={() => increment(i)} style={{ marginRight:5 }}>+</Button>
        <Button onPress={() => decrement(i)}>-</Button>
        </Box>
        ))}
        </VStack>
        </Box>
        </NativeBaseProvider>
    );
}

Multiple independent counters in a single view using NativeBase.

Let’s Try →

NativeBase Auto Increment Counter

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

export default function App() {
    const [count, setCount] = useState(0);
    const [isRunning, setIsRunning] = useState(true);

    useEffect(() => {
        const timer = setInterval(() => { if(isRunning) setCount(c => c + 1); }, 1000);
        return () => clearInterval(timer);
    }, [isRunning]);

    return (
        <NativeBaseProvider>
        <Box safeArea p={4}>
        <VStack space={4} alignItems="center">
        <Text fontSize="2xl">Counter: {count}</Text>
        <Button onPress={() => setIsRunning(!isRunning)}>{isRunning ? 'Pause' : 'Resume'}</Button>
        <Button onPress={() => setCount(0)}>Reset</Button>
        </VStack>
        </Box>
        </NativeBaseProvider>
    );
}

Counter that automatically increments every second.

Let’s Try →

NativeBase Todo With Priority

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

export default function App() {
    const [todos, setTodos] = useState([]);
    const [task, setTask] = useState('');
    const [priority, setPriority] = useState('');

    const addTodo = () => {
        if(task.trim()) {
        setTodos([...todos, {task, priority}]);
        setTask(''); setPriority('');
        }
    };

    return (
        <NativeBaseProvider>
        <Box safeArea p={4}>
        <VStack space={4} alignItems="center">
        <Input placeholder="Task" value={task} onChangeText={setTask} />
        <Input placeholder="Priority" value={priority} onChangeText={setPriority} />
        <Button onPress={addTodo}>Add</Button>
        {todos.map((todo,i) => <Text key={i}>{todo.task} (Priority: {todo.priority})</Text>)}
        </VStack>
        </Box>
        </NativeBaseProvider>
    );
}

Todo app where each task has a priority and displays it using NativeBase.

Let’s Try →

NativeBase Countdown Timer

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

export default function App() {
    const [count, setCount] = useState(10);

    useEffect(() => {
        const timer = setInterval(() => { if(count > 0) setCount(c => c-1); }, 1000);
        return () => clearInterval(timer);
    }, [count]);

    return (
        <NativeBaseProvider>
        <Box safeArea p={4}>
        <VStack space={4} alignItems="center">
        <Text fontSize="2xl">Time: {count}</Text>
        <Button onPress={() => setCount(10)}>Reset</Button>
        </VStack>
        </Box>
        </NativeBaseProvider>
    );
}

Countdown timer starting from 10 seconds.

Let’s Try →

NativeBase Counter With Alert

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

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

    const increment = () => {
        const newCount = count + 1;
        if(newCount === 10) Toast.show({ description: 'Count reached 10!' });
        setCount(newCount);
    };
    const reset = () => setCount(0);

    return (
        <NativeBaseProvider>
        <Box safeArea p={4}>
        <VStack space={4} alignItems="center">
        <Text fontSize="2xl">Counter: {count}</Text>
        <Button onPress={increment}>+</Button>
        <Button onPress={reset}>Reset</Button>
        </VStack>
        </Box>
        </NativeBaseProvider>
    );
}

Counter shows an alert when it reaches 10.

Let’s Try →

Frequently Asked Questions about Nativebase

What is Nativebase?

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.

What are the primary use cases for Nativebase?

Cross-platform mobile app development. Rapid UI prototyping. Enterprise React Native apps. Apps requiring consistent theming across devices. Integration with Expo and React Native ecosystem

What are the strengths of Nativebase?

Speeds up UI development with ready-made components. Cross-platform consistency. Highly customizable and themeable. Works seamlessly with React Native and Expo. Active community and maintained library

What are the limitations of Nativebase?

Limited to React Native (no pure web support). Heavy reliance on third-party libraries for advanced UI. Performance depends on React Native optimizations. Some components may need custom styling for complex designs. Occasional breaking changes during major version upgrades

How can I practice Nativebase typing speed?

CodeSpeedTest offers 9+ real Nativebase code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Code Sample Descriptions

NativeBase Simple Todo App

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

export default function App() {
    const [todos, setTodos] = useState([]);
    const [newTodo, setNewTodo] = useState('');

    const addTodo = () => {
        if (newTodo.trim()) {
        setTodos([...todos, newTodo]);
        setNewTodo('');
        }
    };

    return (
        <NativeBaseProvider>
        <Box safeArea p={4}>
        <VStack space={4}>
        <Input placeholder="New Todo" value={newTodo} onChangeText={setNewTodo} />
        <Button onPress={addTodo}>Add</Button>
        {todos.map((todo, index) => (
        <Text key={index}>{todo}</Text>
        ))}
        </VStack>
        </Box>
        </NativeBaseProvider>
    );
}

Demonstrates a simple React Native app using NativeBase components with a Todo list, adding tasks, and displaying them with consistent UI.

Let’s Try →

NativeBase Counter App

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

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

    return (
        <NativeBaseProvider>
        <Box safeArea p={4}>
        <VStack space={4} alignItems="center">
        <Text fontSize="2xl">Counter: {count}</Text>
        <Button onPress={() => setCount(count + 1)}>+</Button>
        <Button onPress={() => setCount(count - 1)}>-</Button>
        <Button onPress={() => setCount(0)}>Reset</Button>
        </VStack>
        </Box>
        </NativeBaseProvider>
    );
}

Simple counter with increment, decrement, and reset buttons using NativeBase components.

Let’s Try →

NativeBase Dark Mode Counter

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

export default function App() {
    const [count, setCount] = useState(0);
    const [isDark, setIsDark] = useState(false);
    const theme = extendTheme({ config: { initialColorMode: isDark ? 'dark' : 'light' } });

    return (
        <NativeBaseProvider theme={theme}>
        <Box safeArea p={4} flex={1} alignItems="center" justifyContent="center">
        <VStack space={4} alignItems="center">
        <Text fontSize="2xl">Counter: {count}</Text>
        <Button onPress={() => setCount(count + 1)}>+</Button>
        <Button onPress={() => setCount(count - 1)}>-</Button>
        <Button onPress={() => setCount(0)}>Reset</Button>
        <Button onPress={() => setIsDark(!isDark)}>Toggle Theme</Button>
        </VStack>
        </Box>
        </NativeBaseProvider>
    );
}

Counter app with light/dark theme toggle using NativeBase components.

Let’s Try →

NativeBase Step Counter

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>
    );
}

Counter app with customizable step increment using NativeBase.

Let’s Try →

NativeBase Multi Counter

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

export default function App() {
    const [counters, setCounters] = useState([0,0,0]);

    const increment = i => setCounters(counters.map((c,index) => index===i ? c+1 : c));
    const decrement = i => setCounters(counters.map((c,index) => index===i ? c-1 : c));

    return (
        <NativeBaseProvider>
        <Box safeArea p={4}>
        <VStack space={4} alignItems="center">
        {counters.map((c,i) => (
        <Box key={i} alignItems="center">
        <Text fontSize="xl">Counter {i+1}: {c}</Text>
        <Button onPress={() => increment(i)} style={{ marginRight:5 }}>+</Button>
        <Button onPress={() => decrement(i)}>-</Button>
        </Box>
        ))}
        </VStack>
        </Box>
        </NativeBaseProvider>
    );
}

Multiple independent counters in a single view using NativeBase.

Let’s Try →

NativeBase Auto Increment Counter

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

export default function App() {
    const [count, setCount] = useState(0);
    const [isRunning, setIsRunning] = useState(true);

    useEffect(() => {
        const timer = setInterval(() => { if(isRunning) setCount(c => c + 1); }, 1000);
        return () => clearInterval(timer);
    }, [isRunning]);

    return (
        <NativeBaseProvider>
        <Box safeArea p={4}>
        <VStack space={4} alignItems="center">
        <Text fontSize="2xl">Counter: {count}</Text>
        <Button onPress={() => setIsRunning(!isRunning)}>{isRunning ? 'Pause' : 'Resume'}</Button>
        <Button onPress={() => setCount(0)}>Reset</Button>
        </VStack>
        </Box>
        </NativeBaseProvider>
    );
}

Counter that automatically increments every second.

Let’s Try →

NativeBase Todo With Priority

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

export default function App() {
    const [todos, setTodos] = useState([]);
    const [task, setTask] = useState('');
    const [priority, setPriority] = useState('');

    const addTodo = () => {
        if(task.trim()) {
        setTodos([...todos, {task, priority}]);
        setTask(''); setPriority('');
        }
    };

    return (
        <NativeBaseProvider>
        <Box safeArea p={4}>
        <VStack space={4} alignItems="center">
        <Input placeholder="Task" value={task} onChangeText={setTask} />
        <Input placeholder="Priority" value={priority} onChangeText={setPriority} />
        <Button onPress={addTodo}>Add</Button>
        {todos.map((todo,i) => <Text key={i}>{todo.task} (Priority: {todo.priority})</Text>)}
        </VStack>
        </Box>
        </NativeBaseProvider>
    );
}

Todo app where each task has a priority and displays it using NativeBase.

Let’s Try →

NativeBase Countdown Timer

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

export default function App() {
    const [count, setCount] = useState(10);

    useEffect(() => {
        const timer = setInterval(() => { if(count > 0) setCount(c => c-1); }, 1000);
        return () => clearInterval(timer);
    }, [count]);

    return (
        <NativeBaseProvider>
        <Box safeArea p={4}>
        <VStack space={4} alignItems="center">
        <Text fontSize="2xl">Time: {count}</Text>
        <Button onPress={() => setCount(10)}>Reset</Button>
        </VStack>
        </Box>
        </NativeBaseProvider>
    );
}

Countdown timer starting from 10 seconds.

Let’s Try →

NativeBase Counter With Alert

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

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

    const increment = () => {
        const newCount = count + 1;
        if(newCount === 10) Toast.show({ description: 'Count reached 10!' });
        setCount(newCount);
    };
    const reset = () => setCount(0);

    return (
        <NativeBaseProvider>
        <Box safeArea p={4}>
        <VStack space={4} alignItems="center">
        <Text fontSize="2xl">Counter: {count}</Text>
        <Button onPress={increment}>+</Button>
        <Button onPress={reset}>Reset</Button>
        </VStack>
        </Box>
        </NativeBaseProvider>
    );
}

Counter shows an alert when it reaches 10.

Let’s Try →

Frequently Asked Questions about Nativebase

What is Nativebase?

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.

What are the primary use cases for Nativebase?

Cross-platform mobile app development. Rapid UI prototyping. Enterprise React Native apps. Apps requiring consistent theming across devices. Integration with Expo and React Native ecosystem

What are the strengths of Nativebase?

What are the limitations of Nativebase?

How can I practice Nativebase typing speed?

CodeSpeedTest offers 9+ real Nativebase code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.