React-native-fast-image: Please allow contain children

Created on 3 Feb 2018 · 8Comments · Source: DylanVann/react-native-fast-image

Please allow contain children, Thank you!

Source

lianzhongdandan

Most helpful comment

We could add a ImageBackground Component. (https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting)

In the meantime you can implement your own based on https://github.com/facebook/react-native/blob/8547b7e11163d545b7b99d4bdd063ef71129d62c/Libraries/Image/ImageBackground.js

Here is the component I use:

import React, { Component } from 'react'
import { View, StyleSheet } from 'react-native'
import FastImage from 'react-native-fast-image'

export default class ImageBackground extends Component {
  render() {
    const { children, style = {}, imageStyle, imageRef, ...props } = this.props

    return (
      <View style={style} ref={this._captureRef}>
        <FastImage
          {...props}
          style={[
            StyleSheet.absoluteFill,
            {
              width: style.width,
              height: style.height,
            },
            imageStyle,
          ]}
        />
        {children}
      </View>
    )
  }
}

n1ru4l on 8 Feb 2018

👍6

All 8 comments

Children support was a feature deliberately removed in this commit to keep the API close to that of and potentially other reasons.

In other words, it's unlikely it'll be added again.

thatjuan on 8 Feb 2018

We could add a ImageBackground Component. (https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting)

In the meantime you can implement your own based on https://github.com/facebook/react-native/blob/8547b7e11163d545b7b99d4bdd063ef71129d62c/Libraries/Image/ImageBackground.js

Here is the component I use:

import React, { Component } from 'react'
import { View, StyleSheet } from 'react-native'
import FastImage from 'react-native-fast-image'

export default class ImageBackground extends Component {
  render() {
    const { children, style = {}, imageStyle, imageRef, ...props } = this.props

    return (
      <View style={style} ref={this._captureRef}>
        <FastImage
          {...props}
          style={[
            StyleSheet.absoluteFill,
            {
              width: style.width,
              height: style.height,
            },
            imageStyle,
          ]}
        />
        {children}
      </View>
    )
  }
}

n1ru4l on 8 Feb 2018

👍6

It supports children now. I was sort of flip flopping on how exactly to implement it for a bit.

DylanVann on 18 Mar 2018

👍4

Hello,

the problem is that "justifyContent" style property does not work for children.
I want to display children at the bottom of the image background by setting justifyContent : "flex-end", but it is not taken into account.
Do you know why ?