callstack / callstack/react-native-slider

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

Đang mở
#767 0 bình luận 0 reaction 0 người được giao Xem trên GitHub
bug report
Ngôn ngữ chính
TypeScript
Star
1.4k
Fork
295
Merge trung bình
5 phút
Pull request đã merge (30 ngày)
1

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Không có tệp, bài kiểm thử hoặc entry point nào trong repository được nêu tên. Hãy bắt đầu bằng cách tái hiện cách sử dụng Slider tối thiểu trong một dự án Expo với Expo Go hoặc development build, sau đó là EAS preview build; hoàn tất khi standalone build không còn âm thầm thoát khi sử dụng Slider.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
react-native, typescript
Lĩnh vực
mobile
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
35/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.