@nebula-rn/components

import { Camera } from '@nebula-rn/components';

import { useState } from 'react';
import { Alert, View } from 'react-native';
import { Camera } from '@nebula-rn/components';

export default function ScanCodeDemo() {
  const [mode, setMode] = useState<'normal' | 'scanCode'>('scanCode');

  return (
    <View style={{ height: 240, borderRadius: 12, overflow: 'hidden' }}>
      <Camera
        mode={mode}
        devicePosition="back"
        flash="auto"
        onScanCode={event => {
          Alert.alert('Scan Result', event.result);
          setMode('normal');
        }}
        onError={error => {
          Alert.alert('Camera Error', error.message);
        }}
      />
    </View>
  );
}

import { Map } from '@nebula-rn/components';

import { Map } from '@nebula-rn/components';

const markers = [
  {
    id: 1,
    latitude: 31.2304,
    longitude: 121.4737,
    title: 'Shanghai Office',
    iconPath: 'https://example.com/marker.png',
    callout: {
      content: 'Click for details',
      display: 'BYCLICK',
      bgColor: '#ffffff',
      padding: 8,
    },
  },
];

export default function OfficeMap() {
  return (
    <Map
      latitude={31.2304}
      longitude={121.4737}
      scale={14}
      markers={markers}
      showCompass
      enableZoom
      enableScroll
      style={{ height: 280, borderRadius: 12 }}
    />
  );
}

import { Progress } from '@nebula-rn/components';

import { View } from 'react-native';
import { Progress } from '@nebula-rn/components';

export default function UploadProgress() {
  return (
    <View style={{ gap: 12 }}>
      <Progress percent={32} showInfo />
      <Progress
        percent={76}
        active
        activeMode="forwards"
        strokeWidth={8}
        borderRadius={999}
        activeColor="#2563eb"
        backgroundColor="#dbeafe"
      />
    </View>
  );
}

import { RichText } from '@nebula-rn/components';

import { RichText } from '@nebula-rn/components';

const article = `
  <h1 style="font-size: 20px; color: #0f172a;">Welcome to Nebula</h1>
  <p style="color: #475569; line-height: 1.7;">
    RichText is suitable for rendering operational articles, activity rules, service agreements, and other HTML content.
  </p>
  <ul>
    <li>Supports basic tags</li>
    <li>Supports inline styles</li>
    <li>Automatically adjusts height</li>
  </ul>
`;

export default function RichArticle() {
  return <RichText html={article} style={{ backgroundColor: '#fff' }} />;
}

import { Slider } from '@nebula-rn/components';

import { useState } from 'react';
import { Text, View } from 'react-native';
import { Slider } from '@nebula-rn/components';

export default function VolumeSlider() {
  const [value, setValue] = useState(40);

  return (
    <View style={{ gap: 8 }}>
      <Text>Volume: {value}</Text>
      <Slider
        min={0}
        max={100}
        step={5}
        value={value}
        showValue
        activeColor="#2563eb"
        onChanging={event => setValue(event.value)}
        onChange={event => setValue(event.value)}
      />
    </View>
  );
}

import { Swiper } from '@nebula-rn/components';

import { Image, View } from 'react-native';
import { Swiper } from '@nebula-rn/components';

const banners = [
  'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=1200',
  'https://images.unsplash.com/photo-1493246507139-91e8fad9978e?w=1200',
  'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=1200',
];

export default function BannerSwiper() {
  return (
    <View style={{ height: 180, borderRadius: 12, overflow: 'hidden' }}>
      <Swiper autoplay circular indicatorDots interval={3000}>
        {banners.map(uri => (
          <Image
            key={uri}
            source={{ uri }}
            style={{ width: '100%', height: '100%' }}
            resizeMode="cover"
          />
        ))}
      </Swiper>
    </View>
  );
}

<Swiper autoplay circular indicatorDots>
  <Swiper.Item>
    <Image source={img1} />
  </Swiper.Item>
  <Swiper.Item>
    <Image source={img2} />
  </Swiper.Item>
</Swiper>

import { Video } from '@nebula-rn/components';

import { Video } from '@nebula-rn/components';

export default function CourseVideo() {
  return (
    <Video
      src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
      poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
      controls
      objectFit="cover"
      style={{ height: 220, borderRadius: 12, backgroundColor: '#000' }}
      onError={event => {
        console.error('video error', event.errMsg);
      }}
    />
  );
}

import { WebView } from '@nebula-rn/components';

import { Alert } from 'react-native';
import { WebView } from '@nebula-rn/components';

const html = `
  <html>
    <body style="font-family: -apple-system; padding: 24px;">
      <h2>Local HTML Content</h2>
      <button onclick="window.ReactNativeWebView.postMessage('clicked')">
        Send message to miniapp
      </button>
    </body>
  </html>
`;

export default function EmbeddedPage() {
  return (
    <WebView
      html={html}
      style={{ height: 320, borderRadius: 12, overflow: 'hidden' }}
      onMessage={event => {
        Alert.alert('Message received', event.nativeEvent.data);
      }}
    />
  );
}

import { View, Text, ScrollView, Image, Button } from 'react-native';

import { Button, Image, ScrollView, Text, View } from 'react-native';

export default function BasicLayout() {
  return (
    <ScrollView contentContainerStyle={{ padding: 16, gap: 12 }}>
      <Image
        source={{
          uri: 'https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=1200',
        }}
        style={{ width: '100%', height: 180, borderRadius: 12 }}
      />
      <View style={{ gap: 6 }}>
        <Text style={{ fontSize: 20, fontWeight: '700' }}>
          Component Library Home
        </Text>
        <Text style={{ color: '#475569' }}>
          React Native basic components are still the core for building page
          layouts.
        </Text>
      </View>
      <Button title="Get Started" onPress={() => {}} />
    </ScrollView>
  );
}