### Infinite Menu Usage Example

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/docs/components/infinite-menu.mdx

Demonstrates how to use the Infinite Menu component with sample menu items. This example shows the basic setup for rendering the menu.

```tsx
import React from "react";
import { View, Text, StyleSheet } from "react-native";
import InfiniteMenu, { IMenuItem } from "./components/organisms/infinite-menu";

const App = () => {
  const menuItems: IMenuItem[] = [
    { id: "1", icon: "🍕", color: "#FFDDC1", onPress: () => console.log("Pizza") },
    { id: "2", icon: "🍔", color: "#C1FFD7", onPress: () => console.log("Burger") },
    { id: "3", icon: "🌮", color: "#D1C1FF", onPress: () => console.log("Taco") },
    { id: "4", icon: "🥗", color: "#FFC1D1", onPress: () => console.log("Salad") },
    { id: "5", icon: "🍦", color: "#FFFAC1", onPress: () => console.log("Ice Cream") },
  ];

  return (
    <View style={styles.container}>
      <InfiniteMenu items={menuItems} size={300} itemSize={60} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f0f0f0",
  },
});

export default App;

```

--------------------------------

### Example Usage of Dynamic Island

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/docs/components/dynamic-island.mdx

Demonstrates how to use the Dynamic Island component with various configurations. This example shows a basic setup.

```typescript
import React from "react";
import {
  View,
  Text,
  StyleSheet,
  SafeAreaView,
  TouchableOpacity,
} from "react-native";
import DynamicIsland from "./components/molecules/dynamic-island";

const App = () => {
  const [progress, setProgress] = React.useState(0);
  const [state, setState] = React.useState("idle");

  React.useEffect(() => {
    const interval = setInterval(() => {
      setProgress((prev) => {
        if (prev >= 1) {
          clearInterval(interval);
          setState("idle");
          return 0;
        }
        return prev + 0.1;
      });
    }, 500);
    return () => clearInterval(interval);
  }, []);

  const handlePress = () => {
    setState("expanded");
    setProgress(0);
  };

  const handleLongPress = () => {
    setState("expanding");
    setProgress(0.5);
  };

  const handleExpandedContentPress = () => {
    setState("collapsing");
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.content}>
        <DynamicIsland
          config={{
            icon: (
              <Text style={{ fontSize: 20 }}>🎵</Text>
            ), // Replace with your icon component
            title: "Music Playing",
            subtitle: "Artist Name - Song Title",
            progress: progress,
            state: state,
            backgroundColor: "#333",
            color: "#fff",
            expandedContent: (
              <View style={styles.expandedContent}>
                <Text style={styles.expandedContentText}>Now Playing</Text>
                <Text style={styles.expandedContentText}>Artist Name - Song Title</Text>
                <TouchableOpacity onPress={handleExpandedContentPress}>
                  <Text style={styles.closeButton}>Close</Text>
                </TouchableOpacity>
              </View>
            ),
            expandedContentHeight: 200,
            expandedContentBackgroundColor: "#444",
            expandedContentBorderRadius: 25,
            expandedContentMarginTop: 15,
            expandedContentMarginBottom: 15,
            expandedContentPaddingTop: 20,
            expandedContentPaddingBottom: 20,
            expandedContentPaddingLeft: 20,
            expandedContentPaddingRight: 20,
            expandedContentAlignItems: "center",
            expandedContentJustifyContent: "center",
            expandedContentFlexDirection: "column",
          }}
          onPress={handlePress}
          onLongPress={handleLongPress}
        />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#1a1a1a",
  },
  content: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  expandedContent: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  expandedContentText: {
    color: "#fff",
    fontSize: 18,
    marginBottom: 10,
  },
  closeButton: {
    color: "#007aff",
    fontSize: 16,
    marginTop: 15,
  },
});

export default App;

```

--------------------------------

### Picker Component Usage Example

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/docs/components/picker.mdx

This example demonstrates how to use the Picker component in your application. It assumes the component and its dependencies have been correctly installed.

```typescript
<ExampleComponentSource name="picker" />
```

