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.
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>
Im working in a react native app, for my navigation, I used react-navigation 4, In one of the screens I want to Overlap the react-navigation header with a card component, On android, it's working fine but on iOS I can't get it to work even though I set the card zIndex to a big number it's always hidden by the react-navigation header.
here is the code for my component :
<View style={global.container}>
<View style={styles.info}>
<View style={styles.card}>
<Image style={styles.image} source={app.appLogo} />
</View>
</View>
<View>
and this is the CSS :
card:{
padding:0,
borderRadius: 30,
backgroundColor:"#fff",
position: 'absolute',
top: -70,
zIndex:99,
elevation:5
},
Display on android:
Display on iOS:
Please add zIndex to parent view. In iOS, the zIndex doesn't work for nested parentView. You need to make the parentView has high zIndex, and then target View again.
.container {
zIndex:101
}
.info {
zIndex:100
}
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
}
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.
version of RN is 0.41.2
does anyone know how to stop View's that use flexbox for sizing, from automatically "shrinking" their height if a TextInput element is used in one of the Views? It's probably easier to illustrate by example, and to be clear, you can see that these are View's nested inside a <Modal>.
Here is the view when no keyboard is open. Same on both.
Here's what happens when TextInput has the focus. I dont want these views to adjust as they have, above the keyboard. I want the yellow and blue colored View's to remain 'full size' - exactly as illustrated in the iOS screenshot.
This same code, on iOS, does not move/adjust the View's (above the keyboard). That's the behavior I want on Android too.
Here is the sample render method code. It's just a standard template RN project with a change to the render method to test this out.
I tried inserting android:windowSoftInputMode="adjustNothing" into AndroidManifest.xml but had no effect. I'm sure it's just a prop or other manifest setting. Hoping someone can let me know?
render() {
return (
<View style={styles.container}>
<Modal
animationType={'slide'}
transparent={false}
onRequestClose={() => console.log('sd')}
>
<View style={{flex:1, backgroundColor: 'lightgrey'}}>
<View style={{
//height:300,
flex: 1,
backgroundColor: 'yellow',
alignItems: 'center',
justifyContent: 'center',
}}>
<View style={{
margin: 10,
//height:100,
width: 200,
justifyContent: 'center',
backgroundColor: 'green'}}>
<TextInput style={{height: 40, backgroundColor: 'orange'}} />
</View>
</View>
<View style={{
//height:200,
flex: 1,
backgroundColor: 'blue',
}}>
</View>
</View>
</Modal>
</View>
);
}
Did you try wrapping all of the contents within a ScrollView and then a child KeyboardAvoidingView?
I had exactly the same problem, and instead of adding ScrollView everywhere I just made a little change in AndroidManifest.xml:
instead of: android:windowSoftInputMode="adjustResize"
i wrote: android:windowSoftInputMode="adjustPan"
Worked like a charm for me