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.
Related
i have problem with my flat list horizontal when open screen start from first item then it scroll to another item when
i use scroll view with map it fix the problem but i want to use flat list
this is what should happend it should open to first item
this is what realy happend after open screen it is auto scroll to another item
<FlatList
contentContainerStyle={{ padding: 10 }}
showsHorizontalScrollIndicator={false}
data={this.state.BrandList}
renderItem={this._renderListItem}
keyExtractor={(item, index) => index.toString()}
horizontal
/>;
in RTL layout you can use this way for solving this problem:
<FlatList
nestedScrollEnabled
// for better show data in list you should reverse data
data={Calendar.reverse()}
keyExtractor={item => item.visit_day_identity}
renderItem={renderItem}
horizontal
pagingEnabled
showsHorizontalScrollIndicator={false}
snapToEnd
ref={element}
// this attr is scrolled to start
inverted={true}
/>
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've created a Modal in Onsen which works great, but sometimes my content spans beyond the page boundaries. The Modal does not naturally support scrolling and the <Scrollable /> element is not supported by the React support in Onsen so I've attempted to make a <section/> scrollable like so:
<Modal isOpen={this.state.selected.title !== undefined} onDeviceBackButton={()=> this.setState({selected: {}})}>
<section style={{margin: '16px', overflow: 'auto', height: '100%'}}>
<h2>{this.state.selected.title}</h2>
{myReallyLongContent}
</section>
</Modal>;
This appears to work when testing on my desktop browser (in "Chrome Mobile testing"); however, when testing on my actual mobile device, the scrolling does not work (via touch swiping). Is there a workaround?
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>
);
}