On iOS Markers are Visible on Tooltip. I think Tooltip should be always on the top. Did I missed something, or it is a popular issue in react-native-maps ?
<_MapView
style={[{flex: 1}, this.props.style]}
showsPointsOfInterest={true}
region={region}
{...this.props}
>
{annotations.map((marker, ind) => (
<_MapView.Marker
key={ind}
image={marker.image}
coordinate={marker.latlng}
ref={ref => { this.markers[ind] = ref }}
onPress={() => {
if (this.activeMarker) {
this.activeMarker.closeCallout()
}
this.markers[ind].showCallout()
}}
>
<_MapView.Callout style={StyleSheet.mapView.callOut} onPress={marker.rightCalloutView}>
<TouchableHighlight
underlayColor="transparent"
>
<View style={StyleSheet.mapView.toolTip}>
<Text>{marker.title}</Text>
<View>
<Icon name="chevronRight" />
</View>
</View>
</TouchableHighlight>
</_MapView.Callout>
</_MapView.Marker>
))}
</_MapView>
Related
I have a FlatList that is pulling in contact from a user's phone. I want to give each contact that doesn't have an avatar a random color from an array of hex color codes which I call "CircleColors".
This is what I'm trying:
<FlatList
data={filteredContacts}
renderItem={({ item }) => (
<View key={uuidv4()} style={styles.contactItem}>
<View style={item.avatar && styles.contactAvatar}>
{item.avatar && (
<Image
style={{
borderRadius: 50,
width: 50,
height: 50,
}}
source={{
uri: item.avatar,
}}
/>
)}
{!item.avatar && (
<ContactItem
itemData={item.name}
color={
CircleColors[
Math.floor(Math.random() * CircleColors.length)
]
}
/>
)}
</View>
<View>
<Text style={styles.contactTxt}>{`${item.name}`}</Text>
<Text
style={
item.usernames.length
? styles.contactUser
: styles.noUser
}
>
{item.usernames.length ? `$${item.usernames}` : null}
</Text>
</View>
</View>
)}
/>
And here is the code for the contact item:
const ContactItem = ({ itemData, color }) => {
return (
<View
style={[
styles.userCircle,
{
backgroundColor: color,
},
]}
>
<Text style={styles.userCircleTxt}>
{itemData.substr(0, 1).toUpperCase()}
</Text>
</View>
);
};
The problem is that on scroll, the flatlist rerenders each item, and the colors change each time. Is there a way to persist the original random color given to each item background, even on scroll?
Any help would be greatly appreciated.
Thanks!
the problem come with this line
<View key={uuidv4()} style={styles.contactItem}>
the key always change, you should pass index to key
renderItem={({ item,index }) => (
<View key={index} style={styles.contactItem}>
Pass key as index and dynamic background color styles in array like below -
renderItem={({ item,index }) => (
<View key={index} style={[{item.background},styles.contactItem]}>
icons are not coming.Alert is working.Cannot render the function icons inside flatlist.
pls help.I need your help.
myCode:
<FlatList
data={this.state.data}
//extraData={}
keyExtractor={(item, index) => {
return index.toString();
}}
renderItem={({ item }) =>
<View style={styles.cartView}>
<TouchableOpacity style={styles.touchView} onPress={() => Linking.openURL(item.app_link)}>
<Image style={styles.cartLogo} source={{ uri: item.app_resim }} />
</TouchableOpacity>
<Text style={styles.mainViewText}>{item.app_name}</Text>
<View style={styles.mainViewAltBar}>
<TouchableOpacity >
<Icon name="refresh-outline" size={30} color="#404040" />
</TouchableOpacity>
{this.appSet(item.app_namep)}
</View>
</View>
} />
appSet(value){
AppInstalledChecker.isAppInstalledAndroid(value)
.then((isInstalled) => {//not show icons but alert working
if (isInstalled) {
return (<Icon name="checkmark-outline" size={30} color="#404040" />);
} else {
return (<Icon name="close-outline" size={30} color="#404040" />);
//alert(isInstalled);
}
})
}
Thank you.
I currently have it set such that when the user opens the keyboard it scrolls to the bottom when the scroll view shrinks.
<ScrollView
contentContainerStyle={{ flexGrow: 1 }}
ref={(ref) => (this.scrollView = ref)}
>
<TextInput
onFocus = {this.scrollDown}
/>
scrollDown = () => {
this.scrollView.scrollToEnd();
}
This works on IOS perfectly fine, but doesn't seem to be working on Android.
Android:
https://imgur.com/a/9HfaCMd
iOS:
https://imgur.com/a/dB1WeoW
--Update--
After looking your record, it doesn't seems caused by scrollToEnd.
What you need may be KeyboardAvoidingView
It can automatically adjust either its height, position, or bottom padding based on the keyboard height.
const keyboardVerticalOffset = Platform.OS === 'ios' ? 40 : 0 //update 2 something like this
...
<KeyboardAvoidingView
behavior='position' //update 2
keyboardVerticalOffset={keyboardVerticalOffset} //update 2
style={styles.container}
>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.inner}>
<Text style={styles.header}>Header</Text>
<TextInput placeholder="Username" style={styles.textInput} />
<View style={styles.btnContainer}>
<Button title="Submit" onPress={() => null} />
</View>
</View>
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
I am new to React Native and I am having problems with the header in a FlatList.
The header re-renders as soon as I start to scroll, this creates a flickering effect on the images I have in the header.
I have been searching for an answer everywhere but I have not find a posible solution.
¿how could I configure it to stop re-rendering the header when scrolling the list?
....
const Item = ({ title }) => {
return (
<View style={styles.card}>
<Text style={styles.title}>{title}</Text>
</View>
);
};
const listHeader = () => {
const categoriesButtons = categories.map(cat => (
<CategoryButton
text={cat.name}
icon={cat.code}
key={cat.code}
onPress={() => {
//#Todo logic to filter promotions accordingly with the category pressed
}}
/>
));
return (
<View>
<View style={styles.filtersContainer}>
<ImageBackground
source={images.bgShape}
style={{ width: '100%', height: 140 }}
resizeMode="stretch"
>
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
{categoriesButtons}
</ScrollView>
</ImageBackground>
</View>
<View style={styles.breadcrumbContainer}>
<Breadcrumbs navigation={navigation} stack={routes} />
</View>
<View style={styles.titleContainer}>
<Text style={sharedStyles.titleText} id="main-title">
¡{totalOfPromotions} promociones activas en Medellín!
</Text>
</View>
</View>
);
};
return (
<LinearGradient
colors={[Colors.BG_START, Colors.BG_END]}
style={styles.mainContainer}
>
{loading ? (
<ActivityIndicator size="large" color="#000000" />
) : (
<FlatList
data={promos}
renderItem={({ item }) => <Item title={item.title} />}
keyExtractor={(item, index) => index.toString()}
ListHeaderComponent={listHeader}
showsVerticalScrollIndicator={false}
onEndReached={showPromos}
onEndThreshold={0.7}
/>
)}
</LinearGradient>
);
};
listHeader() function is being called more than once because in Flatlist tag should be called as
<FlatList
data={promos}
renderItem={({ item }) => <Item title={item.title} />}
keyExtractor={(item, index) => index.toString()}
ListHeaderComponent={listHeader()}
showsVerticalScrollIndicator={false}
onEndReached={showPromos}
onEndThreshold={0.7}
/>
Use () while assigning ListHeaderComponent prop. By this way, function will be invoked only once.
Hope this help you. Enjoy coding!
From what I can see in the code you provided that you are defining the ListHeader component inside your other parent component which will redfine it on every render.
Moving it might outside the parent component might help.
You can fix your flickering issue by memoizing your ListHeaderComponent.
In your case just wrap your component with useMemo:
const listHeader = useMemo(() => {
...
})
I'm trying to figure out how to show the whole list in more than 2 FlatList.
If I use 2 flat lists on One screen, It can't show correctly. Because of the one flat list of above, the height of FlatList of the bottom can not show the whole list I guess.
Here's my code.
Item List
// Hits.js
<FlatList
data={hits}
onEndReached={this.onEndReached}
keyExtractor={(item, index) => index.toString()}
keyboardShouldPersistTaps={'handled'}
renderItem={({item}) => {
return (
<Fragment>
{
item.city ? imgUrl = require('...') : imgUrl = require('...')
}
<TouchableOpacity
onPress={() => item.city ? this.props.moveToDetail(item.name) : this.props.moveToList(item.name)}
style={styles.separator}>
{
this.searchListRender(item, imgUrl)
}
</TouchableOpacity>
</Fragment>
);
}}
// getItemLayout={(data, index) => (
// {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
// )}
/>
Algolia Search
<InstantSearch
appId={ALGOLIA_APP_ID}
apiKey={ALGOLIA_API_KEY}
indexName={ALGOLIA_INDEX_NAME}
>
<View
style={{
flexDirection: 'row',
backgroundColor: '#f90631',
padding: 10
}}
>
<SearchBox _onKeyPressed={this._onKeyPressed}/>
</View>
{
flag ?
<Fragment>
<View>
<Text>Tags</Text>
<Index indexName={ALGOLIA_INDEX_NAME}>
<Hits moveToList={this.moveToList}/>
</Index>
</View>
<View>
<Text>Stores</Text>
<Index indexName="stores">
<Hits moveToDetail={this.moveToDetail}/>
</Index>
</View>
</Fragment>
: null
}
</InstantSearch>
try this,
<View style={{flex:1}}>
<View style={{flex:1}}>
.....//FLatlist 1
</View>
<View style={{flex:1}}>
.....//FLatlist 2
</View>
</View>