New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tile component issues with latest react 0.50.0 #709

Closed
cheema38 opened this Issue Nov 11, 2017 · 13 comments

Comments

Projects
None yet
@cheema38

cheema38 commented Nov 11, 2017

Description

  1. Explain what you did
  2. What you expected to happen
  3. What actually happens

Also please include the version of react-native-elements that you are using.

Reproduction Steps and Sample Code

We highly recommend that you try to reproduce your bug on https://snack.expo.io/ and provide a link.

If you can't reproduce the bug on Snack, provide an example of your code and briefly explain what the code is suppose to be doing.

Solution

Can you suggest a possible fix that would address this issue? Ideally, you should be able to submit a PR to fix it. See our contributing guide for more details.

@cheema38

This comment has been minimized.

Show comment
Hide comment
@cheema38

cheema38 Nov 11, 2017

Error: The component cannot contain children. If you want to render content on top of the image, consider using aboslute positioning.

This error is located at:
in Image (at FeaturedTile.js:86)
in RCTView (at View.js:113)
in View (at createAnimatedComponent.js:134)
in AnimatedComponent (at TouchableOpacity.js:239)
in TouchableOpacity (at FeaturedTile.js:82)
in FeaturedTile (at Tile.js:95)
in Tile (at History.js:145)
in RCTView (at View.js:113)
in View (at History.js:144)
in RCTView (at View.js:113)
in View (at VirtualizedList.js:1363)
in CellRenderer (at VirtualizedList.js:550)
in RCTScrollContentView (at ScrollView.js:748)
in RCTScrollView (at ScrollView.js:856)
in ScrollView (at VirtualizedList.js:871)
in VirtualizedList (at FlatList.js:622)
in FlatList (at History.js:140)
in RCTScrollContentView (at ScrollView.js:748)
in RCTScrollView (at ScrollView.js:828)
in ScrollView (at History.js:134)
in RCTView (at View.js:113)
in View (at History.js:123)
in History (at SceneView.js:32)
in SceneView (at TabView.js:79)
in RCTView (at View.js:113)
in View (at TabView.js:78)
in RCTView (at View.js:113)
in View (at TabViewPagerScroll.js:138)
in RCTScrollContentView (at ScrollView.js:748)
in RCTScrollView (at ScrollView.js:856)
in ScrollView (at TabViewPagerScroll.js:117)
in TabViewPagerScroll (at TabViewAnimated.js:77)
in RCTView (at View.js:113)
in View (at TabViewAnimated.js:252)
in TabViewAnimated (at TabView.js:216)
in TabView (at withCachedChildNavigation.js:66)
in withCachedChildNavigation(TabView) (at TabNavigator.js:54)
in Unknown (at createNavigator.js:48)
in Navigator (at createNavigationContainer.js:205)
in NavigationContainer (at SceneView.js:32)
in SceneView (at CardStack.js:410)
in RCTView (at View.js:113)
in View (at createAnimatedComponent.js:134)
in AnimatedComponent (at Card.js:26)
in Card (at PointerEventsContainer.js:55)
in Container (at CardStack.js:440)
in RCTView (at View.js:113)
in View (at CardStack.js:370)
in RCTView (at View.js:113)
in View (at CardStack.js:369)
in CardStack (at CardStackTransitioner.js:103)
in RCTView (at View.js:113)
in View (at Transitioner.js:187)
in Transitioner (at CardStackTransitioner.js:55)
in CardStackTransitioner (at StackNavigator.js:48)
in Unknown (at createNavigator.js:48)
in Navigator (at createNavigationContainer.js:205)
in NavigationContainer (at SceneView.js:32)
in SceneView (at CardStack.js:410)
in RCTView (at View.js:113)
in View (at createAnimatedComponent.js:134)
in AnimatedComponent (at Card.js:26)
in Card (at PointerEventsContainer.js:55)
in Container (at CardStack.js:440)
in RCTView (at View.js:113)
in View (at CardStack.js:370)
in RCTView (at View.js:113)
in View (at CardStack.js:369)
in CardStack (at CardStackTransitioner.js:103)
in RCTView (at View.js:113)
in View (at Transitioner.js:187)
in Transitioner (at CardStackTransitioner.js:55)
in CardStackTransitioner (at StackNavigator.js:48)
in Unknown (at createNavigator.js:48)
in Navigator (at createNavigationContainer.js:205)
in NavigationContainer (at index.js:43)
in App (at renderApplication.js:35)
in RCTView (at View.js:113)
in View (at AppContainer.js:102)
in RCTView (at View.js:113)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:34)

