### Installation and Development Commands (Bash)

Source: https://context7.com/ajakka/react-native-reaction-bubble/llms.txt

Provides essential bash commands for managing project dependencies and running the development server. Uses pnpm for package management and includes commands for starting the app on Android, iOS, or the web.

```bash
# Install dependencies
pnpm install

# Start development server
pnpm start

# Run on specific platform
pnpm android  # Android emulator or device
pnpm ios      # iOS simulator or device
pnpm web      # Web browser
```

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

### React Native Reaction Bubble Usage Example

Source: https://github.com/ajakka/react-native-reaction-bubble/blob/main/README.md

This snippet demonstrates how to use the ReactionBubble component in a React Native application. It shows how to manage the selected reaction state, pass an array of reactions, and apply custom styles to the bubble and individual reactions. The example requires React, React Native, and the ReactionBubble component itself.

```jsx
export default function App() {
  const [selectedReaction, setSetselectedReaction] = useState<string>();

  return (
    <View style={containerStyle}>
      <ReactionBubble
        reactions={["👍", "❤️", "😂", "😮", "😢", "🤲"]}
        selectedReaction={selectedReaction}
        onReactionPress={(reaction) => setSetselectedReaction(reaction)}
        style={chatStyle}
        bubbleStyle={chatBubbleStyle}
        reactionStyle={chatBubbleStyle}
        highlightColor="#192329"
      >
        <Text style={chatTextStyle}>Hello animation 👋🏼</Text>
      </ReactionBubble>
    </View>
  );
}

const { containerStyle, chatStyle, chatBubbleStyle, chatTextStyle } =
  StyleSheet.create({
    containerStyle: {
      flex: 1,
      justifyContent: "center",
      alignItems: "flex-start",
      backgroundColor: "#0C151B",
      paddingHorizontal: 16,
    },
    chatStyle: {
      borderRadius: 16,
      borderBottomStartRadius: 2,
      backgroundColor: "#202A30",
      paddingVertical: 8,
      paddingHorizontal: 16,
    },
    chatBubbleStyle: { backgroundColor: "#202A30" },
    chatTextStyle: { color: "white", fontSize: 16 },
  });
```

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

### Project Dependencies and Scripts (package.json)

Source: https://context7.com/ajakka/react-native-reaction-bubble/llms.txt

Manages project dependencies and defines scripts for starting the Expo development server and running the application on different platforms (Android, iOS, Web). Includes core React Native, Expo, and animation-related libraries.

```json
{
  "dependencies": {
    "@expo/metro-runtime": "^3.1.1",
    "@types/react": "~18.2.45",
    "expo": "^50.0.15",
    "expo-status-bar": "~1.11.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.73.6",
    "react-native-reanimated": "~3.6.0",
    "react-native-svg": "^14.1.0",
    "react-native-web": "~0.19.6",
    "typescript": "^5.3.0"
  },
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  }
}
```

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

### Reanimated 3 Animations for Reaction Bubble

Source: https://context7.com/ajakka/react-native-reaction-bubble/llms.txt

Illustrates the use of Reanimated 3 for creating smooth animations within the reaction bubble component. Includes examples for the reaction picker bubble, individual emoji entrances, and selected reaction indicators.

```tsx
import Animated, {
  ZoomIn,
  ZoomOut,
  CurvedTransition,
  BounceIn,
  BounceOut,
} from "react-native-reanimated";

// Reaction picker bubble animations
const ReactionPickerBubble = () => (
  <Animated.View
    layout={CurvedTransition}
    entering={ZoomIn.duration(300)}
    exiting={ZoomOut.duration(200)}
    style={bubbleStyle}
  >
    {/* Reaction picker content */}
  </Animated.View>
);

// Individual reaction emoji staggered entrance
const ReactionEmoji = ({ reaction, index }) => (
  <Animated.Text
    entering={ZoomIn.delay((index + 1) * 60).duration(150)}
    style={{ fontSize: 28 }}
  >
    {reaction}
  </Animated.Text>
);

// Selected reaction indicator animations
const SelectedReactionIndicator = ({ reaction }) => (
  <Animated.View
    layout={CurvedTransition}
    entering={BounceIn.damping(0.5).duration(100)}
    exiting={BounceOut.damping(0.5).duration(100)}
    style={miniReactionStyle}
  >
    <Animated.Text>{reaction}</Animated.Text>
  </Animated.View>
);

```

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

### ReactionBubble Component Props Interface Definition

Source: https://context7.com/ajakka/react-native-reaction-bubble/llms.txt

Defines the TypeScript interface for the ReactionBubble component's props, detailing the expected types for reactions, styling, and callbacks. Includes an example of custom styling.

```tsx
import { PressableProps, TextStyle, ViewStyle } from "react-native";

export type ReactionBubbleProps = PressableProps & {
  // Array of emoji strings to display in the reaction picker
  reactions: string[];

  // Currently selected reaction emoji or undefined
  selectedReaction: string | undefined;

  // Callback fired when a reaction is selected or removed
  onReactionPress: (reaction: string | undefined) => void;

  // Style for the main content wrapper
  style?: ViewStyle;

  // Style for the reaction picker bubble background
  bubbleStyle?: ViewStyle;

  // Style for the selected reaction indicator
  reactionStyle?: TextStyle;

  // Background color when pressing the content
  highlightColor: string | undefined;

  // Child elements to wrap with reaction functionality
  children: React.ReactNode;
};

// Usage example with custom styling
<ReactionBubble
  reactions={["🔥", "💯", "🎉", "👏", "🙌", "✨"]}
  selectedReaction={userReaction}
  onReactionPress={(reaction) => {
    if (reaction === undefined) {
      console.log("Reaction removed");
    } else {
      console.log("Selected:", reaction);
    }
    setUserReaction(reaction);
  }}
  style={{
    borderRadius: 20,
    backgroundColor: "#2C2C2E",
    padding: 12,
  }}
  bubbleStyle={{
    backgroundColor: "#3A3A3C",
    borderRadius: 24,
  }}
  reactionStyle={{
    backgroundColor: "#3A3A3C",
    borderRadius: 16,
  }}
  highlightColor="#48484A"
>
  <Text style={{ color: "#FFFFFF" }}>Custom styled message</Text>
</ReactionBubble>

```

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

