I have a couple of views that I have implemented a way for the user to drag them around the screen to place them where they want them. Each of these views has an editable text field inside of them. (Think Sticky notes).
In order to put the sticky notes where the user wants them, I use the transform style property to translate the X and Y position. This works very well until I put these sticky notes in a scroll view.
It works as expected on IOS. On android whenever the user edits or focuses on the editable fields in the sticky notes the scroll view scrolls to the top of the screen. I believe this is because on android the ScrollView is not aware of the changed position of the TextInput due to the transform style property.
I've searched through the documentation of ScrollView and haven't even found mention of the auto-scroll on text edit feature. Let alone how to disable it.
Is there a way to prevent a ScrollView from auto-scrolling to a TextInput when it is focused or edited?
Is there a way to let the ScrollView know that the TextInput has moved?
Here is a minimal example of a screen with this problem:
import * as React from 'react';
import {TextInput, StyleSheet, ScrollView, View} from 'react-native';
export default function BadAutoScrollScreen(props) {
return (
<View style={styles.container}>
<ScrollView style={styles.scroll} contentContainerStyle={styles.contentContainer}>
<View style={styles.transformedView}>
<TextInput>Some Text to Edit</TextInput>
</View>
</ScrollView>
</View>
);
}
const styles = StyleSheet.create({
container: {
width: '100%',
height: '100%',
},
scroll: {
width: '100%',
height: '100%',
backgroundColor: 'black',
position:'absolute',
},
contentContainer: {
paddingTop: 15,
height: 2000,
},
transformedView: {
width:'100%',
height:100,
justifyContent: 'center',
backgroundColor: 'orange',
borderRadius: 15,
alignItems: 'center',
transform: [
{translateY: 800},
]
},
});