cheema38 commented Nov 11, 2017

Error: The component cannot contain children. If you want to render content on top of the image, consider using aboslute positioning.

This error is located at:
in Image (at FeaturedTile.js:86)
in RCTView (at View.js:113)
in View (at createAnimatedComponent.js:134)
in AnimatedComponent (at TouchableOpacity.js:239)
in TouchableOpacity (at FeaturedTile.js:82)
in FeaturedTile (at Tile.js:95)
in Tile (at History.js:145)
in RCTView (at View.js:113)
in View (at History.js:144)
in RCTView (at View.js:113)
in View (at VirtualizedList.js:1363)
in CellRenderer (at VirtualizedList.js:550)
in RCTScrollContentView (at ScrollView.js:748)
in RCTScrollView (at ScrollView.js:856)
in ScrollView (at VirtualizedList.js:871)
in VirtualizedList (at FlatList.js:622)
in FlatList (at History.js:140)
in RCTScrollContentView (at ScrollView.js:748)
in RCTScrollView (at ScrollView.js:828)
in ScrollView (at History.js:134)
in RCTView (at View.js:113)
in View (at History.js:123)
in History (at SceneView.js:32)
in SceneView (at TabView.js:79)
in RCTView (at View.js:113)
in View (at TabView.js:78)
in RCTView (at View.js:113)
in View (at TabViewPagerScroll.js:138)
in RCTScrollContentView (at ScrollView.js:748)
in RCTScrollView (at ScrollView.js:856)
in ScrollView (at TabViewPagerScroll.js:117)
in TabViewPagerScroll (at TabViewAnimated.js:77)
in RCTView (at View.js:113)
in View (at TabViewAnimated.js:252)
in TabViewAnimated (at TabView.js:216)
in TabView (at withCachedChildNavigation.js:66)
in withCachedChildNavigation(TabView) (at TabNavigator.js:54)
in Unknown (at createNavigator.js:48)
in Navigator (at createNavigationContainer.js:205)
in NavigationContainer (at SceneView.js:32)
in SceneView (at CardStack.js:410)
in RCTView (at View.js:113)
in View (at createAnimatedComponent.js:134)
in AnimatedComponent (at Card.js:26)
in Card (at PointerEventsContainer.js:55)
in Container (at CardStack.js:440)
in RCTView (at View.js:113)
in View (at CardStack.js:370)
in RCTView (at View.js:113)
in View (at CardStack.js:369)
in CardStack (at CardStackTransitioner.js:103)
in RCTView (at View.js:113)
in View (at Transitioner.js:187)
in Transitioner (at CardStackTransitioner.js:55)
in CardStackTransitioner (at StackNavigator.js:48)
in Unknown (at createNavigator.js:48)
in Navigator (at createNavigationContainer.js:205)
in NavigationContainer (at SceneView.js:32)
in SceneView (at CardStack.js:410)
in RCTView (at View.js:113)
in View (at createAnimatedComponent.js:134)
in AnimatedComponent (at Card.js:26)
in Card (at PointerEventsContainer.js:55)
in Container (at CardStack.js:440)
in RCTView (at View.js:113)
in View (at CardStack.js:370)
in RCTView (at View.js:113)
in View (at CardStack.js:369)
in CardStack (at CardStackTransitioner.js:103)
in RCTView (at View.js:113)
in View (at Transitioner.js:187)
in Transitioner (at CardStackTransitioner.js:55)
in CardStackTransitioner (at StackNavigator.js:48)
in Unknown (at createNavigator.js:48)
in Navigator (at createNavigationContainer.js:205)
in NavigationContainer (at index.js:43)
in App (at renderApplication.js:35)
in RCTView (at View.js:113)
in View (at AppContainer.js:102)
in RCTView (at View.js:113)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:34)

