Skip to content

Scroll jumping on checkbox press #811

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jadonhansen opened this issue May 20, 2025 · 4 comments
Open

Scroll jumping on checkbox press #811

jadonhansen opened this issue May 20, 2025 · 4 comments

Comments

@jadonhansen
Copy link

Hey, love the library you've put together here!

I am having an issue on:

"expo": "~52.0.36",
"react-native": "0.76.7",
"react-native-bouncy-checkbox": "^4.1.2",

where my scrollview is jumping up and down when I press down on any of the checkbox items or bring the checkboxes into view in the scrollview.
It was working fine before I upgraded expo and RN.

Implementation:

import React, { ReactNode, useEffect, useState } from "react";
import { StyleSheet, Text, View, TextInput } from "react-native";
import BouncyCheckbox from "react-native-bouncy-checkbox";

import { useCardsManager } from "../providers/CardsProvider";
import { presetCategoryArr } from "../helpers/images";
import { usePreferencesManager } from "../providers/PreferencesProvider";
import colorCodes from "@/constants/Colors";

interface CategoryCheckboxesProps {
	category: string;
	setCategory(category: string): void;
}

export default function CategoryCheckboxes(props: CategoryCheckboxesProps) {
	const { theme } = usePreferencesManager();

	const styles = StyleSheet.create({
		checkbox: {
			backgroundColor: "transparent",
			borderWidth: 0,
			padding: 0,
			margin: 0,
			marginBottom: 15,
		},
		checkboxText: {
			fontWeight: "500",
			color: colorCodes.primaryText[theme],
			textDecorationLine: "none",
		},
		categoryList: {
			paddingTop: 10,
			paddingLeft: 30,
		},
		categoryInput: {
			marginLeft: 40,
			marginRight: 20,
			marginBottom: 15,
			padding: 10,
			borderColor: colorCodes.inputBorder[theme],
			borderRadius: 10,
			borderWidth: 1,
			color: colorCodes.primaryText[theme],
		},
		noCategories: {
			marginLeft: 10,
			fontWeight: "500",
			color: colorCodes.secondaryText[theme],
		},
	});

	const { category, setCategory } = props;

	const { categories } = useCardsManager();
	const [allCategories, setAllCategories] = useState<string[]>([]);
	const [categoryType, setCategoryType] = useState<"existing" | "new">("existing");

	useEffect(() => {
		const catArr = [...new Set([...categories, ...presetCategoryArr])];
		setAllCategories(catArr);

		if (catArr.includes(category)) {
			setCategoryType("existing")
		} else {
			setCategoryType("new");
		}
	}, [categories]);

	const getCategoriesList = (): ReactNode[] | ReactNode => {

		if (allCategories.length <= 0) return <Text style={styles.noCategories}>No existing categories</Text>;

		return allCategories.map((el) => {
			return (
				<BouncyCheckbox
					key={el}
					text={el}
					size={20}
					style={styles.checkbox}
					textStyle={styles.checkboxText}
					fillColor={colorCodes.success[theme]}
					onPress={() => setCategory(el)}
					isChecked={el === category ? true : false}
					useBuiltInState={false}
				/>
			);
		});
	}

	return (
		<View>
			<BouncyCheckbox
				text="New category"
				size={20}
				style={styles.checkbox}
				textStyle={styles.checkboxText}
				fillColor={colorCodes.success[theme]}
				onPress={() => setCategoryType("new")}
				isChecked={categoryType == "new"}
				useBuiltInState={false}
			/>
			{categoryType == "new" && (
				<TextInput
					placeholderTextColor={colorCodes.secondaryText[theme]}
					style={styles.categoryInput}
					value={category}
					placeholder="e.g. Shopping"
					clearButtonMode="while-editing"
					accessibilityLabel="Enter new category"
					onChangeText={(text) => setCategory(text)}
					maxLength={20}
				/>
			)}
			<BouncyCheckbox
				text="Existing category"
				size={20}
				style={styles.checkbox}
				textStyle={styles.checkboxText}
				fillColor={colorCodes.success[theme]}
				onPress={() => setCategoryType("existing")}
				isChecked={categoryType == "existing"}
				useBuiltInState={false}
			/>
			{categoryType == "existing" && <View style={styles.categoryList}>{getCategoriesList()}</View>}
		</View>
	);
}

Let me know if you need anything else from me

@WrathChaos
Copy link
Owner

Hello,
Can you provide me a reproducible example or even a quick video helps? :)

@jadonhansen
Copy link
Author

jadonhansen commented May 21, 2025

Hi! Here's a google drive link to the screen recording since GitHub seemed to have an issue with the file:

https://drive.google.com/file/d/1oi3-dyFBfnWBn4C1e5wXxqZmjZrYTR64/view?usp=sharing

It should be quite noticeable the jumping compared to normal smooth scrolling

@jadonhansen
Copy link
Author

@WrathChaos have you been able to have a look at this yet? Anything you need from me?

@jadonhansen
Copy link
Author

This happens on expo-checkbox too when in a scrollview, so I doubt it's a problem with this package.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants