React-native Android, when touchable component is put, such as TouchableOpacity in a scrollView/listView, it's very easy to get touch event when the scrollView/listView is scrolling. In react-native iOS, everything is fine. But in React Native Android, it's very annoying.
It's strange, no one ask this question before.
Has anyone seen this issue?
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow.bind(this)}
automaticallyAdjustContentInsets={false}
style={styles.listView}
/>
renderRow(rowData:rankRecord, sectionID:number, rowID:number) {
return(
<TouchableHighlight
style={{height:70}}
onPress={() => this.goToProfile(rowData.inner_id)}>
<RankCell rowData={rowData}/>
</TouchableHighlight>
);
}
Related
I normal flat list in react native and I have react native web that renders the mobile component in web
I am hiding the scrollbar with the prop showsHorizontalScrollIndicator={false},
The scrolling works fine and as expected in mobile, but in the web the scrolling is completely halted as it does not allow dragging to scroll like mobile.
<FlatList
horizontal={true}
showsHorizontalScrollIndicator={false}
renderItem={({ item }) => (
<Button
.... />
)}
keyExtractor={(....}
data={data} />
Is there any way to enable scroll behavior on the web like on mobile?
If not just have a scrollbar that only pops up when the section
Instead of showsHorizontalScrollIndicator={false}
Use overflow: hidden to the root view.
In react-native-webview library there is a prop named as scrollEnabled set it to true.
<TouchableOpacity style={styles.arrowImgBlock} onPress={__need to enable hotspot__}>
<Image
source={require('./src/images/arrow.png')}
style={styles.arrowImg}
/>
</TouchableOpacity>
i am bit worried on how can we enable hotspot in react native onPress event?please anyone help me out on this?
I'm using the Modal built into React Native (and specifically I'm using the React Native Paper variant). By default this seems to open in the middle of the screen. However if you're doing some text input in the Modal then it would be more useful if it opened either at the top of the screen, or was aware of the keyboard. However I can't find a way to get this to work.
My (simplified) modal code is:
<Portal>
<Modal visible={visibleModalNew} onDismiss={closeModalNew} contentContainerStyle={styles.modalContainer} >
<View>
<Title>New</Title>
<View>
<TextInput
mode="outlined"
label="Data"
style={{alignSelf:'center', width:'95%'}}
defaultValue={newData}
onChangeText={newData=> setNewData(newData)}
onSubmitEditing={() => handleDone()}
/>
<Button onPress={() => doSomething()}>Do something</Button>
</View>
</View>
</Modal>
</Portal>
Ah, figured out a way round. I wrapped the modal in a KeyboardAwareView, removed the visible prop from the modal, and then wrapped it all in a conditional render and put the visible prop there instead. Seems to work as hoped.
I want to create a box of Terms and conditions in which data can be scrolled. I tried it using TextInput like below but it doesn't scrolls.
<TextInput
multiline={true}
value={data}
editable={false}
scrollEnabled={true}
style={styles.termsAndConditionsStyle}
/>
second alternative
I also tried it this way, it works but it gives me a yellow screen warning which says - You are binding a method component to the component. React does this for you automatically in a high performance way, so you can safely remove this call. See ScrollView.
<ScrollView style={styles.termsAndConditionsStyle}>
<Text>
// some large text
</Text>
</ScrollView>
Solution - Actually I imported ScrollView from react-native-gesture-handler instead of react-native
Did you try <ScrollView>?.
You can use this to create scrolling functionality.
well its pretty simple, just warp your components in <ScrollView> ... </ScrollView>and
style it as per your need.
if height of components together exceeds for <ScrollView>, it becomes scrollable.
see docs at react native
EDIT:
Its importing mistake, import scrollview from react-native rather than react-native-gesture-handler
render() {
return(
<View style={styles.container}>
<ScrollView>
<Text>
Add your text
</Text>
</ScrollView>
</View>
);
}
EDIT:
Its importing mistake, import scrollview from react-native rather than react-native-gesture-handler
I'm using react-konva in my webapp and on the desktop browser it works perfectly, but on the mobile browser the onClick does not work.
<Text
key={index}
index={index}
x={position[0]}
y={position[1]}
fontSize={unit}
width={unit}
text={mark}
fill={fill}
fontFamily={'Helvetica'}
align={'center'}
onClick={ (event) => {
alert("Some text...")
}}
/>
Is there a way to get this to work on mobile or do I need to find a replacement for react-konva text?
You have to use a special mobile event: onTap.
https://konvajs.github.io/docs/events/Mobile_Events.html
So in your case just use onClick and onTap together.
<Text
{...attrs}
onClick={this.handleClick}
onTap={this.handleClick}
/>