--------------------------------

### Install Picker Dependencies

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/docs/components/picker.mdx

Install the necessary dependencies for the Picker component. Ensure all listed packages are installed before proceeding.

```bash
react-native-reanimated react-native-worklets expo-blur react-native-gesture-handler expo-linear-gradient expo-haptics
```

--------------------------------

### Install Dependencies

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/templates/sign-up-v2.mdx

List of essential dependencies required for the Sign Up V2 template. Ensure these are installed in your project.

```bash
@shopify/react-native-skia expo-font expo-vector-icons react-native-safe-area-context
```

--------------------------------

### Install Dependencies for Animated Masked Text

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/docs/components/animated-masked-text.mdx

Install the required dependencies for the Animated Masked Text component. Ensure these are installed before proceeding with the component setup.

```bash
expo-linear-gradient @react-native-masked-view/masked-view
```

--------------------------------

### Example Usage of Dynamic Text Component

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/docs/components/dynamic-text.mdx

This example demonstrates how to use the DynamicText component with a list of strings. Ensure you have installed the required dependencies.

```typescript
import React from "react";
import { View } from "react-native";
import DynamicText from "./components/molecules/dynamic-text";

const App = () => {
  const words = [
    "Hello",
    "World",
    "React Native",
    "Reanimated",
    "Expo",
  ];

  return (
    <View className="flex-1 items-center justify-center bg-background">
      <DynamicText items={words} duration={1000} delay={500} className="w-64 h-12" />
    </View>
  );
};

export default App;

```

--------------------------------

### Install Dependencies

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/docs/components/staggered-text.mdx

Install react-native-reanimated and @shopify/react-native-skia to use the staggered text animation.

```bash
react-native-reanimated @shopify/react-native-skia 
```

--------------------------------

### Install Reacticx AI Agent Skill

Source: https://github.com/rit3zh/reacticx/blob/main/README.md

Use this command to install the Reacticx skill for AI agents. Ensure you have Bun installed.

```bash
bunx skills add https://github.com/rit3zh/reacticx --using-reacticx
```

--------------------------------

### Install Dependencies for Bottom Sheet

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/docs/components/bottom-sheet.mdx

Install the necessary dependencies for the bottom sheet component. Ensure these are installed before proceeding.

```bash
react-native-reanimated react-native-gesture-handler react-native-worklets
```

--------------------------------

### Flip Card Usage Example

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/docs/components/flip-card.mdx

Demonstrates how to use the FlipCard component with custom front and back content. This example shows a basic setup for integrating the flip card into your application.

```tsx
import React from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  SafeAreaView,
} from "react-native";
import FlipCard from "./flip-card"; // Assuming flip-card.tsx is in the same directory

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <FlipCard
        frontContent={<Text style={styles.text}>Front Side</Text>}
        backContent={<Text style={styles.text}>Back Side</Text>}
      />
      <FlipCard
        frontContent={<Text style={styles.text}>Another Card</Text>}
        backContent={<Text style={styles.text}>More Info Here</Text>}
        duration={700}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#fff",
    gap: 20,
  },
  text: {
    fontSize: 24,
    fontWeight: "bold",
    color: "#333",
  },
});

export default App;

```

--------------------------------

### Install Dependencies

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/docs/components/stepper.mdx

Install react-native-reanimated and expo-vector-icons before using the Stepper component.

```bash
react-native-reanimated @expo/vector-icons
```

--------------------------------

### Install Dependencies

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/docs/components/scrollable-search.mdx

Install the necessary dependencies for the Scrollable Search component. Ensure these are added to your project before proceeding.

```bash
react-native-reanimated react-native-worklets react-native-safe-area-context expo-blur
```

--------------------------------

### Install Dependencies

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/templates/settings-v1.mdx

Install the necessary dependencies for Settings V1, including expo-router, expo-symbols, and expo-vector-icons.

```bash
expo-router expo-symbols expo-vector-icons
```

--------------------------------

### Install Dependencies for Dropdown

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/docs/components/dropdown.mdx

Install the necessary dependencies for the dropdown component. Ensure these are added to your project before using the component.