@cheema38 cheema38 changed the title from Tile component issues with re to Tile component issues with latest react 0.50.0 Nov 11, 2017

@iRoachie

This comment has been minimized.

Show comment
Hide comment
@iRoachie

iRoachie Nov 11, 2017

Member

Good catch. I simple PR replacing Image with ImageBackground will fix this.

Member

iRoachie commented Nov 11, 2017

Good catch. I simple PR replacing Image with ImageBackground will fix this.

@LinhLK

This comment has been minimized.

Show comment
Hide comment
@LinhLK

LinhLK Nov 13, 2017

hi guy, please tell me about fix this issues, thank you!

LinhLK commented Nov 13, 2017

hi guy, please tell me about fix this issues, thank you!

@chefarchitekt

This comment has been minimized.

Show comment
Hide comment
@chefarchitekt

chefarchitekt Nov 14, 2017

I got the same issue. Here is my code:

Wallpaper.js

import React, { Component } from 'react';
import { View, Image } from 'react-native';

import wallImg from '../../images/psWallpaper.jpg';
import { mobileMetrics } from '../../../views/config';

const IMAGE_WIDTH = mobileMetrics.DEVICE_WIDTH;
const IMAGE_HEIGHT = mobileMetrics.DEVICE_HEIGHT;

class Wallpaper extends Component {
    render() {
        return (
            <View>
                <Image style={styles.picture} source={wallImg}>
                <View>
                    {this.props.children}
                </View>
                </Image>
            </View>
        );
    }  
}

const styles = {
    picture: {
        flex: 1,
        width: null,
        height: null,
        resizeMode: 'cover'
    }
};

export default Wallpaper;

and I got error (Android):

Error: The <Image> component cannot contain children. If you want to render content on top of the image, consider using aboslute positioning.

This error is located at:
    in Image (at Wallpaper.js:14)
    in RCTView (at View.js:113)
    in View (at Wallpaper.js:13)
    in Wallpaper (at FlashLandingScreen.js:41)
    in FlashLandingScreen (created by Connect(FlashLandingScreen))
    in Connect(FlashLandingScreen) (at SceneView.js:32)

.....

chefarchitekt commented Nov 14, 2017

I got the same issue. Here is my code:

Wallpaper.js

import React, { Component } from 'react';
import { View, Image } from 'react-native';

import wallImg from '../../images/psWallpaper.jpg';
import { mobileMetrics } from '../../../views/config';

const IMAGE_WIDTH = mobileMetrics.DEVICE_WIDTH;
const IMAGE_HEIGHT = mobileMetrics.DEVICE_HEIGHT;

class Wallpaper extends Component {
    render() {
        return (
            <View>
                <Image style={styles.picture} source={wallImg}>
                <View>
                    {this.props.children}
                </View>
                </Image>
            </View>
        );
    }  
}

const styles = {
    picture: {
        flex: 1,
        width: null,
        height: null,
        resizeMode: 'cover'
    }
};

export default Wallpaper;

and I got error (Android):

Error: The <Image> component cannot contain children. If you want to render content on top of the image, consider using aboslute positioning.

This error is located at:
    in Image (at Wallpaper.js:14)
    in RCTView (at View.js:113)
    in View (at Wallpaper.js:13)
    in Wallpaper (at FlashLandingScreen.js:41)
    in FlashLandingScreen (created by Connect(FlashLandingScreen))
    in Connect(FlashLandingScreen) (at SceneView.js:32)

.....

@chefarchitekt

This comment has been minimized.

Show comment
Hide comment
@chefarchitekt

chefarchitekt Nov 14, 2017

This happened after I updated to the latest react-native. Here are my dependencies:

