EAS preview crashes when using @react-native-community/slider without explicit install

Non viene indicato alcun file del repository, test o punto di ingresso. Inizia riproducendo l’utilizzo minimo di Slider in un progetto Expo con Expo Go o una development build, quindi con una EAS preview build; il lavoro è completato quando la standalone build non si chiude più silenziosamente quando viene usato Slider.

Environment

• react-native info output:

System:
  OS: macOS (Apple Silicon)
Binaries:
  Node: 20.x
SDKs:
  iOS SDK: Xcode 15.x
npmPackages:
  react: 19.1.0
  react-native: 0.81.5
  @react-native-community/slider: ^5.0.1

• are you using the new architecture?
  Yes (Expo SDK 54 with Hermes enabled)

• which version of react & react-native are you using?
  react: 19.1.0
  react-native: 0.81.5

Description

When using @react-native-community/slider in an Expo project:

• The app works correctly in Expo Go / development build

• The app crashes immediately in an EAS preview / standalone build

• No JS error is shown; the app exits silently

This happens even with a minimal usage of the Slider component.

Commenting out the Slider component makes the preview build work again.

The issue appears to be that Expo Go includes the native module by default, while standalone builds require the package to be explicitly installed and prebuilt. This difference is not obvious and leads to a runtime crash.

Reproducible Demo

  import React, { useEffect, useRef, useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  Animated,
  ActivityIndicator,
} from "react-native";
import Slider from "@react-native-community/slider";
import { useFormContext } from "react-hook-form";
import { colors, Fonts } from "@/constants/theme";
import CurrencyPicker from "@/components/CurrencyPicker";
import { FormTextInput } from "@/components/shared/FormTextInput";
import { CURRENCIES } from "@/utils/currencies";
import type {
  Tier,
  FormValues,
} from "@/types/donation/types";

type Props = {
  tiers: Tier[];
  paymentTab: "monthly" | "onetime";
  isCheckingMinimum?: boolean;
  helperText?: string;
};

export default function TierSlider({
  tiers,
  paymentTab,
  isCheckingMinimum,
  helperText,
}: Props) {
  const { setValue, clearErrors, control } =
    useFormContext<FormValues>();

  const [index, setIndex] = useState(0);

  const tier = tiers[index];
  const opacity = useRef(new Animated.Value(1)).current;

  const amountField =
    paymentTab === "monthly" ? "monthlyAmount" : "oneTimeAmount";

  const currencyField =
    paymentTab === "monthly" ? "monthlyCurrencyId" : "oneTimeCurrencyId";

  useEffect(() => {
    Animated.sequence([
      Animated.timing(opacity, {
        toValue: 0,
        duration: 120,
        useNativeDriver: true,
      }),
      Animated.timing(opacity, {
        toValue: 1,
        duration: 180,
        useNativeDriver: true,
      }),
    ]).start();

    setValue(amountField, String(tier.amount), {
      shouldDirty: true,
      shouldValidate: true,
    });

    clearErrors();
  }, [index, tier.amount, amountField, setValue, clearErrors, opacity]);

  if (!tiers || tiers.length === 0) {
    console.error("DONATE_TIERS is empty!");
    return null;
  }

  return (
    <View style={styles.card}>
      {/* IMAGE */}
      <View style={styles.imageWrapper}>
        <Animated.Image
          source={tier.image}
          style={[styles.image, { opacity }]}
          resizeMode="cover"
        />
      </View>

      {/* CONTENT */}
      <View style={styles.content}>
        <Text style={styles.title}>{tier.title}</Text>

        <Text style={styles.desc}>
          This can support {tier.soldiers} PDF soldier
          {tier.soldiers > 1 ? "s" : ""} for 1 month.
        </Text>

        {/* SLIDER */}
        <View style={styles.sliderWrapper}>
          <Slider
            style={{ height: 40 }}
            minimumValue={0}
            maximumValue={tiers.length - 1}
            step={1}
            value={index}
            onValueChange={setIndex}
            onSlidingComplete={(value) => {
              setIndex(value);
            }}
            minimumTrackTintColor={colors.orange[500]}
            maximumTrackTintColor="#120A06"
            thumbTintColor={colors.orange[400]}
            tapToSeek
            accessibilityLabel="Donation tier selector"
            accessibilityValue={{
              min: 0,
              max: tiers.length - 1,
              now: index,
              text: `${tier.title}, ${tier.amount}`,
            }}
          />

          <View style={styles.dots}>
            {tiers.map((_, i) => (
              <View key={i} style={styles.dot} />
            ))}
          </View>
        </View>

        {/* AMOUNT + CURRENCY (INSIDE CARD) */}
        <View style={styles.amountRow}>
          <View style={{ flex: 0.6 }}>
            <FormTextInput
              name={amountField}
              keyboardType="numeric"
              placeholder="Enter amount"
              helperText={helperText}
              helperTextColor={colors.primary[500]}
            />
            {isCheckingMinimum && (
              <ActivityIndicator size="small" color={colors.gray[400]} />
            )}
          </View>

          <View style={{ flex: 0.4 }}>
            <CurrencyPicker
              name={currencyField}
              control={control}
              data={CURRENCIES}
              placeholder="Currency"
            />
          </View>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    borderRadius: 22,
    backgroundColor: "#1A0F0A",
    overflow: "hidden",
    borderWidth: 1.5,
    borderColor: "#2A1A12",
  },
  imageWrapper: {
    height: 260,
  },
  image: {
    width: "100%",
    height: "100%",
  },
  content: {
    padding: 16,
  },
  title: {
    textAlign: "center",
    color: colors.primary[500],
    fontSize: Fonts.size.lg,
    fontWeight: Fonts.weight.semibold,
  },
  desc: {
    textAlign: "center",
    marginTop: 6,
    color: colors.gray[400],
    fontSize: Fonts.size.sm,
  },
  sliderWrapper: {
    marginTop: 14,
  },
  dots: {
    flexDirection: "row",
    justifyContent: "space-between",
    paddingHorizontal: 10,
    marginTop: -4,
  },
  dot: {
    width: 6,
    height: 6,
    borderRadius: 3,
    backgroundColor: "#3A2A20",
  },
  activeDot: {
    backgroundColor: colors.orange[500],
  },
  amountRow: {
    flexDirection: "row",
    gap: 8,
    marginTop: 16,
  },
});