ImageBackground

ImageBackground

ImageBackground is a View that draws an absolutely positioned Image behind its children, with style for the container and imageStyle for the picture. The React Native 0.87 36,878 docs mark it deprecated in favor of writing those lines yourself; React Native 0.86 still ships it. BookNest's banner both ways:

src/Hero.tsx: the classic component and its recommended replacementTSX

<ImageBackground source={{ uri: coverUrl(book.id) }} resizeMode="cover" blurRadius={6}
  style={styles.hero} imageStyle={styles.image}>
  <Text style={styles.title}>{book.title}</Text>
</ImageBackground>
<View style={styles.hero}>
  <Image source={{ uri: coverUrl(book.id) }} blurRadius={6}
    style={[StyleSheet.absoluteFill, styles.image]} />
  <Text style={styles.title}>{book.title}</Text>
</View>
// hero: { height: 180, justifyContent: 'flex-end', padding: 16, overflow: 'hidden' }

Both render the same way (third screen of the figure in Resize Modes and Image Caching); blurring and dimming the picture keeps white text legible over any cover.

MENU