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}
/>
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.
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 just want to toggle SearchButton and SearchIcon , I use following code
searchBarButton() {
Actions.refresh();
this.setState({ showSearchBar: !this.state.showSearchBar });
}
render() {
if (this.state.showSearchBar) {
return (
<Header>
<View style={styles.searchHolder}>
<Item style={styles.searchBar}>
<Icon name="ios-search" />
<Input placeholder="Search" />
</Item>
<Button style={styles.searchButton} onPress={this.searchBarButton}>
<Text>Search</Text>
</Button>
</View>
</Header>
);
}
return (
<Header>
<Button onPress={() => this.searchBarButton()} transparent>
<Icon name="search" style={styles.bigblue} />
</Button>
</Header>
);
}
So basically It is very fast initially , But when my scene contains lots of items in flat List , There is like 1 to 2 seconds delay between toggle.I guess its due to re-rendering all items in page.
So How can I toggle this in more easier and efficient way without Re rendering whole page without using state
I think you have to hide one of them by using style prop.
Just render both first, toggle one of them to be hidden(by using state),
<Header>
<View style={[this.state.showSearchBar && styles.hidden]}>Button</View>
<View style=[{!this.state.showSearchBar && styles.hidden}]>Icon</View>
</Header>
do not remove them from virtual dom(I don't know what to call it in mobile) completely
I'd recommend you to grab some UI library. Take a look at this: https://react-bootstrap.github.io/components.html#utilities
You can just trow you your searchbar code in this
<Collapse in={this.state.showSearchBar}>
...
</Collapse>
And everything is taken care of very efficiently.
You just need to trow your button in an operator {!showSearhBar && <Component/>}
Also use react dev tools to check what re-renders
I'm looping through a native-base <Card dataArray={data} /> component rendering some components with Buttons. It was working alright (Listed all components as expected) but I soon added an onPress event to the Button and got an automatic onPress bug, weird enough it runs (clicks hence runs the bounded function) only once while components suppose to render with those buttons are many.
//- Inside constructor I bind testLogs
this.testLogs = this.testLogs(this);
//- Outside render...
testLogs(value) {
console.log(value);
}
//- Inside return of render()
<Card dataArray={devices}
renderRow={(theme) =>
<CardItem>
{(theme.picture) ?
<Thumbnail size={100} source={theme.picture} />:
<Thumbnail size={100} source={defaultImage} />
}
<Text style={{fontSize: 16}}> {theme.name} </Text>
<Button primary style={{marginRight: 10}}> Command </Button>
<Button success onPress={this.testLogs} > Edit </Button>
</CardItem>
}>
</Card>
I should also say all the rendered components don't run the onPress={this.testLogs} bound function when i click them after they render.
What could be triggering this? Or is loop rendering not the best approach to this?
Thank you.
Use onPress={this.testlogs.bind(this)}
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>
);
}