I am trying to keep the marker centered on the map, while dragging the map around the marker, like how Uber does it, when a user is trying to choose a location. the below code work perfectly on IOS but the marker is getting hidden on Android I think, How can I solve this issue for Android?
<View style={styles.map}>
<MapView
region={this.getMapRegion()}
style={styles.map}
provider={PROVIDER_GOOGLE}
mapType="standard"
onRegionChangeComplete={(region) => this.setState({
atitude: region.latitude, longitude: region.longitude,
latitudeDelta: region.latitudeDelta, longitudeDelta: region.longitudeDelta
})} >
<View style={{
left: '50%',
marginLeft: -24,
marginTop: -48,
position: 'absolute',
top: '50%',}}>
<Image
style={{
resizeMode: 'contain',
height: 60, width: 60,
}} source={require('../../assets/fake-marker.png')} />
</View>
</MapView>
</View>
Your code should work fine on Android and IOS, you just made a simple mistake you wrapped up your custom marker inside the MapView, you just need to move it outside and everything will work like a charm.
i used something like that
<View style ={styles.container}>
<MapView
showsUserLocation
showsMyLocationButton
style={styles.map}
onRegionChangeComplete={this.onRegionChange.bind(this)}
region={this.state.region}
>
</MapView>
<View
style={{ flex:1,
flexDirection:'row',
alignItems:'center',
justifyContent:'center'}} pointerEvents="none">
<Image style={styles.marker} source=require("./../../assets/pic/my_loc.png")} />
</View>
</View>
and use this styles`
[![container: {
flex:1,
left: 0,
right: 0,
bottom: 0,
justifyContent: 'flex-end',
alignItems: 'center',
},
map: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
marker: {
height: 48,
width: 48,
},`][1]][1]
Related
My FlatList is not scrollable while my Modal is visible. I've tried a bunch of things but none seem to do the job. I'm building for Android. You can find the Expo snack here https://snack.expo.dev/#ordis45/modal_flatlist?platform=android. Code is as follows:
Any pointers in the right direction would be appreciated!
const styles = StyleSheet.create({
container: {
flex: 1,
},
modal: {
position: 'relative',
bottom: 0,
height: 20,
},
modalContent: {
backgroundColor: 'white',
padding: 22,
justifyContent: 'center',
alignItems: 'center',
borderColor: 'rgba(0, 0, 0, 0.1)',
},
openButton: {
backgroundColor: '#F194FF',
borderRadius: 20,
padding: 10,
elevation: 2,
position: 'absolute',
bottom: 20,
right: 20,
},
});
const myComp = () => {
const [modalVisible, setModalVisible] = useState(false);
return (
<View style={styles.container} overflow='scroll'>
<Modal
visible={modalVisible}
style={styles.modal}
transparent={true}
>
<View style={styles.modalContent}>
<Text>This is a modal</Text>
<TouchableOpacity onPress={() => setModalVisible(false)}>
<Text>Close</Text>
</TouchableOpacity>
</View>
</Modal>
<FlatList
style={{height: 300, position: 'relative', elevation: 1}}
data={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}
renderItem={({ item }) => <Text style={{padding: 50}}>{item}</Text>}
/>
<TouchableOpacity onPress={() => setModalVisible(true)} style={styles.openButton}>
<Text>Open</Text>
</TouchableOpacity>
</View>
);
};
I tried things like changing the elevation and z-indices of the View component and the FlatList and Modal components- to no avail. I also tried setting supportedOrientations={['landscape']} but that didn't work either.
I'm trying to make a component absolute in react native, but I can't get the result I want. When I change the order of the codes, the way it works changes.
1st case
<View style={{ flex: 1, width: '100%' }}>
<View
style={{
position: 'absolute',
top: 0,
right: 0,
width: 70,
height: 70,
backgroundColor: '#FF0000',
zIndex: 20,
elevation: 20,
}}
/>
<View style={{ width: '100%', height: '100%', backgroundColor: '#C6C6C6' }} />
</View>
In this case, it happens as follows. Absolute component is not visible.
2st case
<View style={{ flex: 1, width: '100%' }}>
<View style={{ width: '100%', height: '100%', backgroundColor: '#C6C6C6' }} />
<View
style={{
position: 'absolute',
top: 0,
right: 0,
width: 70,
height: 70,
backgroundColor: '#FF0000',
zIndex: 20,
elevation: 20,
}}
/>
</View>
In this case, the absolute component looks as follows.
<View style={{ width: '100%', height: '100%', backgroundColor: '#C6C6C6' }} />
In case 1, it doesn't work if zIndex and elevation are set. Why does relocating the above code prevent it from being absolute?
I'm building a react native app. I have a circular image with text above it which the user can click to go to another page.
This works great on iOS, however on Android I can't click. When I inspect on Android and click the TouchableHighlight it seems like the appBody view I have as a parent is what's being clicked. I stripped the whole page down and removed the appBody leaving just the TouchableHighlight and still won't click on Android phones.
I noticed as soon as I remove the absolute position from the viewTextWrap it then triggers the click! However without the absolute position the Test text and background color is behind the image. I was reading absolute position with zIndex causes issue on Android, and to fix this by using elevation. So anywhere I have a Zindex I added the same elevation , but still doesn't work.
Here is my code:
<View style={globalStyle.appBody}>
<TouchableHighlight style={{zIndex: 100, elevation: 100}} onPress={() => this._goToPage('Test')} underlayColor={'transparent'}>
<View style={styles.ImageWrap}>
<Image style={[globalStyle.ProfileImage, { top: -90 }]} source={{ uri: this.state.pic }} defaultSource={require('../../assets/images/placeholder.png')} />
<Image style={styles.viewImage} source={require('../../assets/images/test.png')} />
<View style={styles.viewTextWrap}>
<Text style={styles.viewText}>Test</Text>
</View>
</View>
</TouchableHighlight>
//More code in the body here
</View>
And the css for those classes:
appBody: {
backgroundColor: '#fff',
padding: 25,
height: '100%'
},
ImageWrap: {
position: 'relative',
backgroundColor: '#fff',
},
ProfileImage: {
position: "absolute",
zIndex: 100,
top: -68,
height: 136,
width: 136,
borderRadius: 136 / 2,
alignSelf: 'center',
},
viewImage: {
position: "absolute",
zIndex: 100,
elevation: 100, //Tried adding to match zIndez
alignSelf: 'center',
bottom: -50,
},
viewTextWrap: {
position: "absolute", //If I remove this, the click works but the text is behind the image
zIndex: 101,
elevation: 101, //Tried adding to match zIndez
alignSelf: 'center',
bottom: -32,
},
viewText: {
position: 'relative',
fontSize: 12,
textAlign: "center",
},
Instead making position absolute for viewTextWrap, you can use ImageBackground component so that text viewTextWrap doesn't go behind the Image.
I have a react native code, using expo, with a graph with text. In Apple, this application is showing it twice. In Android, once.
Here is the code:
import { ScrollView, StyleSheet, Text, View, Alert, Dimensions } from 'react-native';
...
// Charts
import * as scale from 'd3-scale'
import { ProgressCircle, LineChart, XAxis, Grid } from 'react-native-svg-charts';
.... <Other Code> ...
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ padding: 10 }}>
<ProgressCircle
style={{ height: 150, width: 150 }}
startAngle={-Math.PI * 0.5}
endAngle={Math.PI * 0.5}
progress={this.state.perFirstTier}
progressColor={constants.BGC_GREEN}
strokeWidth={10}>
{* THIS IS WHAT IS DOUBLED*}
<Text key ='percentage' style={{
position: "absolute",
marginLeft: 65, marginTop: 50
}}>{(this.state.perFirstTier * 100).toFixed(0)}%</Text>
</ProgressCircle>
<View style={{ marginTop: -40, flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={styles.description}>{i18n.t('activityDashboard.firstGoalDesc')}</Text>
{/* Show colored badge if 100%*/}
{this.state.perSecondTier == 1
? <Image style={styles.medalImage} source={require('../../utils/images/silver_medal.png')}></Image>
: <Image style={styles.medalImage} source={require('../../utils/images/grey_medal.png')}></Image>
}
</View>
</View>
Here is an image comparison of Apple versus Android:
Why is this happening, and how can I make it only show once?
Because progress is already declared in the ProgressCircle component, and it's rendered inside it. Just remove the Text component from the ProgressCircle. I guess it has overflow hidden on Android so it's not displayed there.
if all else fails, try adding a rendering condition for iOS platform.
<ProgressCircle
style={{ height: 150, width: 150 }}
startAngle={-Math.PI * 0.5}
endAngle={Math.PI * 0.5}
progress={this.state.perFirstTier}
progressColor={constants.BGC_GREEN}
strokeWidth={10}
>
{/* THIS IS WHAT IS DOUBLED */}
{Platform.OS === 'ios'
? <View />
: (
<View>
<Text
key ='percentage'
style={{
position: "absolute",
marginLeft: 65,
marginTop: 50
}}
>
{(this.state.perFirstTier * 100).toFixed(0)}%
</Text>
</View>
)
}
</ProgressCircle>
I had a similar issue trying to render YAxis as < Text > on iOS14. I used < Text > because had a hard time using YAxis for putting the label at the top of the chart bar.
My specs:
{
"expo": "~39.0.2",
"react-native-svg-charts": "^5.4.0",
"react-native-svg": "12.1.0"
}
Code:
const Values = ({ x, y, data }) => {
return (
data.map((value, index) => {
return (
<Text
key={index}
style={{
color: '#6e6969',
fontSize: 10,
position: 'absolute',
left: x(index) + 1,
top: y(value) - 15
}}
>
{value}
</Text>
)
})
)}
<BarChart
style={styles.chart}
data={data.plot}
spacing={0.2}
svg={{ fill: 'rgba(134, 65, 244, 0.8)' }}
contentInset={{ top: 20, bottom: 20, left: 0, right: 0 }}
>
<Values />
</BarChart>
<XAxis
style={{ marginHorizontal: -10 }}
data={data.plot}
formatLabel={(value, index) => data.labels[index]}
contentInset={{ left: 30, right: 30 }}
svg={{ fontSize: 10, fill: colors.medium }}
/>
Result
What I needed to do was wrapper the < Text > into a < View > and the issue was solved:
Changed code:
const Values = ({ x, y, data }) => {
return (
data.map((value, index) => {
return (
<View key={index}>
<Text
style={{
color: '#6e6969',
fontSize: 10,
position: 'absolute',
left: x(index) + 1,
top: y(value) - 15
}}
>
{value}
</Text>
</View>
)
})
)}
Result
Both codes worked fine on Android, though.
As I want to overlap this icon with two other Views, as shown in the image. this code is working on IOS platform but not on android. please suggest if there is any solution for Android.
var tabs = ['Activity', 'Files', 'People'];
this.state = {
tabs
};
return (
<Container style={{backgroundColor: '#F5F5F5'}}>
<View style={styles.topStrip}>
{
this.state.tabs.map((tab, index) => (
<View key={index} >
<TouchableOpacity>
<Text style={styles.streamName}>{tab}</Text>
</TouchableOpacity>
</View>
))
}
<View style={{position: 'absolute', backgroundColor: 'transparent', alignItems: 'center', justifyContent: 'center', zIndex: 5, elevation: 24, marginTop: 15, marginLeft: 300}}>
<EIcon size={40} color='#2196f3' name={'circle-with-plus'} />
</View>
</View>
<View style={{zIndex: -1}}></View>
</Container>
);
}
}
const styles = StyleSheet.create({
topStrip: {
alignItems: 'center',
},
streamName: {
marginTop: 7,
marginBottom: 6,
flexDirection: 'row',
alignSelf: 'center'
}
}
});
<View
style={{
paddingLeft: ITEM_HEIGHT * 3,
flex: 1,
position: "absolute",
top: 0,
right: 0,
bottom: 0,
left: 0,
zIndex: -1
}}
>
<Image
style={styles.centerCircle}
resizeMode="contain"
source={Images.ballSmall}
/>
</View>
In android, to use zIndex you need css with position-properties with top,left,right,bottom css
Tested On: Zenfone 3, Android 7, React Native 0.55.4
This issue is not caused by zIndex (although it does cause problem on Android).
Your icon is put inside the upper container view. React Native on Android does not support overflow: visible. That's why you see your icon being clipped outside the container.
You may put the icon on the "page" component level to solve this issue.
You may also refer to https://stackoverflow.com/a/50991892/6025730.