```bash
react-native-reanimated react-native-gesture-handler react-native-worklets expo-haptics
```

--------------------------------

### Stepper Usage Example

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/docs/components/stepper.mdx

Demonstrates how to use the Stepper component in your application. This example shows a basic implementation.

```javascript
import React from "react";
import { View, StyleSheet } from "react-native";
import Stepper from "./Stepper"; // Assuming Stepper is in the same directory

const App = () => {
  const handleValueChange = (value) => {
    console.log("Stepper value changed to:", value);
  };

  return (
    <View style={styles.container}>
      <Stepper initialValue={5} min={0} max={20} step={2} onChange={handleValueChange} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#fff",
  },
});

export default App;

```

--------------------------------

### Install Dependencies

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/docs/components/animated-theme-toggle.mdx

Before using the animated theme toggle, ensure you have installed the necessary dependencies: react-native-reanimated and react-native-svg.

```package-install
react-native-reanimated react-native-svg
```

--------------------------------

### Install Sign Up V2 Template

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/templates/sign-up-v2.mdx

Use this command to add the Sign Up V2 template to your project.

```bash
npx reacticx add sign-up-v2
```

--------------------------------

### Install Sign Up V1 Template

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/templates/sign-up-v1.mdx

Use this command to add the Sign Up V1 template to your project. This command installs the necessary template files.

```bash
npx reacticx add sign-up-v1
```

--------------------------------

### Rotate Carousel Usage Example

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/docs/components/rotate-carousel.mdx

Demonstrates how to use the Rotate Carousel component in your application. This example shows basic setup with items.

```typescript
import React from "react";
import {
  View,
  StyleSheet,
  Text,
  useWindowDimensions,
} from "react-native";
import Animated, { useSharedValue, useAnimatedStyle, withTiming, interpolate, Extrapolate } from "react-native-reanimated";
import { GestureHandlerRootView, PanGestureHandler } from "react-native-gesture-handler";
import Haptic from "react-native-haptic-feedback";
import { runOnJS } from "react-native-worklets-core";

// Assume RotateCarousel and RotateCarouselItem are imported from their respective files
// import RotateCarousel, { RotateCarouselItem } from './RotateCarousel';

const App = () => {
  const { width: screenWidth } = useWindowDimensions();

  return (
    <View style={styles.container}>
      <RotateCarousel
        itemWidth={screenWidth * 0.8}
        itemHeight={screenWidth * 0.8 * 1.2}
        perspective={1000}
        rotation={60}
        damping={0.8}
        animationConfig={{ duration: 500 }}
        onIndexChanged={(index) => {
          console.log("Current index:", index);
        }}
      >
        {[...Array(5).keys()].map((_, index) => (
          <RotateCarouselItem key={index}>
            <View style={styles.carouselItem}>
              <Text style={styles.carouselItemText}>Item {index + 1}</Text>
            </View>
          </RotateCarouselItem>
        ))}
      </RotateCarousel>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#fff",
  },
  carouselItem: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#e0e0e0",
    borderRadius: 10,
    margin: 10, // Add some margin for visual separation
  },
  carouselItemText: {
    fontSize: 24,
    fontWeight: "bold",
  },
});

export default App;

```

--------------------------------

### Install Settings V1 Template

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/templates/settings-v1.mdx

Use this command to add the Settings V1 template to your project.

```bash
npx reacticx add settings-v1
```

--------------------------------

### Usage Example for Sign Up V1

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/templates/sign-up-v1.mdx

Demonstrates how to import and use the SignUpV1 component within another screen, such as an authentication screen.

```tsx
import SignUpV1 from "./components/templates/sign-up-v1";

export default function AuthScreen() {
  return <SignUpV1 />;
}
```

--------------------------------

### Stack Aware Tabs Usage Example

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/docs/components/stack-aware-tabs.mdx

This is an example of how to use the Stack Aware Tabs component in your project. It demonstrates the basic setup and integration.

