Develop Reference

Trying to add rounded borders around text in React Native

I am working for a small startup, and I was tasked with implementing a settings screen design. Based off of what they designed, they want like a box that fits the screen with text on top of it that serves as a breaker between each section of the settings. I just can't figure out how to round the corners around the text.
So far what I did was:
<View className="w-full mt-2">
<Text style={styles.TextComponentStyle}>Account</Text>
</View>
And the style sheet looks like this:
TextComponentStyle: {
borderRadius: 5,
borderColor: '#DADEE8',
borderWidth: .5,
color: 'black',
backgroundColor: '#DADEE8',
padding: 2,
fontSize: 16,
margin: 10
}
It is giving me almost everything I want minus the rounded corners. It is showing up as square corners.

The Text element in React Native doesn't take border properties. You should apply the border properties to the container around the text element.
This should work for you:
<View className="w-full mt-2" style={styles.textContainer}>
<Text style={styles.TextComponentStyle}>Account</Text>
</View>
TextContainer: {
borderRadius: 5,
borderColor: '#DADEE8',
borderWidth: .5,
backgroundColor: '#DADEE8',
padding: 2,
margin: 10,
},
TextComponentStyle: {
color: 'black',
fontSize: 16,
}

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.

How to set borderRadius on a react-native modal?

I have a react-native Modal, I would like to render it with rounded corners like this:
but if I define it like this:
<Modal
style={{
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
overflow: 'hidden',
}}
nothing happens (at least on Android). I also tried to wrap the Modal with a View with the same style but with no more success.
What am I doing wrong?

The solution is to put a View inside the Modal (right after its declaration) with this style:
<Modal>
<View
style={{
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
overflow: 'hidden',
}}
>
</Modal>

React Native Circle Image on Android

I am simply trying to take a square image and contain it within a circle in my react-native app on Android. A circle image basically.
<View style={mainStyle.profileImageContainer}>
<Image
style={mainStyle.profileImage}
source={{uri: CONFIG.media_url+this.props.image}}
resizeMode="cover"
/>
</View>
and styles:
profileImageContainer: {
translateY: -43,
alignSelf: 'center',
},
profileImage: {
resizeMode: 'cover',
height: 86,
width: 86,
borderWidth: 2,
borderRadius: 75,
overlayColor: CREAM,
},
But the only way to get it remotely circular on Android is to add the "overlayColor", but I need this to be transparent so the design behind is visible. The property transparent does not work.
Does anyone have any ideas how to achieve this? Am I missing some sort of simple property?
EDIT: Thanks to Dhruv Parmar's answer, I realised the issue is because I was using a GIF image. The method you would expect seems to work fine with jpgs and pngs, but not GIFS!

You don't need to have a wrapping view to achieve this, simply using borderRadius set to half of image size should do the trick. Any other styles you want can be applied directly to Image view
You can see an example here https://snack.expo.io/rJI4DzoDW

Use this style;
image: {
width: 150,
height: 150,
borderRadius: 150 / 2,
overflow: "hidden",
borderWidth: 3,
borderColor: "red"
}

Android - React Naitve - Shadow opacity higher when the component is bigger

I'm having an issue in Android when adding elevation to a View.
As we can see, in the first example, the shadow casted by adding elevation is the same size for both rectangles. In the second example however, the shadow for the grey rectangle is bigger than the shadow for the blue rectangle.
The styling is exactly the same, however the only difference is the size of the rectangles.
(written in React Native)
Rectangle A:
<View style={{flexDirection: 'row', alignItems: 'flex-end'}}>
<View style={{elevation: 5, width: 140, height: 90, backgroundColor: "#d9d9d9"}} />
<View style={{elevation: 5, width: 140, height: 60, backgroundColor: "#00aeef"}} />
</View>
Rectangle B:
<View style={{flexDirection: 'row', alignItems: 'flex-end'}}>
<View style={{elevation: 5, width: 220, height: 90, backgroundColor: "#d9d9d9"}} />
<View style={{elevation: 5, width: 60, height: 60, backgroundColor: "#00aeef"}} />
</View>
Adding a shadow to a parent component is not a solution since the component are not the same height. In such a case shadow will be visible above the blue component, and it just doesn't look right.
Also increasing the value of elevation of the blue rectangle is not a solution, since increasing the value of elevation spreads the shadow, making it less visible.
Any ideas how I can make the shadows look alike when both the component have different sizes?