I'm trying to build a LIVE map and I noticed that the zIndex of the react-native mapbox gl doesn't work when the render is in a different state. When you render something after, it stays underneath. Is there anyway for certain things to always be on top? For example, callback should always be on top no matter what.
<MapboxGL.MapView
style={{flex: 1}}
styleURL={'mapbox://styles/gigajungkyu/ckt962t3a19zh17pfq1sr7z3f'}
pitchEnabled={false}
rotateEnabled={false}>
<MapboxGL.PointAnnotation
id={'1'}
key={'1'}
style={{zIndex: 1}}
coordinate={[-122.849, 49.1]}>
<TouchableOpacity
style={{zIndex: 1}}
onPress={() => setDisplay((prevState) => !prevState)}>
<View
style={{width: 100, height: 100, backgroundColor: 'red'}}></View>
</TouchableOpacity>
<MapboxGL.Callout title={'You'} />
</MapboxGL.PointAnnotation>
{display && (
<MapboxGL.PointAnnotation
id={'2'}
key={'2'}
style={{zIndex: 99999999}}
coordinate={[-103.349, 49.1]}>
<TouchableOpacity style={{zIndex: 5}}>
<View
style={{
width: 100,
height: 100,
backgroundColor: 'blue',
}}></View>
</TouchableOpacity>
<MapboxGL.Callout title={'You'} />
</MapboxGL.PointAnnotation>
)}
</MapboxGL.MapView>
Related
I am having trouble on Android where the images are flashing only on Android and I cannot seem to find a solution.
I have attached a video below to show the problem
Here is my Flatlist
<FlatList
ListEmptyComponent={_listEmptyComponent}
initialNumToRender={2}
keyExtractor={(item) => item.key}
renderItem={renderItem}
data={walletData}
contentContainerStyle={{ flexGrow: 1, justifyContent: 'flex-start', paddingBottom: 80, marginTop: 20 }}
style={{ padding: 5, marginTop: 40, backgroundColor: '#ffff' }} />
Here is my renderItem Function:
const renderItem = ({ item }: any) => { return (
<View style={{marginTop: 20}}>
<Card title={item.category} logo={item.logoImage} name={item.name} address={item.shortAddress} background={item.backgroundImage} Key={item.chainId} Stamps={item.schemes} Vouchers={item.vouchers} />
</View>
)
}
Here is the Card Image part:
<View style={styles.top}>
{/* Background image */}
{loading &&
<View style={{ justifyContent: 'center', flexDirection: 'row', width: '100%' }}>
<ActivityIndicator size="small" color="black" />
</View>
}
{
<FastImage
style={{
height: Dimensions.get('window').height / 4.5,
width: '100%',
borderRadius: 12
}}
onLoadStart={() => onLoading(true)}
onLoadEnd={() => onLoading(false)}
source={{
uri: background,
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.cover}>
{/* Logo image */}
<View style={styles.test} >
<Image
style={styles.imageTop2}
source={{ uri: logo }}
onLoadStart={() => onLoading(true)}
onLoadEnd={() => onLoading(false)}
/>
</View>
</FastImage>
}
</View>
Video Link: https://www.youtube.com/shorts/_v758YEg9iY
Some logic cause screen to rerender 2 times. iOS caches pre-loaded images and use cached images for the next rerender without refetch them.
Android doesn't cache t images and fetches them again for the next rerender which takes some milliseconds to be ready and results in flickering.
The solution is to avoid a second rerender or wait until all data fetching finishes before app render a FlatList.
Try to remove this state change.
...
onLoadStart={() => onLoading(true)}
onLoadEnd={() => onLoading(false)
...
I would like my button (the blue block across the screen) to be much smaller and in the bottom right corner of the screen. How do I do this with styling in react-native?
Here is my button at the moment:
App.js
render() {
return (
<View>
<View style={{flexDirection:'row', alignItems:'center'}}>
<Text>Plan Name: </Text>
<TextInput style={{height: 40, borderColor: 'black', width: 120, borderWidth: 0.8}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}/>
</View>
<MyDatePicker/>
<Button style={{ width: 50, alignSelf: "flex-end" }}
title="Add Plan"
onPress={() =>
this.props.navigation.navigate('PlanScreen')}>
</Button>
</View>
)
}
}
Do you want it to be right of the button that is hidden if so you can give it a flexDirection of row and give flex to each wrapper so that it adjust itself
something like this.
<View style={{flexDirection: 'row', flex: 1}}>
<View style={{flex: 0.8}}><Button></Button></View>
<View style={{ flex: 0.2}}><Button></Button></View>
</View>
If you want it to be on separate line below the button that is hidden you can do
<View>
<Button style={{ width: 50, alignSelf: "flex-end" }}></Button>
</View>
and you can adjust the width accordingly.
You can update your render function as
render() {
return (
<View style={{flex: 1}}>
<View style={{flexDirection:'row', alignItems:'center'}}>
<Text>Plan Name: </Text>
<TextInput style={{height: 40, borderColor: 'black', width: 120, borderWidth: 0.8}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}/>
</View>
<MyDatePicker/>
<View style={{ width: 50, alignSelf: "flex-end">
<Button
title="Add Plan"
onPress={() =>
this.props.navigation.navigate('PlanScreen')}>
</Button>
</View>
</View>
)
}
}
I have a problem when I try to render an image inside the React Native Maps Callout.
The image does not render.
{this.state.database.map((route, idx) => {
if (route.Image) {
return (
<MapView.Marker
coordinate={{ latitude: Number.parseFloat(route.Latitude), longitude: Number.parseFloat(route.Longitude) }}
key={idx}
image={img_pin}
ref={(ref) => this.marker = ref}
>
<MapView.Callout tooltip style={{ flex: 1, backgroundColor: 'white' }}>
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 1 }}>
<Text style={styles.textCallout}>Latitude: {route.Latitude}</Text>
<Text style={styles.textCallout}>Longitude: {route.Longitude}</Text>
<Text style={styles.textCallout}>Status: <Icon name={route.Status === 1 ? 'checkmark-circle' : 'close-circle'} style={{ color: route.Status === 1 ? 'green' : 'red', fontSize: 16 }} /> </Text>
<Text style={styles.textCallout}>Velocidade: {route.Speed} km/h</Text>
</View>
<View style={{ margin: 5 }}>
<Image source={{ uri: `data:image/gif;base64,${route.Image}` }} style={{ width: 150, height: 100 }} />
</View>
</View>
</MapView.Callout>
</MapView.Marker>
);
}
})}
Image error don't render inside Callout
"react-native": "^0.57.8",
"react-native-maps": "^0.24.2",
Use Image inside Text component
<Text> <Image style={{ height: 100, width:100 }} source={{ ... }} resizeMode="cover" /> </Text>
Another workaround by using WebView. I think is the proper solution for this right now.
<View>
<WebView style={{ height: 100 , width: 230, }} source={{ uri: ... }} />
</View>
Make sure your route.image is in the form of url schema,
exampleData
source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
if correct,
GIF and WebP support on Android
When building your own native code, GIF and WebP are not supported by default on Android.
You will need to add some optional modules in android/app/build.gradle, depending on the needs of your app.
build.gradle:
dependencies {
// If your app supports Android versions before Ice Cream Sandwich (API level 14)
implementation 'com.facebook.fresco:animated-base-support:1.10.0'
// For animated GIF support
implementation 'com.facebook.fresco:animated-gif:1.10.0'
// For WebP support, including animated WebP
implementation 'com.facebook.fresco:animated-webp:1.10.0'
implementation 'com.facebook.fresco:webpsupport:1.10.0'
// For WebP support, without animations
implementation 'com.facebook.fresco:webpsupport:1.10.0'
}
Usage
<MapView.Callout tooltip={true} style={{ backgroundColor: 'white', height: contentHeight, width: contentWidth }}>
<View style={{ flexDirection: 'column' }}>
<View style={{ flex: 1 }}>
<Text style={styles.textCallout}>Latitude: {route.Latitude}</Text>
<Text style={styles.textCallout}>Longitude: {route.Longitude}</Text>
<Text style={styles.textCallout}>Status: <Icon name={route.Status === 1 ? 'checkmark-circle' : 'close-circle'} style={{ color: route.Status === 1 ? 'green' : 'red', fontSize: 16 }} /> </Text>
<Text style={styles.textCallout}>Velocidade: {route.Speed} km/h</Text>
</View>
<Image source={{ uri: `data:image/gif;base64,${route.Image}` }} style={{ width: 150, height: 100, resizeMode="cover" }} />
</View>
</MapView.Callout>
I am using Webview component in React Native to render HTML content. The problem I am facing is that I cannot make the height variable so it can adapt to any content it has.
return (
<View style={{flex: 1}}>
<Header
containerStyle={{
backgroundColor: 'white',
borderBottomColor: '#dee0e2',
borderBottomWidth: 1
}}
centerComponent={{ text: 'Noticia', style: { color: 'black' } }}
leftComponent={
<TouchableHighlight onPress={() => navigate('homeScreen')}>
<Text style={{color: '#4289f4'}}>Atrás</Text>
</TouchableHighlight>
}
/>
<ScrollView style={{padding: 5}}>
<View style={{flexDirection: 'column'}}>
<Text style={{textAlign: 'center', fontSize: 17, fontWeight: 'bold'}}>{noticia[0].titulo}</Text>
<Image style={{width: '100%', height: 200, alignSelf: 'stretch', marginTop: 10}} source={{uri: noticia[0].imagen}} />
<View style={{height: 200, backgroundColor: 'red'}}>
<WebView
source={{html: noticia[0].articulo}}
scalesPageToFit={(Platform.OS === 'ios') ? false : true}
/>
</View>
</View>
</ScrollView>
</View>
);
If I don't give the <View>' that contents ' <Webview>' a height it does show me nothing. Tried already withflex: 1` but nothing changes.
In your parent view (root view directly under return()) style it as
height: '100%',
width: '100%'
It will adopt to any size screen.
<View style={styles.container}>
<TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}/>
<TouchableHighlight underlayColor='white' onPress={onPressButton}>
<Image style={{width: 50, height: 50}}
source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
/>
</TouchableHighlight>
</View>
I want to get the View, like in html use the 'getElementById()', but in React native, How do I?
Define a ref:
<View ref={(ref) => {this._myView = ref}} />
Then in your code you can access the View like this:
this._myView // Do whatever you need here
Docs here https://facebook.github.io/react/docs/refs-and-the-dom.html#the-ref-callback-attribute