callstack / callstack/react-native-slider

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

Abierto
#767 0 comentarios 0 reacciones 0 asignados Ver en GitHub
bug report
Lenguaje dominante
TypeScript
Estrellas
1.4k
Forks
295
Merge medio
5 min
PR fusionados (30 d)
1

Descripción

## 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

```javascript
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();

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 (

{/* IMAGE */}


{/* CONTENT */}

{tier.title}


This can support {tier.soldiers} PDF soldier
{tier.soldiers > 1 ? "s" : ""} for 1 month.

{/* SLIDER */}

{
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}`,
}}
/>


{tiers.map((_, i) => (

))}

{/* AMOUNT + CURRENCY (INSIDE CARD) */}



{isCheckingMinimum && (

)}







);
}

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,
},
});
```

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

No repository file, test, or entry point is named. Start by reproducing the minimal Slider usage in an Expo project with Expo Go or a development build, then an EAS preview build; done means the standalone build no longer exits silently when the Slider is used.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
react-native, typescript
Área
mobile
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.