```tsx
import React from "react";
import { View, Text, Pressable } from "react-native";
import Animated, { useSharedValue } from "react-native-reanimated";
import { StackAwareTabs } from "./stack-aware-tabs";

const App = () => {
  const activeTab = useSharedValue(0);
  const tabs = React.useMemo(() => ["Home", "Search", "Profile"], []);

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <StackAwareTabs
        activeTab={activeTab}
        tabWidth={80}
        tabHeight={50}
        tabSpacing={10}
      >
        {tabs.map((tab, index) => (
          <Pressable
            key={index}
            onPress={() => (activeTab.value = index)}
            style={{
              width: 80,
              height: 50,
              justifyContent: "center",
              alignItems: "center",
              backgroundColor: "#f0f0f0",
              borderRadius: 10,
              marginRight: index === tabs.length - 1 ? 0 : 10,
            }}
          >
            <Text>{tab}</Text>
          </Pressable>
        ))}
      </StackAwareTabs>
    </View>
  );
};

export default App;

```

--------------------------------

### Usage Example for Authentication Screen

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/templates/sign-up-v2.mdx

A practical example demonstrating how to integrate the Sign Up V2 component into an authentication flow.

```tsx
import SignUpV2 from "./components/templates/sign-up-v2";

export default function AuthScreen() {
  return <SignUpV2 />;
}
```

--------------------------------

### Initialize Reacticx in Existing Project

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/docs/guides/index.mdx

Run this command to initialize Reacticx in an existing project. It prompts for an output directory and creates a `component.config.json` file.

```bash
npx reacticx init
```

--------------------------------

### Mesh Gradient Usage Example

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/docs/components/mesh-gradient.mdx

This example demonstrates how to use the Mesh Gradient component in your React Native application. Ensure you have installed the necessary dependencies.

```tsx
import React from "react";
import { MeshGradient } from "@/components/organisms/mesh-gradient";

export const Example = () => {
  return <MeshGradient />;
};

```

--------------------------------

### Install Property Detail V1 Template

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/templates/property-listing.mdx

Use this command to add the property-detail-v1 template to your project.

```bash
npx reacticx add property-detail-v1
```

--------------------------------

### Example Usage of Morphing Tab Bar

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/docs/components/morphing-tab-bar.mdx

Demonstrates how to use the Morphing Tab Bar component in your application. This example shows a basic setup with navigation.

```tsx
import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import MorphingTabBar from './molecules/morphing-tabbar'; // Adjust path as needed

const App = () => {
  const [activeTab, setActiveTab] = useState('home');

  const tabs = [
    { id: 'home', label: 'Home' },
    { id: 'profile', label: 'Profile' },
    { id: 'settings', label: 'Settings' },
  ];

  const handleTabPress = (tabId: string) => {
    setActiveTab(tabId);
    // Add navigation logic here
    console.log(`Navigating to ${tabId}`);
  };

  return (
    <View style={styles.container}>
      <MorphingTabBar
        tabs={tabs}
        activeTab={activeTab}
        onTabPress={handleTabPress}
      />
      {/* Other content based on activeTab */}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
    padding: 20,
  },
});

export default App;

```

--------------------------------

### Install Dependencies

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/templates/property-listing.mdx

Install the necessary dependencies for the property-detail-v1 template. This includes packages for fonts, icons, gradients, navigation, and safe area handling.

```bash
expo-font expo-symbols expo-linear-gradient expo-router react-native-safe-area-context @hugeicons/react-native @hugeicons/core-free-icons @expo/vector-icons
```

--------------------------------

### Example Usage of Vertical Flow Carousel

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/docs/components/vertical-flow-carousel.mdx

Render the VerticalFlowCarousel component with your data. Ensure you have installed the necessary dependencies.

```jsx
import React from 'react';
import { View, Dimensions } from 'react-native';
import VerticalFlowCarousel from './components/molecules/vertical-flow-carousel'; // Adjust path as needed

const { height } = Dimensions.get('window');

const App = () => {
  const carouselData = [
    { id: '1', title: 'Slide 1' },
    { id: '2', title: 'Slide 2' },
    { id: '3', title: 'Slide 3' },
    { id: '4', title: 'Slide 4' },
    { id: '5', title: 'Slide 5' },
  ];

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff' }}>
      <VerticalFlowCarousel 
        data={carouselData} 
        itemHeight={height / 3} 
        containerHeight={height * 0.8} 
      />
    </View>
  );
};

export default App;

```