### Implement Reaction Bubble Component in React Native

Source: https://context7.com/ajakka/react-native-reaction-bubble/llms.txt

Demonstrates the basic implementation of the ReactionBubble component in a React Native application. It shows how to manage the selected reaction state and pass customization props.

```tsx
import { useState } from "react";
import { View, StyleSheet, Text } from "react-native";
import ReactionBubble from "./animations/ReactionBubble";

export default function App() {
  const [selectedReaction, setSetselectedReaction] = useState<string>();

  return (
    <View style={containerStyle}>
      <ReactionBubble
        reactions={["👍", "❤️", "😂", "😮", "😢", "🤲"]}
        selectedReaction={selectedReaction}
        onReactionPress={(reaction) => setSetselectedReaction(reaction)}
        style={chatStyle}
        bubbleStyle={chatBubbleStyle}
        reactionStyle={chatBubbleStyle}
        highlightColor="#192329"
      >
        <Text style={chatTextStyle}>Hello animation 👋🏼</Text>
      </ReactionBubble>
    </View>
  );
}

const { containerStyle, chatStyle, chatBubbleStyle, chatTextStyle } =
  StyleSheet.create({
    containerStyle: {
      flex: 1,
      justifyContent: "center",
      alignItems: "flex-start",
      backgroundColor: "#0C151B",
      paddingHorizontal: 16,
    },
    chatStyle: {
      borderRadius: 16,
      borderBottomStartRadius: 2,
      backgroundColor: "#202A30",
      paddingVertical: 8,
      paddingHorizontal: 16,
    },
    chatBubbleStyle: { backgroundColor: "#202A30" },
    chatTextStyle: { color: "white", fontSize: 16 },
  });

```

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

### Chat Interface Integration (React Native)

Source: https://context7.com/ajakka/react-native-reaction-bubble/llms.txt

Demonstrates integrating the ReactionBubble component into a chat interface. Manages messages state, handles reaction updates, and renders messages with the ReactionBubble for user interaction. Uses basic React Native components and StyleSheet for styling.

```tsx
import { useState } from "react";
import { View, Text, StyleSheet, ScrollView } from "react-native";
import ReactionBubble from "./animations/ReactionBubble";

interface Message {
  id: string;
  text: string;
  sender: "user" | "other";
  reaction?: string;
}

export default function ChatInterface() {
  const [messages, setMessages] = useState<Message[]>([
    { id: "1", text: "Hey! How are you?", sender: "other" },
    { id: "2", text: "I'm doing great, thanks!", sender: "user" },
    { id: "3", text: "That's wonderful to hear!", sender: "other" },
  ]);

  const handleReaction = (messageId: string, reaction: string | undefined) => {
    setMessages((prev) =>
      prev.map((msg) =>
        msg.id === messageId
          ? { ...msg, reaction: reaction } 
          : msg
      )
    );
  };

  return (
    <ScrollView style={styles.container}>
      {messages.map((message) => (
        <View
          key={message.id}
          style={[ 
            styles.messageRow,
            message.sender === "user" && styles.messageRowRight,
          ]}
        >
          <ReactionBubble
            reactions={["👍", "❤️", "😂", "😮", "😢", "🤲"]}
            selectedReaction={message.reaction}
            onReactionPress={(reaction) => handleReaction(message.id, reaction)}
            style={[ 
              styles.messageBubble,
              message.sender === "user"
                ? styles.userBubble
                : styles.otherBubble,
            ]}
            bubbleStyle={styles.reactionPickerBubble}
            reactionStyle={styles.selectedReactionStyle}
            highlightColor={
              message.sender === "user" ? "#1A4D2E" : "#192329"
            }
          >
            <Text
              style={[ 
                styles.messageText,
                message.sender === "user" && styles.userText,
              ]}
            >
              {message.text}
            </Text>
          </ReactionBubble>
        </View>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#0C151B",
    padding: 16,
  },
  messageRow: {
    alignItems: "flex-start",
    marginVertical: 4,
  },
  messageRowRight: {
    alignItems: "flex-end",
  },
  messageBubble: {
    borderRadius: 16,
    paddingVertical: 8,
    paddingHorizontal: 16,
    maxWidth: "80%",
  },
  userBubble: {
    backgroundColor: "#1F8A70",
    borderBottomEndRadius: 2,
  },
  otherBubble: {
    backgroundColor: "#202A30",
    borderBottomStartRadius: 2,
  },
  messageText: {
    fontSize: 16,
    color: "white",
  },
  userText: {
    color: "white",
  },
  reactionPickerBubble: {
    backgroundColor: "#202A30",
  },
  selectedReactionStyle: {
    backgroundColor: "#202A30",
  },
});

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.