React Native, can't contain children
up vote
1
down vote
favorite
I'm trying to put like a logo/picture in my app. I am already using BackgroundImage so I want to put Image on top of the background. Check my code below. Please help me figure it out.
import React from 'react';
import StyleSheet, Text, View, ImageBackground, Image from 'react-native';
export default class App extends React.Component
render()
return (
<ImageBackground source=require('./app/img/baky.jpeg') style=styles.container>
<View style=styles.inner>
<Image source=require('./app/img/logo.png') style=styles.logo> </Image>
<Text style=styles.txt> Hello!!!! </Text>
</View>
</ImageBackground>
);
const styles = StyleSheet.create(
container:
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
,
inner:
padding: '10%',
justifyContent: 'center',
flexDirection: 'row',
width: '100%',
height: '100%',
backgroundColor: 'rgba(255, 255, 255, .7)'
,
logo:
width: 50,
height: 50
,
txt:
color: 'black',
);
javascript react-native
edited Nov 9 at 21:09
rlemon
13.5k1075114
asked Nov 9 at 20:45
Mar Mar
153
add a comment |
up vote
1
down vote
favorite
I'm trying to put like a logo/picture in my app. I am already using BackgroundImage so I want to put Image on top of the background. Check my code below. Please help me figure it out.
import React from 'react';
import StyleSheet, Text, View, ImageBackground, Image from 'react-native';
export default class App extends React.Component
render()
return (
<ImageBackground source=require('./app/img/baky.jpeg') style=styles.container>
<View style=styles.inner>
<Image source=require('./app/img/logo.png') style=styles.logo> </Image>
<Text style=styles.txt> Hello!!!! </Text>
</View>
</ImageBackground>
);
const styles = StyleSheet.create(
container:
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
,
inner:
padding: '10%',
justifyContent: 'center',
flexDirection: 'row',
width: '100%',
height: '100%',
backgroundColor: 'rgba(255, 255, 255, .7)'
,
logo:
width: 50,
height: 50
,
txt:
color: 'black',
);
javascript react-native
edited Nov 9 at 21:09
rlemon
13.5k1075114
asked Nov 9 at 20:45
Mar Mar
153
3
you have a space in-between the open and close tags. whitespace is an element (text node). make it self closing<Image />
– rlemon
Nov 9 at 20:56
@rhemon i just removed the space between the opening and closing tags and it worked! thanks!!!
– Mar Mar
Nov 9 at 21:23
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I'm trying to put like a logo/picture in my app. I am already using BackgroundImage so I want to put Image on top of the background. Check my code below. Please help me figure it out.
import React from 'react';
import StyleSheet, Text, View, ImageBackground, Image from 'react-native';
export default class App extends React.Component
render()
return (
<ImageBackground source=require('./app/img/baky.jpeg') style=styles.container>
<View style=styles.inner>
<Image source=require('./app/img/logo.png') style=styles.logo> </Image>
<Text style=styles.txt> Hello!!!! </Text>
</View>
</ImageBackground>
);
const styles = StyleSheet.create(
container:
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
,
inner:
padding: '10%',
justifyContent: 'center',
flexDirection: 'row',
width: '100%',
height: '100%',
backgroundColor: 'rgba(255, 255, 255, .7)'
,
logo:
width: 50,
height: 50
,
txt:
color: 'black',
);
javascript react-native
edited Nov 9 at 21:09
rlemon
13.5k1075114
asked Nov 9 at 20:45
Mar Mar
153
I'm trying to put like a logo/picture in my app. I am already using BackgroundImage so I want to put Image on top of the background. Check my code below. Please help me figure it out.
import React from 'react';
import StyleSheet, Text, View, ImageBackground, Image from 'react-native';
export default class App extends React.Component
render()
return (
<ImageBackground source=require('./app/img/baky.jpeg') style=styles.container>
<View style=styles.inner>
<Image source=require('./app/img/logo.png') style=styles.logo> </Image>
<Text style=styles.txt> Hello!!!! </Text>
</View>
</ImageBackground>
);
const styles = StyleSheet.create(
container:
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
,
inner:
padding: '10%',
justifyContent: 'center',
flexDirection: 'row',
width: '100%',
height: '100%',
backgroundColor: 'rgba(255, 255, 255, .7)'
,
logo:
width: 50,
height: 50
,
txt:
color: 'black',
);
javascript react-native
javascript react-native
edited Nov 9 at 21:09
rlemon
13.5k1075114
asked Nov 9 at 20:45
Mar Mar
153
edited Nov 9 at 21:09
rlemon
13.5k1075114
asked Nov 9 at 20:45
Mar Mar
153
edited Nov 9 at 21:09
rlemon
13.5k1075114
edited Nov 9 at 21:09
rlemon
13.5k1075114
edited Nov 9 at 21:09
rlemon
13.5k1075114
13.5k1075114
asked Nov 9 at 20:45
Mar Mar
153
asked Nov 9 at 20:45
Mar Mar
153
asked Nov 9 at 20:45
Mar Mar
153
153
3
you have a space in-between the open and close tags. whitespace is an element (text node). make it self closing<Image />
– rlemon
Nov 9 at 20:56
@rhemon i just removed the space between the opening and closing tags and it worked! thanks!!!
– Mar Mar
Nov 9 at 21:23
add a comment |
3
you have a space in-between the open and close tags. whitespace is an element (text node). make it self closing<Image />
– rlemon
Nov 9 at 20:56
@rhemon i just removed the space between the opening and closing tags and it worked! thanks!!!
– Mar Mar
Nov 9 at 21:23
3
3
you have a space in-between the open and close tags. whitespace is an element (text node). make it self closing
<Image />– rlemon
Nov 9 at 20:56
you have a space in-between the open and close tags. whitespace is an element (text node). make it self closing
<Image />– rlemon
Nov 9 at 20:56
@rhemon i just removed the space between the opening and closing tags and it worked! thanks!!!
– Mar Mar
Nov 9 at 21:23
@rhemon i just removed the space between the opening and closing tags and it worked! thanks!!!
– Mar Mar
Nov 9 at 21:23
add a comment |
1 Answer
1
active
oldest
votes
up vote
-2
down vote
Just change <Image source=require('./app/img/logo.png') style=styles.logo> </Image> to <Image source=require('./app/img/logo.png') style=styles.logo />
answered Nov 9 at 20:56
Andrew Allison
310514
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
-2
down vote
Just change <Image source=require('./app/img/logo.png') style=styles.logo> </Image> to <Image source=require('./app/img/logo.png') style=styles.logo />
answered Nov 9 at 20:56
Andrew Allison
310514
add a comment |
up vote
-2
down vote
Just change <Image source=require('./app/img/logo.png') style=styles.logo> </Image> to <Image source=require('./app/img/logo.png') style=styles.logo />
answered Nov 9 at 20:56
Andrew Allison
310514
add a comment |
up vote
-2
down vote
up vote
-2
down vote
Just change <Image source=require('./app/img/logo.png') style=styles.logo> </Image> to <Image source=require('./app/img/logo.png') style=styles.logo />
answered Nov 9 at 20:56
Andrew Allison
310514
Just change <Image source=require('./app/img/logo.png') style=styles.logo> </Image> to <Image source=require('./app/img/logo.png') style=styles.logo />
answered Nov 9 at 20:56
Andrew Allison
310514
answered Nov 9 at 20:56
Andrew Allison
310514
answered Nov 9 at 20:56
Andrew Allison
310514
answered Nov 9 at 20:56
Andrew Allison
310514
310514
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53233031%2freact-native-image-cant-contain-children%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
3
you have a space in-between the open and close tags. whitespace is an element (text node). make it self closing
<Image />– rlemon
Nov 9 at 20:56
@rhemon i just removed the space between the opening and closing tags and it worked! thanks!!!
– Mar Mar
Nov 9 at 21:23