--------------------------------

### Install Chat V1 Template

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/templates/chat-v1.mdx

Use this command to add the chat-v1 template to your project.

```bash
npx reacticx add chat-v1
```

--------------------------------

### Flip Card Component Implementation

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/docs/components/flip-card.mdx

This is the base implementation of the Flip Card component. Copy this code into your project to get started.

```tsx
import React, { useState, useEffect, useRef } from "react";
import {
  View,
  StyleSheet,
  Text,
  TouchableOpacity,
  Animated,
  Easing,
} from "react-native";
import { BlurView } from "@sbaiahmed1/react-native-blur";
import Haptics from "expo-haptics";

interface FlipCardProps {
  frontContent: React.ReactNode;
  backContent: React.ReactNode;
  duration?: number;
  onFlip?: (isFlipped: boolean) => void;
}

const FlipCard: React.FC<FlipCardProps> = ({
  frontContent,
  backContent,
  duration = 500,
  onFlip,
}) => {
  const [isFlipped, setIsFlipped] = useState(false);
  const animatedValue = useRef(new Animated.Value(0)).current;

  const flipToFront = () => {
    Animated.timing(animatedValue, {
      toValue: 0,
      duration: duration,
      useNativeDriver: true,
      easing: Easing.inOut(Easing.quad),
    }).start(() => {
      setIsFlipped(false);
      onFlip && onFlip(false);
    });
  };

  const flipToBack = () => {
    Animated.timing(animatedValue, {
      toValue: 1,
      duration: duration,
      useNativeDriver: true,
      easing: Easing.inOut(Easing.quad),
    }).start(() => {
      setIsFlipped(true);
      onFlip && onFlip(true);
    });
  };

  const handleFlip = () => {
    if (isFlipped) {
      flipToFront();
    } else {
      flipToBack();
    }
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
  };

  const frontInterpolate = animatedValue.interpolate({
    inputRange: [0, 1],
    outputRange: ["0deg", "180deg"],
  });

  const backInterpolate = animatedValue.interpolate({
    inputRange: [0, 1],
    outputRange: ["180deg", "360deg"],
  });

  const frontAnimatedStyle = {
    transform: [
      { rotateY: frontInterpolate },
      { perspective: 1000 },
    ],
  };

  const backAnimatedStyle = {
    transform: [
      { rotateY: backInterpolate },
      { perspective: 1000 },
    ],
  };

  return (
    <TouchableOpacity onPress={handleFlip} activeOpacity={0.8}>
      <View style={styles.cardContainer}>
        <Animated.View style={[styles.card, styles.cardFront, frontAnimatedStyle]}>
          <BlurView intensity={10} style={StyleSheet.absoluteFill}>
            {frontContent}
          </BlurView>
        </Animated.View>
        <Animated.View
          style={[styles.card, styles.cardBack, backAnimatedStyle]}
        >
          <BlurView intensity={10} style={StyleSheet.absoluteFill}>
            {backContent}
          </BlurView>
        </Animated.View>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  cardContainer: {
    width: 300,
    height: 200,
    position: "relative",
  },
  card: {
    width: "100%",
    height: "100%",
    justifyContent: "center",
    alignItems: "center",
    position: "absolute",
    backfaceVisibility: "hidden",
    borderRadius: 12,
    overflow: "hidden",
  },
  cardFront: {
    backgroundColor: "#f0f0f0",
    zIndex: 2,
  },
  cardBack: {
    backgroundColor: "#e0e0e0",
    zIndex: 1,
  },
});

export default FlipCard;

```

--------------------------------

### Bottom Sheet Component Template

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/docs/components/bottom-sheet.mdx

This is the base component template for the bottom sheet. Copy this code into your project to get started.

