Scroll jumping on checkbox press

[jadonhansen]

trafficstars

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