Merge branch 'antonis/3859-newCaptureFeedbackAPI-Form' into antonis/4…

…359-Feedback-Form-NetworkError

# Conflicts:
#	packages/core/src/js/feedback/FeedbackForm.tsx

.github/workflows/sample-application-expo.yml

@@ -0,0 +1,139 @@
+name: Sample Application Expo
+
+on:
+  push:
+    branches:
+      - main
+      - v5
+  pull_request:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: ${{ github.ref != 'refs/heads/main' }}
+
+env:
+  SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+  RN_SENTRY_POD_NAME: RNSentry
+
+jobs:
+  diff_check:
+    uses: ./.github/workflows/skip-ci.yml
+
+  build:
+    name: Build ${{ matrix.platform }} ${{ matrix.build-type }} ${{ matrix.ios-use-frameworks}}
+    runs-on: ${{ matrix.runs-on }}
+    needs: [diff_check]
+    if: ${{ needs.diff_check.outputs.skip_ci != 'true' }}
+    env:
+      SENTRY_DISABLE_AUTO_UPLOAD: 'true'
+    strategy:
+      # we want that the matrix keeps running, default is to cancel them if it fails.
+      fail-fast: false
+      matrix:
+        ios-use-frameworks: ['no-frameworks', 'dynamic-frameworks']
+        platform: ['android', 'ios']
+        build-type: ['dev', 'production']
+        include:
+          - platform: ios
+            runs-on: macos-15
+          - platform: android
+            runs-on: ubuntu-latest
+          - platform: web
+            runs-on: ubuntu-latest
+        exclude:
+          - platform: 'android'
+            ios-use-frameworks: 'dynamic-frameworks'
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Enable Corepack
+        run: |
+          npm install -g [email protected]
+          corepack enable
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: 'yarn'
+          cache-dependency-path: yarn.lock
+
+      - uses: ruby/setup-ruby@v1
+        if: ${{ matrix.platform == 'ios' }}
+        with:
+          working-directory: ${{ matrix.platform == 'ios' && ' samples/expo' }}
+          ruby-version: '3.3.0' # based on what is used in the sample
+          bundler-cache: true # runs 'bundle install' and caches installed gems automatically
+          cache-version: 1 # cache the installed gems
+
+      - uses: actions/setup-java@v4
+        with:
+          java-version: '17'
+          distribution: 'adopt'
+
+      - name: Gradle cache
+        uses: gradle/gradle-build-action@ac2d340dc04d9e1113182899e983b5400c17cda1 # v3.5.0
+
+      - name: Setup Global Xcode Tools
+        if: ${{ matrix.platform == 'ios' }}
+        run: which xcbeautify || brew install xcbeautify
+
+      - name: Install SDK Dependencies
+        run: yarn install
+
+      - name: Build SDK
+        run: yarn build
+
+      - name: Prebuild apps
+        if: ${{ matrix.platform == 'android' || matrix.platform == 'ios' }}
+        working-directory: samples/expo
+        run: npx expo prebuild
+
+      - name: Install App Pods
+        if: ${{ matrix.platform == 'ios' }}
+        working-directory: samples/expo/ios
+        run: |
+          [[ "${{ matrix.build-type }}" == "production" ]] && ENABLE_PROD=1 || ENABLE_PROD=0
+          [[ "${{ matrix.ios-use-frameworks }}" == "dynamic-frameworks" ]] && export USE_FRAMEWORKS=dynamic
+          echo "ENABLE_PROD=$ENABLE_PROD"
+          PRODUCTION=$ENABLE_PROD pod install
+          cat Podfile.lock | grep $RN_SENTRY_POD_NAME
+
+      - name: Build Android App
+        if: ${{ matrix.platform == 'android' }}
+        working-directory: samples/expo/android
+        run: |
+          [[ "${{ matrix.build-type }}" == "production" ]] && CONFIG='Release' || CONFIG='Debug'
+          echo "Building $CONFIG"
+          ./gradlew ":app:assemble$CONFIG" -PreactNativeArchitectures=x86
+
+      - name: Build iOS App
+        if: ${{ matrix.platform == 'ios' }}
+        working-directory: samples/expo/ios
+        run: |
+          [[ "${{ matrix.build-type }}" == "production" ]] && CONFIG='Release' || CONFIG='Debug'
+          echo "Building $CONFIG"
+          mkdir -p "DerivedData"
+          derivedData="$(cd "DerivedData" ; pwd -P)"
+          set -o pipefail && xcodebuild \
+            -workspace sentryreactnativeexposample.xcworkspace \
+            -configuration "$CONFIG" \
+            -scheme sentryreactnativeexposample \
+            -sdk 'iphonesimulator' \
+            -destination 'generic/platform=iOS Simulator' \
+            ONLY_ACTIVE_ARCH=yes \
+            -derivedDataPath "$derivedData" \
+            build \
+            | tee xcodebuild.log \
+            | xcbeautify --quieter --is-ci --disable-colored-output
+
+      - name: Build Web App
+        if: ${{ matrix.platform == 'web' }}
+        working-directory: samples/expo
+        run: |
+          npx expo export -p web
+
+      - name: Upload logs
+        if: ${{ always() }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: build-sample-expo-${{ matrix.platform }}-${{ matrix.build-type }}-${{ matrix.ios-use-frameworks}}-logs
+          path: samples/expo/${{ matrix.platform }}/*.log

CHANGELOG.md

@@ -35,19 +35,18 @@
   });
   ```
 
-- Adds feedback form (beta) ([#4320](https://github.com/getsentry/sentry-react-native/pull/4328))
+- User Feedback From Component Beta ([#4320](https://github.com/getsentry/sentry-react-native/pull/4328))
+
+   To collect user feedback from inside your application add the `FeedbackFrom` component.
 
-  You can add the form component in your UI like:
   ```jsx
   import { FeedbackForm } from "@sentry/react-native";
   ...
   <FeedbackForm/>
   ```
-  Check [the documentation](https://docs.sentry.io/platforms/react-native/user-feedback/) for more configuration options.
 
 - Export `Span` type from `@sentry/types` ([#4345](https://github.com/getsentry/sentry-react-native/pull/4345))
 
-
 ### Fixes
 
 - Return `lastEventId` export from `@sentry/core` ([#4315](https://github.com/getsentry/sentry-react-native/pull/4315))

packages/core/src/js/feedback/FeedbackForm.styles.ts

@@ -1,52 +1,60 @@
 import type { FeedbackFormStyles } from './FeedbackForm.types';
 
+const PURPLE = 'rgba(88, 74, 192, 1)';
+const FORGROUND_COLOR = '#2b2233';
+const BACKROUND_COLOR = '#fff';
+const BORDER_COLOR = 'rgba(41, 35, 47, 0.13)';
+
 const defaultStyles: FeedbackFormStyles = {
   container: {
     flex: 1,
     padding: 20,
-    backgroundColor: '#fff',
+    backgroundColor: BACKROUND_COLOR,
   },
   title: {
     fontSize: 24,
     fontWeight: 'bold',
     marginBottom: 20,
     textAlign: 'center',
+    color: FORGROUND_COLOR,
   },
   label: {
     marginBottom: 4,
     fontSize: 16,
+    color: FORGROUND_COLOR,
   },
   input: {
     height: 50,
-    borderColor: '#ccc',
+    borderColor: BORDER_COLOR,
     borderWidth: 1,
     borderRadius: 5,
     paddingHorizontal: 10,
     marginBottom: 15,
     fontSize: 16,
+    color: FORGROUND_COLOR,
   },
   textArea: {
     height: 100,
     textAlignVertical: 'top',
+    color: FORGROUND_COLOR,
   },
   submitButton: {
-    backgroundColor: '#6a1b9a',
+    backgroundColor: PURPLE,
     paddingVertical: 15,
     borderRadius: 5,
     alignItems: 'center',
     marginBottom: 10,
   },
   submitText: {
-    color: '#fff',
+    color: BACKROUND_COLOR,
     fontSize: 18,
-    fontWeight: 'bold',
   },
   cancelButton: {
     paddingVertical: 15,
     alignItems: 'center',
   },
   cancelText: {
-    color: '#6a1b9a',
+    color: FORGROUND_COLOR,
     fontSize: 16,
   },
 };