callstack / callstack/react-native-slider

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

未关闭
#767 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
bug report
主要语言
TypeScript
星标
1.4k
派生
295
平均合并
5 分钟
30 天内合并 PR
1

描述

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

贡献指南

打开贡献指南

调研方向

没有指定任何仓库文件、测试或入口点。先在 Expo 项目中使用 Expo Go 或 development build 重现 Slider 的最小用法,然后再使用 EAS preview build;当使用 Slider 时 standalone build 不再静默退出,即表示完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
react-native, typescript
领域
mobile
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。