"dependencies": {
    "axios": "^0.17.1",
    "lodash": "^4.17.4",
    "prop-types": "^15.6.0",
    "react": "16.1.0",
    "react-native": "0.50.3",
    "react-native-communications": "^2.2.1",
    "react-native-elements": "^0.18.2",
    "react-native-md5": "^1.0.0",
    "react-native-vector-icons": "^4.4.2",
    "react-navigation": "^1.0.0-beta.19",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0",
    "validator": "^9.1.1"
  },
  "devDependencies": {
    "babel-jest": "21.2.0",
    "babel-preset-react-native": "4.0.0",
    "eslint-config-defaults": "^9.0.0",
    "eslint-config-rallycoding": "^3.2.0",
    "jest": "21.2.1",
    "react-test-renderer": "16.1.0",
    "reactotron-react-native": "^1.12.3"
  },

chefarchitekt commented Nov 14, 2017

This happened after I updated to the latest react-native. Here are my dependencies:

"dependencies": {
    "axios": "^0.17.1",
    "lodash": "^4.17.4",
    "prop-types": "^15.6.0",
    "react": "16.1.0",
    "react-native": "0.50.3",
    "react-native-communications": "^2.2.1",
    "react-native-elements": "^0.18.2",
    "react-native-md5": "^1.0.0",
    "react-native-vector-icons": "^4.4.2",
    "react-navigation": "^1.0.0-beta.19",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0",
    "validator": "^9.1.1"
  },
  "devDependencies": {
    "babel-jest": "21.2.0",
    "babel-preset-react-native": "4.0.0",
    "eslint-config-defaults": "^9.0.0",
    "eslint-config-rallycoding": "^3.2.0",
    "jest": "21.2.1",
    "react-test-renderer": "16.1.0",
    "reactotron-react-native": "^1.12.3"
  },
@fossecode

This comment has been minimized.

Show comment
Hide comment
@fossecode

fossecode Nov 17, 2017

<Image> with nested content is no longer supported. Looking into <ImageBackground> instead if this is something you did in our app

https://github.com/facebook/react-native/releases/tag/v0.50.0

fossecode commented Nov 17, 2017

<Image> with nested content is no longer supported. Looking into <ImageBackground> instead if this is something you did in our app

https://github.com/facebook/react-native/releases/tag/v0.50.0

@lucneesby

This comment has been minimized.

Show comment
Hide comment
@lucneesby

lucneesby Nov 18, 2017

Replacing the Image component with BackgroundImage fixed my issues with this error

lucneesby commented Nov 18, 2017

Replacing the Image component with BackgroundImage fixed my issues with this error

@jenessawhite

This comment has been minimized.

Show comment
Hide comment
@jenessawhite

jenessawhite Nov 19, 2017

Contributor

@iRoachie I'd like to help with this PR, if the master is on RN ^0.41.2 but the breaking change for this happens on RN 0.50 how should I go about submitting a PR?

Contributor

jenessawhite commented Nov 19, 2017

@iRoachie I'd like to help with this PR, if the master is on RN ^0.41.2 but the breaking change for this happens on RN 0.50 how should I go about submitting a PR?

@iRoachie

This comment has been minimized.

Show comment
Hide comment
@iRoachie
Member

iRoachie commented Nov 19, 2017

@reznik789

This comment has been minimized.

Show comment
Hide comment
@reznik789

reznik789 Nov 20, 2017

Now everything okay with Tile, but FeaturedTile have this issue

reznik789 commented Nov 20, 2017

Now everything okay with Tile, but FeaturedTile have this issue

@ishaqashraf

This comment has been minimized.

Show comment
Hide comment
@ishaqashraf

ishaqashraf Nov 21, 2017

use ImageBackground property with content .
eg.

<ImageBackground 
   style={styles.mainContainer}
   source={require('../images/samples/login_bg.png')}>
              `<Text>hiii</Text>`
</ImageBackground>

ishaqashraf commented Nov 21, 2017

use ImageBackground property with content .
eg.

<ImageBackground 
   style={styles.mainContainer}
   source={require('../images/samples/login_bg.png')}>
              `<Text>hiii</Text>`
</ImageBackground>
@xavier-villelegier

This comment has been minimized.

Show comment
Hide comment
@xavier-villelegier

xavier-villelegier Nov 24, 2017

Collaborator

Fixed in v0.18.4

Collaborator

xavier-villelegier commented Nov 24, 2017

Fixed in v0.18.4

@ABKZR

This comment has been minimized.

Show comment
Hide comment
@ABKZR

