I want to create a fully custom map with my own markers and totally responsivly with react native. So I choosed an Image for my map and I just place some markers directly on the map depending of the size of the screen to really have the good location. I tried without screen size and it's a little better but still not perfect..
This is my scrollview code :
<View style={styles.container}>
<View style={{borderWidth: 1, width : screendim.width / 1.1, height: screendim.height / 2}}>
<ScrollView>
<ScrollView horizontal={true}>
<View>
<Image source={require("../resources/map.png")}/>
</View>
<Marker top={10} left={300}/>
<Marker top={500} left={500}/>
<Marker top={5} left={2}/>
<Marker top={1.7} left={1.5}/>
</ScrollView>
</ScrollView>
</View>
</View>
And this is my marker code
return(<TouchableOpacity style={{position: "absolute", top : this.props.top, left : this.props.left, width : imgSize, height: imgSize}} >
<Image style={{width : imgSize, height: imgSize}} source={require("../../resources/marker.png")}/>
</TouchableOpacity>)
Okay so I found a solution, the solution is to not adapt to screen size, so the map is original size and markers too.
Related
Whenever I turn off my android phone's "on-screen default button" (picture1), react-native's "flex" works well. But whenever I turn on the phone's "on-screen default button" (picture 2), I can't see the bottom portion (in the picture "hey there!").
In this case, I want to show "hey there!" at the bottom, even if I turn on the physical android button.
Any suggestion?
Picture 1 -
Picture 2 -
Here is my code snippet
<View style={{flex: 1}}>
<View style={{height: hp('100%'), backgroundColor: 'skyblue'}} />
<Text>hey there!</Text>
</View>
Wrap your code in SafeAreaViewlike this:
<SafeAreaView style={{ flex: 1 }}>
<View style={{ height: "95%", backgroundColor: "skyblue" }} />
<Text>hey there!</Text>
</SafeAreaView>
Images are rendered in different aspects in ios and android using image component from react-native. I’m trying to display image with 45 degree angle cutoff every corner.
I have tried to use cover, contain and center of the resizeMode prop cover fills the image inside the view giving the 45 degree cut but crops either width or height.
Center does not crop the image but if the image isn’t similar ratio as the view the 45 degree angles aren’t cut of the image, Android does this well though.
<View style={(this.state.controlsDisplayed) ? styles.flexLR : styles.flexLRBlack}>
<View style={{flex: (Platform.OS === ‘ios’) ? 0.85 : 0.5}} />
<View style={styles.imageWrapView}>
<Image source={{uri: ‘file://’ + item.photoLeft}} key={“TDVIEW”} resizeMode={(Platform.OS == ‘ios’) ? ‘cover’ : ‘center’} style={styles.floatingImagePartView} />
</View>
<View style={{flex: (Platform.OS === ‘ios’) ? 0.85 : 0.5}} />
</View>
Want to get uncropped images on ios that have corners cut of by 45 degrees. Same as is in the android images. Here are images from android device that are rendered correctly.
Here are the images rendered on ios using center and cover
This is rendered using contain on ios
How can I get the images rendered with 45 degree cutoff on ios device as it is on an android device?
if you set overflow to hidden the border radius will start working again
borderRadiusFix:{
borderRadius: 5,
overflow: 'hidden',
}
same problem are occure with me. In my case borderRadius are working for android but not working for ios so i followed the folloowing code....
This is my styling item for Touchable button you can use Image in place...
<View style = {styles.button}>
<TouchableOpacity >
<Text style={{textAlign:'center',color:'#ffff'}}>
Login
</Text>
</TouchableOpacity>
</View>
and my styling....
button: {
borderRadius:20,
marginTop:20,
alignSelf:'center',
textAlign:'center',
width:'70%',
height:'7%',
fontWeight:"bold",
color:'#ffff',
paddingTop:10,
backgroundColor: '#00AABF'
}
Try this
<View
style={{
width: 250,
height: 150,
borderTopLeftRadius: 50,
borderTopRightRadius: 50,
borderBottomLeftRadius: 50,
borderBottomRightRadius: 50,
overflow: 'hidden'
}}
>
<Image
source={{ uri: imageUri }}
style={{
width: 250,
height: 150
}}
/>
</View>
You can use following props for 45-degree angle cutoff every corner.
borderTopLeftRadius
borderTopRightRadius
borderBottomLeftRadius
borderBottomRightRadius
I'm using a react-native Modal, which contains a View.
The View has some TextInput elements. When the keyboard pops up, the View elements all collapse to fit into the remaining space, but I don't want the View to change at all.
This does not happen for IOS. And also, it does not happen in non-modal Views for Android within the same app.
I have windowSoftInputMode="adjustPan" set in my android Manifest, but it doesn't seem to be applied on the Modal.
return(
<ImageBackground source={require('./../images/IMG1.png')}
style={{flex: 1}} imageStyle={{resizeMode: 'cover'}}>
<View style={{flex: 1}}>
(...)
<Modal visible={this.state.modalVisible} animationType={'slide'}
presentationStyle={'fullScreen'}
onRequestClose={() => this.closeModal()}>
<ImageBackground source={require('./../images/IMG2.png')}
style={{flex: 1}} imageStyle={{resizeMode: 'cover'}}>
<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
<View style={{flex:1}}>
(...)
<View style={{flex:0.9, alignItems:'center', justifyContent: 'center',
flexDirection: 'row'}}>
<TextInput style={MyStyle.textInput}
onChangeText={(myTitle) => this.setState({myTitle})}
placeholder='Title'
/>
</View>
As a workaround, I ended up using a fixed height value for the Modal’s child View instead of flex. (Got it using Dimensions height).
It seems to work as I expected.
Seems like you need to apply statusBarTranslucent={true} prop for the Modal to make the modal content not to resize and the keyboard to pan over the modal content.
My workaround: I used the following style for the child of the modal.
container: {
left: 50,
position: "absolute",
right: 50,
top: 50
}
Using create-react-native-app, testing with an Android device. I'm trying to display a full screen photo in a scroll view. The image displays larger than my screen but I can neither scroll nor zoom.
export default function Photo({ filename }) {
return (
<ScrollView
centerContent
contentContainerStyle={{ flex: 1 }}
maximumZoomScale={2}
minimumZoomScale={1}
>
<View style={{ flex: 1 }}>
<Image style={{ flex: 1 }} source={{ uri: assetPath(filename) }} />
</View>
</ScrollView>
);
}
This component is rendered from a top level react-router Route:
<NativeRouter>
<AndroidBackButton>
<View style={styles.container}>
<Route path="/" exact component={PhotoListContainer} />
<Route
path="/photos/:filename"
component={({ match }) => (
<Photo filename={match.params.filename} />
)}
/>
</View>
</AndroidBackButton>
</NativeRouter>
In the examples I've seen, there's one notable difference: the Image element usually does not have any styles. But if I remove the style property, the image disappears altogether. I suspect at least part of my problem stems from not understanding flex and being new to RN, and that the solution is simple. Please help if you can!
These properties, minimumzoomscale and maximumzoomscale only works for IOS not for Android
Link to docs
Second thing is Scroll only available if your view is getting out of screen.
Hey I was wondering if there was some kind of workaround for nesting views on React Native on android, it seems that things like
class BlueIsCool extends Component {
render() {
return (
<Text>
There is a blue square
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
in between my text.
</Text>
);
}
}
is not possible on Android. Is there any way to do something like this on Android using React Native?
You may simply do
<View>
<Text>
There is a blue square
</Text>
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
<Text>
in between my text.
</Text>
</View>