```javascript
import React, { useCallback } from "react";
import {
  BottomSheet,
  BottomSheetView,
  useBottomSheetDynamicSnapPoints,
  useBottomSheet,
} from "@gorhom/bottom-sheet";
import {
  GestureHandlerRootView,
  RectButton,
} from "react-native-gesture-handler";
import {
  StyleSheet,
  Text,
  View,
  ScrollView,
  TextInput,
  Button,
} from "react-native";

const BottomSheetComponent = () => {
  // ref
  const bottomSheetRef = React.useRef<BottomSheet>(null);

  // variables
  const snapPoints = React.useMemo(() => ["25%", "50%", "90%"], []);

  // custom hooks
  const { animatedHandleHeight, animatedSnapPoints, animatedContentHeight, handleContentLayoutOnLayout } = useBottomSheetDynamicSnapPoints(snapPoints);
  const { close, expand, snapTo, id } = useBottomSheet();

  // callbacks
  const handleSheetChanges = useCallback((index: number) => {
    console.log("handleSheetChanges", index);
  }, []);

  const renderContent = () => (
    <BottomSheetView onLayout={handleContentLayoutOnLayout}>
      <View style={styles.contentContainer}>
        <Text>Awesome 🎉</Text>
        <TextInput placeholder="Your text here..." style={styles.input} />
        <ScrollView style={styles.scrollView}>
          {[...Array(50).keys()].map((i) => (
            <Text key={i} style={styles.text}>
              Scrollable content item {i}
            </Text>
          ))}
        </ScrollView>
        <Button title="Close" onPress={() => bottomSheetRef.current?.close()} />
      </View>
    </BottomSheetView>
  );

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <View style={styles.container}>
        <BottomSheet
          ref={bottomSheetRef}
          index={1}
          snapPoints={animatedSnapPoints}
          handleHeight={animatedHandleHeight}
          contentHeight={animatedContentHeight}
          onChange={handleSheetChanges}
        >
          {renderContent()}
        </BottomSheet>
      </View>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: "grey",
  },
  contentContainer: {
    flex: 1,
    alignItems: "center",
    padding: 20,
  },
  input: {
    width: "100%",
    minHeight: 44,
    padding: 12,
    backgroundColor: "white",
    borderRadius: 6,
    marginTop: 20,
    marginBottom: 20,
  },
  scrollView: {
    flex: 1,
    width: "100%",
    backgroundColor: "#f0f0f0",
    padding: 10,
    borderRadius: 6,
  },
  text: {
    fontSize: 16,
    marginBottom: 10,
  },
});

export default BottomSheetComponent;

```

--------------------------------

### Import and Use Sign Up V2 Component

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/templates/sign-up-v2.mdx

Example of how to import and render the main Sign Up V2 component in your application.

```tsx
import SignUpV2 from "./components/templates/sign-up-v2";

export default function App() {
  return <SignUpV2 />;
}
```

--------------------------------

### Bottom Sheet Stack Component Template

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/docs/components/bottom-sheet-stack.mdx

This is the base component template for the Bottom Sheet Stack. Copy this code into your project to get started.

```typescript
import React, { useState, useCallback } from "react";
import { View, Text, Button, StyleSheet } from "react-native";
import { BottomSheetStack, BottomSheetStackHandle } from "@gorhom/bottom-sheet-stack";

const App = () => {
  const bottomSheetRef = React.useRef<BottomSheetStackHandle>(null);

  const handlePresentPress = useCallback(() => {
    bottomSheetRef.current?.present();
  }, []);

  const handleDismissPress = useCallback(() => {
    bottomSheetRef.current?.dismiss();
  }, []);

  return (
    <View style={styles.container}>
      <BottomSheetStack ref={bottomSheetRef} />
      <Button title="Present Bottom Sheet" onPress={handlePresentPress} />
      <Button title="Dismiss Bottom Sheet" onPress={handleDismissPress} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

export default App;

```

--------------------------------

### Example Usage of Curved Bottom Tabs

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/docs/components/curved-bottom-tabs.mdx

This component demonstrates how to use the Curved Bottom Tabs in your React Native application. It requires the necessary dependencies to be installed.

