Sometimes, we want to add a borderRadius to ImageBackground with React Native.

In this article, we’ll look at how to add a borderRadius to ImageBackground with React Native.

How to add a borderRadius to ImageBackground with React Native?

To add a borderRadius to ImageBackground with React Native, we can set the borderRadius in the imageStyle prop.

For instance, we write:

import * as React from 'react';
import { View, ImageBackground, Text } from 'react-native';
import Constants from 'expo-constants';
import AssetExample from './components/AssetExample';
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <ImageBackground
        imageStyle={{
          borderRadius: 6,
          overflow: 'hidden',
          width: '100%',
          height: 300,
        }}
        resizeMode="cover"
        source={{ uri: 'https://picsum.photos/200/300' }}>
        <Text>Inside</Text>
      </ImageBackground>
    </View>
  );
}

to set the borderRadius to 6 in the object we set as the value of the imageStyle prop of the ImageBackground.

We add a background image with the ImageBackground component.

We add the Text component as the content that goes inside the image background.

Therefore, we see the border radius applied to the background image.

Conclusion

To add a borderRadius to ImageBackground with React Native, we can set the borderRadius in the imageStyle prop.