React Native & Mobile Examples

import React, { useState } from 'react';
import { SafeAreaView, ScrollView, StyleSheet } from 'react-native';
import {
  BoodooProvider,
  Card,
  Button,
  Badge,
  Text,
  TextInput,
  useTheme,
} from 'boodoo/react-native';

function UserProfileScreen() {
  const [name, setName] = useState('Alex Morgan');
  const [loading, setLoading] = useState(false);
  const theme = useTheme();

  const handleSave = () => {
    setLoading(true);
    setTimeout(() => setLoading(false), 1200);
  };

  return (
    <SafeAreaView style={[styles.container, { backgroundColor: theme.colors.background }]}>
      <ScrollView contentContainerStyle={styles.content}>
        <Card variant="elevated">
          <Card.Title
            title="Account Settings"
            subtitle="Manage your profile & notifications"
          />
          <Card.Content>
            <Badge variant="primary" style={styles.badge}>iOS & Android</Badge>
            <TextInput
              label="Display Name"
              value={name}
              onChangeText={setName}
            />
          </Card.Content>
          <Card.Actions>
            <Button variant="ghost" size="sm" onPress={() => setName('')}>
              Reset
            </Button>
            <Button
              variant="primary"
              size="sm"
              loading={loading}
              onPress={handleSave}
            >
              Save Changes
            </Button>
          </Card.Actions>
        </Card>
      </ScrollView>
    </SafeAreaView>
  );
}

export default function App() {
  return (
    <BoodooProvider theme="light">
      <UserProfileScreen />
    </BoodooProvider>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  content: { padding: 16 },
  badge: { marginBottom: 12 },
});

import React from 'react';
import { Provider as PaperProvider } from 'react-native-paper';
import { boodooPaperLightTheme, boodooPaperDarkTheme } from 'boodoo/paper';
import { View, useColorScheme } from 'react-native';
import { Button, Card, Text } from 'react-native-paper';

export default function App() {
  const isDark = useColorScheme() === 'dark';
  const theme = isDark ? boodooPaperDarkTheme : boodooPaperLightTheme;

  return (
    <PaperProvider theme={theme}>
      <View style={{ flex: 1, padding: 20, justifyContent: 'center' }}>
        <Card mode="elevated">
          <Card.Title title="React Native Paper + Boodoo" subtitle="Material 3 Restyled" />
          <Card.Content>
            <Text variant="bodyMedium">
              Styled with Boodoo brand tokens, custom elevations, and curated radii.
            </Text>
          </Card.Content>
          <Card.Actions>
            <Button mode="contained" onPress={() => console.log('Pressed!')}>
              Primary Action
            </Button>
          </Card.Actions>
        </Card>
      </View>
    </PaperProvider>
  );
}

import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { colors, spacing, radii, typography, shadows } from 'boodoo/tokens';

export function CustomCard() {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>Custom Native Card</Text>
      <Text style={styles.body}>Built purely with boodoo/tokens.</Text>
      <TouchableOpacity style={styles.button} activeOpacity={0.8}>
        <Text style={styles.buttonText}>Explore Tokens</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: colors.white,
    padding: spacing[4],
    borderRadius: radii.lg,
    ...shadows.md,
  },
  title: {
    fontSize: typography.sizes.xl,
    fontWeight: typography.weights.bold,
    color: colors.dark,
    marginBottom: spacing[2],
  },
  body: {
    fontSize: typography.sizes.base,
    color: colors.gray600,
    marginBottom: spacing[4],
  },
  button: {
    backgroundColor: colors.primary,
    paddingVertical: spacing[2] + 4,
    paddingHorizontal: spacing[4],
    borderRadius: radii.full,
    alignItems: 'center',
  },
  buttonText: {
    color: colors.white,
    fontWeight: typography.weights.semibold,
    fontSize: typography.sizes.base,
  },
});

npx create-boodoo my-mobile-app

cd my-mobile-app
npm install
npx expo start