```tsx
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import CurvedBottomTabs from "./curved-bottom-tabs"; // Adjust the import path as needed

const Tab = createBottomTabNavigator();

const HomeScreen = () => <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}><Text>Home</Text></View>;
const SettingsScreen = () => <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}><Text>Settings</Text></View>;
const ProfileScreen = () => <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}><Text>Profile</Text></View>;

const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator tabBar={(props) => <CurvedBottomTabs {...props} />}>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
        <Tab.Screen name="Profile" component={ProfileScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

export default App;

```

--------------------------------

### Reacticx Create Command Under the Hood

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/docs/guides/index.mdx

Illustrates the sequence of operations performed by `reacticx create`, including Expo app creation and Reacticx initialization.

```bash
┌ Creating Expo app
│  bunx create-expo-app my-expo-app --template blank-typescript

│  Updated app.json → bundle ID: com.company.myapp

├ Initializing Reacticx
│  bunx reacticx init

└ All done! 🎉

  Next steps:

    cd my-expo-app
    bunx reacticx add button
```

--------------------------------

### Example Output of `reacticx list`

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/docs/guides/index.mdx

Shows the structure and count of components after running `reacticx list`. Components are organized into categories like atoms and molecules.

```bash
📦 Reacticx UI Components (v1.0.0)

Total: 50 components

atoms/
  button
  input
  text

molecules/
  accordion
  card
  modal

micro-interactions/
  gooey-switch
  spin-button
```

--------------------------------

### Toast Component API

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/docs/components/toast.mdx

This section details the Toast component's API, including installation dependencies, manual setup steps, and the structure of its core files. It also references the props and types available for customization.

```APIDOC
## Toast Component API

### Description

This documentation covers the Toast component, a fully featured toast system with a global API and stacked animations. It includes installation instructions, manual setup steps, usage examples, and detailed prop information.

### Installation

Install the following dependencies:
```package-install
react-native-reanimated react-native-worklets react-native-safe-area-context
```

### Manual Setup

Copy and paste the following code into your project:

1.  **`index`**: `component/molecules/toast/index`
2.  **`Toast`**: `component/molecules/toast/Toast`
3.  **`ToastViewPort`**: `component/molecules/toast/ToastViewPort`
4.  **`ToastContext`**: `component/molecules/toast/ToastContext`

### Usage

<ExampleComponentSource name="toast" />

### Props

<AutoTypeTable path="react-native-types/toast.ts" name="Toast" />

### ICarouselItem (ToastContextValue)

<AutoTypeTable path="react-native-types/toast.ts" name="ToastContextValue" />

### ICarouselRenderItem (ToastOptions)

<AutoTypeTable path="react-native-types/toast.ts" name="ToastOptions" />

### Dependencies

- React Native Reanimated
- React Native Worklets
- React Native Safe Area Context
```

--------------------------------

### Full Settings Screen Example

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/templates/settings-v1.mdx

This example demonstrates a complete settings screen using the Reacticx Settings V1 template. It includes sections for user profile, notifications, dark mode, and app information like privacy policy and version.

