Learn NATIVEBASE with Real Code Examples

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.

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.

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.

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.

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.

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.

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.

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.

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.