Scroll jumping on checkbox press #811
Description
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