Develop Reference

react native's flex doesn't work when the "on-screen button" is turned on

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>

How to handle large image in modal (react native android)

I have a modal that a link is passed to for image pinch zoom and it works perfectly on iOS, but apparently android has a limitation with the fresco plugin. I get an error Pool hard cap violation? Hard cap = 201326592 Used size = 191114208 Free size = 0 Request size = 10933048 error. This results in nothing showing.
How does one handle images inside a modal that a user can zoom/pan with? It works perfectly on iOS - It's just android that's having this issue. I don't want to really resize it because the user should be able to zoom, so we want it to be larger than the view. Documentation doesn't cover this at all.
Code (for illustration purposes):
<Modal ref={modalRef} supportedOrientations={['landscape', 'portrait']} animationType='fade' visible={!!modalImage} style={{...StyleSheet.absoluteFillObject}}>
<StatusBar backgroundColor={"#000"} />
<View style={{flex: 1, backgroundColor: '#FFF', position: 'relative'}}>
<TouchableOpacity hitSlop={{ top: 20, bottom: 20, left: 20, right: 20}} style={{position: 'absolute', top: '5%', right: '5%', width: 20, height: 20, zIndex: 999}} onPress={() => setModalImage(null)}>
<Image style={{width: '100%', height: '100%'}} source={require('../assets/icons/Miscellaneous/Close/close-dark-mode.png')} />
</TouchableOpacity>
<ReactNativeZoomableView
ref={zoomableRef}
style={{width: '100%', height: '100%', backgroundColor: '#000'}}
maxZoom={3}
minZoom={1}
zoomStep={3}
onShiftingBefore={_onShiftBefore}
onShiftingAfter={_onShiftAfter}
>
<Image onError={(e) => console.log('error', e.nativeEvent.error)} style={{width: '100%', height: '100%'}} resizeMode='contain' resizeMethod='resize' source={{ uri: `https://website.com${HtmlTextParser(modalImage ?? '')}` }} />
</ReactNativeZoomableView>
</View>
</Modal>

I'm using a zoomable view inside a modal in the same manner that you explained but never ran into this issue, the difference I found between our implementations is that I have those props specified in zoomable view and not inside the image style.
contentWidth={}
contentHeight={}
I'm not sure if you're using the deprecated one, if so I'd suggest that you try this instead
https://github.com/openspacelabs/react-native-zoomable-view
let me know if those suggestions helped.

Overlapping React Navigation Header in react native app

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
}

React Native Rendering Image borderRadius in iOS

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

React Native, TouchableOpacity wrapping floating button get nothing

I'm creating a simple action button (floating button)
This is working :
<View style={{
width: this.props.size,
height: this.props.size,
borderRadius: this.props.size / 2,
backgroundColor: '#ee6e73',
position: 'absolute',
bottom: 10,
right: 10,
flexDirection:'row'
}}>
<Text>
+
</Text>
</View>
This is not :
<TouchableOpacity
onPress={()=>{
}} >
<View style={{
width: this.props.size,
height: this.props.size,
borderRadius: this.props.size / 2,
backgroundColor: '#ee6e73',
position: 'absolute',
bottom: 10,
right: 10,
flexDirection:'row'
}}>
<Text>
+
</Text>
</View>
</TouchableOpacity>
Just wrap with TouchableOpacity then my button not show up without any errors.
React 0.1.7, Android
Then I try move styling from View to TouchableOpacity, It's work
<TouchableOpacity
onPress={()=>{
}}
style={{
width: this.props.size,
height: this.props.size,
position: 'absolute',
borderRadius: this.props.size / 2,
backgroundColor: '#ee6e73',
bottom: 10,
right: 10,
}}>
<Text>
+
</Text>
</TouchableOpacity>
Can any one explain me why?
React Native docs said
[https://facebook.github.io/react-native/docs/touchableopacity.html][1]
A wrapper for making views respond properly to touches.
This is done without actually changing the view hierarchy,
and in general is easy to add to an app without weird side-effects.
This mean I wrap my original view and it would work as I expected, But it's not.

From my experience, TouchableOpacity does not work well with absolute positioning. Perhaps if you remove that, the onPress will work again.
Also please note that it is EXTREMELY important what element you render first and what you render last.
For example, if you do:
<View>
<TouchableOpacity style={{position:'absolute'}} onPress={()=>
{console.log("It works or not?")}}>
</TouchableOpacity>
<Text style={styles.aStyle}>
Some text bla bla......
</Text>
</View>
There is a pretty good chance that the Text will be rendered on top of the TouchableOpacity, therefore you won't be able to get the onPress working.
Then since the position is absolute, all you have to do is render it as the last child of the View:
<View>
<Text style={styles.aStyle}>
Some text bla bla
</Text>
<TouchableOpacity style={{position:'absolute'}} onPress={()=>
{console.log("It works or not?")}}>
</TouchableOpacity>
</View>

I know this is old but I had this issue and nothing above worked until adding flex: 1 to my TouchableOpacity.

TouchableOpacity does not assume the style of the view it is the parent of. You need provide it style information.

Incase anyone else stumbles across this, and none of these suggestions work my fix was to instead import TouchableOpacity from react-native instead of react-native-gesture-handler
So
import { TouchableOpacity } from "react-native";
Instead of
import { TouchableOpacity } from "react-native-gesture-handler";

I had a similar issue after a lot of debugging I found out that negative margin was the problem.
Beware of negative margin when using TouchableOpacity
Debugging step:
Remove all the styling
Create fresh component without styling
Make sure it is working without styling
Then state adding your styling