Galadrim Feedback - React Native

React Native integration for Galadrim Feedback system. Collect user feedback directly in your React Native mobile applications.

Features

• 🎯 Click Tracking: Automatically track touch interactions on any component
• 📱 React Native Native: Built specifically for React Native
• 🔌 Easy Integration: Simple setup with Babel plugin
• 🎨 Component Path Tracking: Know exactly which component received feedback
• 🚀 Performance Optimized: Minimal overhead, only active when needed

Installation

1. Install the package

npm install galadrim-feedback-react-native
# or
yarn add galadrim-feedback-react-native

2. Install the Babel plugin

npm install --save-dev babel-plugin-react-native-feedback-wrapper
# or
yarn add -D babel-plugin-react-native-feedback-wrapper

3. Configure Babel

Update your babel.config.js:

module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
  plugins: ["babel-plugin-react-native-feedback-wrapper"],
};

4. Clear Metro cache

npx react-native start --reset-cache
# or for Expo
npx expo start -c

Usage

Wrap your app with FeedbackRoot

// App.tsx
import React from "react";
import { FeedbackRoot } from "galadrim-feedback-react-native";
import { NavigationContainer } from "@react-navigation/native";
import MainNavigator from "./navigation/MainNavigator";

export default function App() {
  return (
    <FeedbackRoot
      projectId="your-project-id"
      rootDir="/path/to/your/project"
      position="bottom-right"
    >
      <NavigationContainer>
        <MainNavigator />
      </NavigationContainer>
    </FeedbackRoot>
  );
}

The Babel plugin automatically wraps components

Your code:

function HomeScreen() {
  return (
    <View>
      <Text>Hello World</Text>
      <TouchableOpacity onPress={handlePress}>
        <Text>Click me</Text>
      </TouchableOpacity>
    </View>
  );
}

Automatically transforms to:

import { FeedbackTrackable } from "galadrim-feedback-react-native";

function HomeScreen() {
  return (
    <FeedbackTrackable componentPath="screens/HomeScreen.tsx:View">
      <View>
        <FeedbackTrackable componentPath="screens/HomeScreen.tsx:Text">
          <Text>Hello World</Text>
        </FeedbackTrackable>
        <FeedbackTrackable componentPath="screens/HomeScreen.tsx:TouchableOpacity">
          <TouchableOpacity onPress={handlePress}>
            <FeedbackTrackable componentPath="screens/HomeScreen.tsx:Text">
              <Text>Click me</Text>
            </FeedbackTrackable>
          </TouchableOpacity>
        </FeedbackTrackable>
      </View>
    </FeedbackTrackable>
  );
}

API

FeedbackRoot Props

| Prop | Type | Required | Default | Description | | ------------------ | -------------------------------------------------------------- | -------- | ---------------- | ---------------------------------- | | projectId | string | ✅ | - | Your Galadrim project ID | | rootDir | string | ✅ | - | Absolute path to your project root | | position | "bottom-right" \| "bottom-left" \| "top-right" \| "top-left" | ❌ | "bottom-right" | Position of feedback button | | notionDatabaseId | string | ❌ | - | Notion database ID for integration | | children | ReactNode | ✅ | - | Your app components |

FeedbackTrackable Props

| Prop | Type | Required | Description | | --------------- | ----------- | -------- | ----------------------------------------------------------- | | componentPath | string | ✅ | Path identifying the component (auto-added by Babel plugin) | | children | ReactNode | ✅ | Components to wrap |

Hooks

useFeedbackContext()

Access the feedback context from any component:

import { useFeedbackContext } from "galadrim-feedback-react-native";

function MyComponent() {
  const { isOpen, activateFeedbackMode, deactivateFeedbackMode, feedbacks } =
    useFeedbackContext();

  return (
    <Button
      title={isOpen ? "Close Feedback" : "Open Feedback"}
      onPress={() => {
        if (isOpen) {
          deactivateFeedbackMode();
        } else {
          activateFeedbackMode();
        }
      }}
    />
  );
}

Manual Usage (Without Babel Plugin)

If you prefer not to use the Babel plugin, you can manually wrap components:

import { FeedbackTrackable } from "galadrim-feedback-react-native";

function HomeScreen() {
  return (
    <FeedbackTrackable componentPath="screens/HomeScreen.tsx:Container">
      <View>
        <FeedbackTrackable componentPath="screens/HomeScreen.tsx:Title">
          <Text>Hello World</Text>
        </FeedbackTrackable>
      </View>
    </FeedbackTrackable>
  );
}

Configuration

Customize which components to wrap

// babel.config.js
module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
  plugins: [
    [
      "babel-plugin-react-native-feedback-wrapper",
      {
        // Only wrap these components
        wrappableComponents: ["View", "Text", "TouchableOpacity", "Pressable"],
        // Don't wrap user components
        wrapUserComponents: false,
      },
    ],
  ],
};

Skip specific components

Add data-feedback-skip to prevent tracking:

<View data-feedback-skip>
  {/* This view won't be tracked */}
  <Text>Private content</Text>
</View>

How It Works

1. Babel Plugin: Automatically wraps your components with FeedbackTrackable
2. Touch Tracking: When feedback mode is active, touches are captured
3. Position Measurement: Component position and size are measured using UIManager.measureInWindow
4. Feedback Creation: Touch location and component info are recorded
5. Visual Indicators: Feedback pins are displayed at touch locations

TypeScript

The package includes full TypeScript definitions. All types are exported:

import type {
  FeedbackContextType,
  FeedbackPosition,
  FeedbackCreateDto,
  FeedbackResponse,
  Position,
  FeedbackRootProps,
} from "galadrim-feedback-react-native";

Performance

• Zero overhead when feedback mode is inactive
• Minimal re-renders using React context optimization
• Lazy measurement only when touches occur
• No impact on production builds (feedback mode is controlled)

Compatibility

• React Native: 0.70+
• React: 18.0+
• iOS: 13.0+
• Android: API 21+
• Expo: Compatible with Expo workflow

Troubleshooting

Components not tracking

1. Clear Metro cache: npx react-native start --reset-cache
2. Verify Babel plugin is configured correctly
3. Check that FeedbackRoot wraps your app

TypeScript errors

Make sure you have the type definitions:

npm install --save-dev @types/react-native

Performance issues

Reduce the number of wrapped components:

wrappableComponents: ["TouchableOpacity", "Pressable"]; // Only interactive elements

Next Steps

• Add UI components for feedback input
• Implement feedback submission to backend
• Add feedback visualization components
• Integrate with navigation for screen tracking

Build & Development

Building the Package

npm run build

Outputs:

• dist/index.js - CommonJS bundle
• dist/index.mjs - ES Module bundle
• dist/index.d.ts - TypeScript definitions

Development Mode

npm run watch

Rebuilds automatically on file changes.

Publishing

See PUBLISHING.md for detailed publishing instructions.

Changelog

See CHANGELOG.md for version history.

License

MIT

Support

For issues and questions, visit the GitHub repository.