```tsx
import React, { useState } from "react";
import { ScrollView } from "react-native";
import * as Settings from "./components/templates/settings-v1/components";
import { COLOR_SCHEME } from "./components/templates/settings-v1/const";
import { Ionicons } from "@expo/vector-icons";

export default function SettingsScreen() {
  const [notifications, setNotifications] = useState(true);
  const [darkMode, setDarkMode] = useState(true);

  return (
    <ScrollView
      style={{ flex: 1, backgroundColor: COLOR_SCHEME.BACKGROUND_PRIMARY }}
      contentContainerStyle={{ padding: 16, paddingBottom: 60 }}
    >
      <Settings.Root>
        <Settings.Section>
          <Settings.Group>
            <Settings.LargeItem onPress={() => {}}>
              <Settings.Avatar
                source={{ uri: "https://example.com/avatar.jpg" }}
              />
              <Settings.Content>
                <Settings.Title style={{ fontSize: 20, fontWeight: "600" }}>
                  Jane Doe
                </Settings.Title>
                <Settings.Subtitle>
                  Apple Account, iCloud, and more
                </Settings.Subtitle>
              </Settings.Content>
              <Settings.Chevron size={18} />
            </Settings.LargeItem>
          </Settings.Group>
        </Settings.Section>

        <Settings.Section>
          <Settings.Group>
            <Settings.Item>
              <Settings.Icon
                color="#FF9F0A"
                icon={
                  <Ionicons
                    name="notifications-outline"
                    size={18}
                    color="#FFFFFF"
                  />
                }
              />
              <Settings.Content>
                <Settings.Title>Notifications</Settings.Title>
              </Settings.Content>
              <Settings.Switch
                value={notifications}
                onValueChange={setNotifications}
              />
            </Settings.Item>

            <Settings.Item>
              <Settings.Icon
                color="#5856D6"
                icon={
                  <Ionicons
                    name="moon-outline"
                    size={18}
                    color="#FFFFFF"
                  />
                }
              />
              <Settings.Content>
                <Settings.Title>Dark Mode</Settings.Title>
              </Settings.Content>
              <Settings.Switch
                value={darkMode}
                onValueChange={setDarkMode}
              />
            </Settings.Item>
          </Settings.Group>
        </Settings.Section>

        <Settings.Section>
          <Settings.Label>About</Settings.Label>
          <Settings.Group>
            <Settings.Item onPress={() => {}}>
              <Settings.Content>
                <Settings.Title>Privacy Policy</Settings.Title>
              </Settings.Content>
              <Settings.Chevron />
            </Settings.Item>

            <Settings.Item>
              <Settings.Content>
                <Settings.Title>Version</Settings.Title>
              </Settings.Content>
              <Settings.Value>1.0.0</Settings.Value>
            </Settings.Item>
          </Settings.Group>
          <Settings.Footer>
            Built with Reacticx Settings V1 template.
          </Settings.Footer>
        </Settings.Section>
      </Settings.Root>
    </ScrollView>
  );
}
```

--------------------------------

### Install Dependencies for Parallax Carousel

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/docs/components/parallax-carousel.mdx

Install the necessary dependencies for the Parallax Carousel component. Ensure these are installed before proceeding.

```bash
react-native-reanimated expo-haptics react-native-worklets
```

--------------------------------

### Reacticx CLI Interactive Prompts

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/docs/guides/index.mdx

Example of interactive prompts during `reacticx create`. Customize app name, bundle ID, template, and package manager.

```bash
✨  Create a new Expo app with Reacticx

✔ App name                              › my-expo-app
✔ Bundle / package ID (leave blank to skip) › com.company.myapp
✔ Template                              › Blank — TypeScript
✔ Package manager                       › bun  ← detected
✔ Run bunx reacticx init inside the new project? › Yes
```

--------------------------------

### Install Aurora Dependencies

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/docs/components/aurora.mdx

Install react-native-reanimated and react-native-skia to use the Aurora component. Ensure these dependencies are correctly installed before proceeding.

```bash
react-native-reanimated @shopify/react-native-skia
```

--------------------------------

### Reacticx Add Component Output

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/docs/guides/index.mdx

Example output after successfully adding a component, indicating the files created and their locations.

```bash
✔ Added button!

Files created:
  src/shared/ui/atoms/button/index.tsx
  src/shared/ui/atoms/button/types.ts
```

--------------------------------

### Install QR Code Dependencies

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/docs/components/qr-code.mdx

Install the necessary packages for the QR Code component. Ensure these are added to your project before proceeding.

```bash
react-native-reanimated expo-blur @expo/vector-icons react-native-qrcode-styled
```

--------------------------------

### Install Dependencies for Morphing Tab Bar

Source: https://github.com/rit3zh/reacticx/blob/main/website/content/docs/components/morphing-tab-bar.mdx

Install the necessary dependencies for the Morphing Tab Bar component. Ensure these are installed before proceeding.

```bash
react-native-reanimated @shopify/react-native-skia expo-haptics
```