ABKZR Jan 4, 2018

Error: The component cannot contain children. If you want to render content on top of the image, consider using aboslute positioning.

This error is located at:
in Image (at App.js:17)
in RCTView (at View.js:112)
in View (at App.js:16)
in App (at renderApplication.js:35)
in RCTView (at View.js:112)
in View (at AppContainer.js:102)
in RCTView (at View.js:112)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:34)
Image_render
C:\Project\Login_Page\node_modules\react-native\Libraries\Image\Image.android.js:277:22
finishClassComponent
C:\Project\Login_Page\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:1667:86
updateClassComponent
C:\Project\Login_Page\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:1659:33
beginWork
C:\Project\Login_Page\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:1786:44
performUnitOfWork
C:\Project\Login_Page\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:2528:33
workLoop
C:\Project\Login_Page\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:2554:141
_invokeGuardedCallback
C:\Project\Login_Page\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:73:23
invokeGuardedCallback
C:\Project\Login_Page\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:47:40
performWork
C:\Project\Login_Page\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:2593:41
scheduleUpdateImpl
C:\Project\Login_Page\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:2728:101
scheduleUpdate
C:\Project\Login_Page\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:2711:38
scheduleTopLevelUpdate
C:\Project\Login_Page\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:2992:91
updateContainer
C:\Project\Login_Page\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:3003:39
render
C:\Project\Login_Page\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:3948:53
renderApplication
C:\Project\Login_Page\node_modules\react-native\Libraries\ReactNative\renderApplication.js:34:4
run
C:\Project\Login_Page\node_modules\react-native\Libraries\ReactNative\AppRegistry.js:120:10
runApplication
C:\Project\Login_Page\node_modules\react-native\Libraries\ReactNative\AppRegistry.js:207:26
__callFunction
C:\Project\Login_Page\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:299:47

C:\Project\Login_Page\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:26
__guard
C:\Project\Login_Page\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:262:6
callFunctionReturnFlushedQueue
C:\Project\Login_Page\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:110:17

Solution of this problem?????
ImageBackground Didn't work

ABKZR commented Jan 4, 2018

Error: The component cannot contain children. If you want to render content on top of the image, consider using aboslute positioning.

This error is located at:
in Image (at App.js:17)
in RCTView (at View.js:112)
in View (at App.js:16)
in App (at renderApplication.js:35)
in RCTView (at View.js:112)
in View (at AppContainer.js:102)
in RCTView (at View.js:112)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:34)
Image_render
C:\Project\Login_Page\node_modules\react-native\Libraries\Image\Image.android.js:277:22
finishClassComponent
C:\Project\Login_Page\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:1667:86
updateClassComponent
C:\Project\Login_Page\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:1659:33
beginWork
C:\Project\Login_Page\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:1786:44
performUnitOfWork
C:\Project\Login_Page\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:2528:33
workLoop
C:\Project\Login_Page\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:2554:141
_invokeGuardedCallback
C:\Project\Login_Page\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:73:23
invokeGuardedCallback
C:\Project\Login_Page\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:47:40
performWork
C:\Project\Login_Page\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:2593:41
scheduleUpdateImpl
C:\Project\Login_Page\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:2728:101
scheduleUpdate
C:\Project\Login_Page\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:2711:38
scheduleTopLevelUpdate
C:\Project\Login_Page\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:2992:91
updateContainer
C:\Project\Login_Page\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:3003:39
render
C:\Project\Login_Page\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:3948:53
renderApplication
C:\Project\Login_Page\node_modules\react-native\Libraries\ReactNative\renderApplication.js:34:4
run
C:\Project\Login_Page\node_modules\react-native\Libraries\ReactNative\AppRegistry.js:120:10
runApplication
C:\Project\Login_Page\node_modules\react-native\Libraries\ReactNative\AppRegistry.js:207:26
__callFunction
C:\Project\Login_Page\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:299:47

C:\Project\Login_Page\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:26
__guard
C:\Project\Login_Page\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:262:6
callFunctionReturnFlushedQueue
C:\Project\Login_Page\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:110:17

Solution of this problem?????
ImageBackground Didn't work

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment