'ScrollView jump up and down on first click or focus
I am having trouble making this work and I have no Idea why this is happening.
I am using @alentoma/react-native-selectable-text inside a scrollView but when the text get focus or I click on it. The scrollview bounce up and down once.
@alentoma/react-native-selectable-text is using ReactTextView on android.
Here is the code
<ScrollView
ref={(c) => {
if (c) {
ref.current = c;
scrollTo();
}
}}
onScrollBeginDrag={() => {
clearTimeout(onScrollTimeout.current);
scrollable.current = true;
}}
onScrollEndDrag={() => {
clearTimeout(onScrollTimeout.current);
onScrollTimeout.current = setTimeout(() => {
scrollable.current = false;
}, 1500);
}}
onScroll={({ nativeEvent }) => {
if (!viewPlayer && scrollable.current) {
onScroll(nativeEvent);
} else return false
}}
contentOffset={{ y: state.content.scrollPos, x: 0 }} contentContainerStyle={!viewPlayer ? { paddingBottom: 400, paddingTop: 150, minHeight: windowHeight } : {}}
>
{showAds && !viewPlayer ? (
<Banner bannerSize="smartBannerPortrait" />
) : null}
<View style={{ minHeight: windowHeight + (!viewPlayer ? 500 : 0), flexDirection: 'row' }} incBackGround={false}>
<Text
key={state.content.key + "Text"}
style={{
width: windowWidth,
padding: 0,
margin: 0,
minHeight: windowHeight + (!viewPlayer ? 500 : -60),
paddingTop: (viewPlayer ? 60 : 0),
flex: 1,
flexWrap: 'wrap'
}} onPress={txtClick}>
<SelectableText
key={state.content.key}
highLights={detaliItemSettings.detaliItemSettingsEdit?.filter(x => x.editWith.length > 0 && x.highlightColor && x.highlightColor.length > 1).map(x => { return { text: x.editWith, color: x.highlightColor } })}
menuItems={globalContext.currentLanguage.novelReaderTextSelectionMenus.map(x => x.text)}
onSelection={(item) => {
disableClick.current = false;
handleContextMenu(item);
}}
onLongPress={() => {
disableClick.current = true
}}
onPress={txtClick}
contentWidth={windowWidth}
value={state.content} />
</Text>
</View>
</ScrollView>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
