How to add images? (React Native)

I tried several codes but I only have errors every time.
How to add images from my gallery (no links) one below the other, with text
at the top and bottom of each image?

Like this:

example

import React, { Component } from "react";

import { Text, View, StyleSheet, Image, ImageBackground,ScrollView } from "react-native";

import withBackground from "../components/WithBackground";



class LinksScreen extends Component {

  render() {

    return (

    

<ScrollView> 

<text>Hi</text>

 <Image source={require('./assets/images/ici.jpg')} />

 <text> Hello</text>



<text> Hi2</text>

 <Image source={require('./assets/images/ici2.jpg')} />

<text> Hello2</text>

</ScrollView> 

    

  );

  }}



export default withBackground(LinksScreen);

I am novice,
any help would be appreciated.

edited Nov 22 '18 at 19:33

Jose Vf

737620

asked Nov 22 '18 at 13:11

Lylys

227

1

Can you show the errors you are getting?

– Jose Vf
Nov 22 '18 at 13:13

I don't have a code error but the screen of my android is red. (error code: 500) followed by a long text.

– Lylys
Nov 22 '18 at 13:24

Possible duplicate of Where to put images in a react-native project?

– kivul
Nov 22 '18 at 13:42

@Lylys Well, can you post a screenshot of the error instead?

– Jose Vf
Nov 22 '18 at 16:04

add a comment |

I tried several codes but I only have errors every time.
How to add images from my gallery (no links) one below the other, with text
at the top and bottom of each image?

Like this:

example

import React, { Component } from "react";

import { Text, View, StyleSheet, Image, ImageBackground,ScrollView } from "react-native";

import withBackground from "../components/WithBackground";



class LinksScreen extends Component {

  render() {

    return (

    

<ScrollView> 

<text>Hi</text>

 <Image source={require('./assets/images/ici.jpg')} />

 <text> Hello</text>



<text> Hi2</text>

 <Image source={require('./assets/images/ici2.jpg')} />

<text> Hello2</text>

</ScrollView> 

    

  );

  }}



export default withBackground(LinksScreen);

I am novice,
any help would be appreciated.

edited Nov 22 '18 at 19:33

Jose Vf

737620

asked Nov 22 '18 at 13:11

Lylys

227

1

Can you show the errors you are getting?

– Jose Vf
Nov 22 '18 at 13:13

I don't have a code error but the screen of my android is red. (error code: 500) followed by a long text.

– Lylys
Nov 22 '18 at 13:24

Possible duplicate of Where to put images in a react-native project?

– kivul
Nov 22 '18 at 13:42

@Lylys Well, can you post a screenshot of the error instead?

– Jose Vf
Nov 22 '18 at 16:04

add a comment |

I tried several codes but I only have errors every time.
How to add images from my gallery (no links) one below the other, with text
at the top and bottom of each image?

Like this:

example

import React, { Component } from "react";

import { Text, View, StyleSheet, Image, ImageBackground,ScrollView } from "react-native";

import withBackground from "../components/WithBackground";



class LinksScreen extends Component {

  render() {

    return (

    

<ScrollView> 

<text>Hi</text>

 <Image source={require('./assets/images/ici.jpg')} />

 <text> Hello</text>



<text> Hi2</text>

 <Image source={require('./assets/images/ici2.jpg')} />

<text> Hello2</text>

</ScrollView> 

    

  );

  }}



export default withBackground(LinksScreen);

I am novice,
any help would be appreciated.

edited Nov 22 '18 at 19:33

Jose Vf

737620

asked Nov 22 '18 at 13:11

Lylys

227

I tried several codes but I only have errors every time.
How to add images from my gallery (no links) one below the other, with text
at the top and bottom of each image?

Like this:

example

import React, { Component } from "react";

import { Text, View, StyleSheet, Image, ImageBackground,ScrollView } from "react-native";

import withBackground from "../components/WithBackground";



class LinksScreen extends Component {

  render() {

    return (

    

<ScrollView> 

<text>Hi</text>

 <Image source={require('./assets/images/ici.jpg')} />

 <text> Hello</text>



<text> Hi2</text>

 <Image source={require('./assets/images/ici2.jpg')} />

<text> Hello2</text>

</ScrollView> 

    

  );

  }}



export default withBackground(LinksScreen);

I am novice,
any help would be appreciated.

import React, { Component } from "react";

import { Text, View, StyleSheet, Image, ImageBackground,ScrollView } from "react-native";

import withBackground from "../components/WithBackground";



class LinksScreen extends Component {

  render() {

    return (

    

<ScrollView> 

<text>Hi</text>

 <Image source={require('./assets/images/ici.jpg')} />

 <text> Hello</text>



<text> Hi2</text>

 <Image source={require('./assets/images/ici2.jpg')} />

<text> Hello2</text>

</ScrollView> 

    

  );

  }}



export default withBackground(LinksScreen);

import React, { Component } from "react";

import { Text, View, StyleSheet, Image, ImageBackground,ScrollView } from "react-native";

import withBackground from "../components/WithBackground";



class LinksScreen extends Component {

  render() {

    return (

    

<ScrollView> 

<text>Hi</text>

 <Image source={require('./assets/images/ici.jpg')} />

 <text> Hello</text>



<text> Hi2</text>

 <Image source={require('./assets/images/ici2.jpg')} />

<text> Hello2</text>

</ScrollView> 

    

  );

  }}



export default withBackground(LinksScreen);

javascript image react-native text

edited Nov 22 '18 at 19:33

Jose Vf

737620

asked Nov 22 '18 at 13:11

Lylys

227

edited Nov 22 '18 at 19:33

Jose Vf

737620

asked Nov 22 '18 at 13:11

Lylys

227

edited Nov 22 '18 at 19:33

Jose Vf

737620

edited Nov 22 '18 at 19:33

Jose Vf

737620

edited Nov 22 '18 at 19:33

Jose Vf

737620

asked Nov 22 '18 at 13:11

Lylys

227

asked Nov 22 '18 at 13:11

Lylys

227

asked Nov 22 '18 at 13:11

Lylys

227

1

Can you show the errors you are getting?

– Jose Vf
Nov 22 '18 at 13:13

I don't have a code error but the screen of my android is red. (error code: 500) followed by a long text.

– Lylys
Nov 22 '18 at 13:24

Possible duplicate of Where to put images in a react-native project?

– kivul
Nov 22 '18 at 13:42

@Lylys Well, can you post a screenshot of the error instead?

– Jose Vf
Nov 22 '18 at 16:04

add a comment |

1

Can you show the errors you are getting?

– Jose Vf
Nov 22 '18 at 13:13

I don't have a code error but the screen of my android is red. (error code: 500) followed by a long text.

– Lylys
Nov 22 '18 at 13:24

Possible duplicate of Where to put images in a react-native project?

– kivul
Nov 22 '18 at 13:42

@Lylys Well, can you post a screenshot of the error instead?

– Jose Vf
Nov 22 '18 at 16:04

Can you show the errors you are getting?

– Jose Vf
Nov 22 '18 at 13:13

I don't have a code error but the screen of my android is red. (error code: 500) followed by a long text.

– Lylys
Nov 22 '18 at 13:24

Possible duplicate of Where to put images in a react-native project?

– kivul
Nov 22 '18 at 13:42

@Lylys Well, can you post a screenshot of the error instead?

– Jose Vf
Nov 22 '18 at 16:04

add a comment |

3 Answers
3

active

oldest

votes

Can you give a screenshot of the result you are expecting?
There is something called a FlatList you can use that to achieve a list of images.

Note : menuData is an array of objects and Item is an object that has image title and URL

<FlatList

    data={this.props.menuData}

    renderItem={({ item }) => {

        return(

            <View style={{ flexDirection: 'row' }}>

                <Image source={require(item.imageURL)} />

                <Text>{item.imageText}</Text>

            </View>

        );

    }}

    keyExtractor={(item) => item.title }

/>

Use this style for Text:

textStyle: {

    flex: 1,

    width: '100%',

    position: 'absolute',    

    alignSelf: 'center',   

    backgroundColor: 'rgba(0.57, 0.57, 0.57, 0.3)', 

    height: '100%',

}

edited Nov 22 '18 at 14:00

answered Nov 22 '18 at 13:36

Manju Basha

312420

see my post please, I updated it

– Lylys
Nov 22 '18 at 13:49

Happy to help, and welcome to Stack Overflow. If this answer or any other one solved your issue, please mark it as accepted.

– Manju Basha
Nov 23 '18 at 5:10

@Lylys i saw you error screenshot. It is related to the export default code that you have written. You can export only one component by default in a module. So kindly change your code to export withBackGround(LinksScreen); instead of export default withBackGround(LinksScreen);

– Manju Basha
Nov 23 '18 at 5:18

yes I understand, but doing this 'export withBackGround (LinksScreen);' the word "export" is underlined in red. An idea to keep my background and add images? (This background code allows me to use a single code for the background of all my pages)

– Lylys
Nov 23 '18 at 9:37

You are importing withBackground in LinksScreen Component. You are again trying to export it in the same component. So literally you are exporting it twice. Both in LinksScreen and in WithBackground.js. You are not allowed to do that is the error. So what are you trying to achieve? retain same image for all or retain the layout and load images>

– Manju Basha
Nov 23 '18 at 12:22

|
show 1 more comment

I am going to show you a possibility of working with native-base, but it's just a suggestion. You can see some possibilities in the official docs: https://docs.nativebase.io/Components.html#Components

import React, { Component } from 'react';

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

import { Card, CardItem, Text, Left, Right } from 'native-base';

import styles from './styles';



class ProductImage extends Component {

  render() {

    return (

      <View style={{ flex: 1 }}>

        <ImageBackground

          style={ styles.image }

          source={{ uri: this.props.photo }} 

        >

        </ImageBackground>

      </View>

    );

  }

}



export default ProductImage

So if you want to put a photo without props, it's just put the link image, like 'https://www.w3schools.com/w3css/img_lights.jpg'. Don't forget to install the dependence: npm install native-base --save

answered Nov 22 '18 at 13:34

yoongi_s

I already have a background image => "export default with Background (LinksScreen);" I only want to put an image a bit like a map with text below and above.

– Lylys
Nov 22 '18 at 13:42

add a comment |

Can you try this once:

<ScrollView> 

  <View>

    <Text>Hi</Text>

    <Image source={require('./assets/snack-icon.png')} style={{ width: '100%', 

      height: 150, marginBottom: 10, padding: 10 }} resizeMode="cover" />

  </View>

  <View>

    <Text> Hi2</Text>

    <Image source={require('./assets/snack-icon.png')} style={{ width: '100%', 

      height: 150, marginBottom: 10, padding: 10 }} resizeMode="cover" />

    <Text> Hello2</Text>

   </View>

</ScrollView>

answered Nov 22 '18 at 13:52

Suprabha

1556

As you explained above,Text between the images. I haven't added at the top of image. Do you need to add the text at top of image?

– Suprabha
Nov 22 '18 at 13:53

yes but, it doesn't work the screen of my android device is still red.

– Lylys
Nov 22 '18 at 13:55

What's the error you are getting ?

– Suprabha
Nov 22 '18 at 13:56

I was checking here, You can check this: snack.expo.io/@supi/YW54aW If still you are getting any error, then just let me know. Will check from my end

– Suprabha
Nov 22 '18 at 14:04

this is the result : image.noelshack.com/fichiers/2018/47/4/…

– Lylys
Nov 22 '18 at 14:27

|
show 2 more comments

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53431795%2fhow-to-add-images-react-native%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

Can you give a screenshot of the result you are expecting?
There is something called a FlatList you can use that to achieve a list of images.

Note : menuData is an array of objects and Item is an object that has image title and URL

<FlatList

    data={this.props.menuData}

    renderItem={({ item }) => {

        return(

            <View style={{ flexDirection: 'row' }}>

                <Image source={require(item.imageURL)} />

                <Text>{item.imageText}</Text>

            </View>

        );

    }}

    keyExtractor={(item) => item.title }

/>

Use this style for Text:

textStyle: {

    flex: 1,

    width: '100%',

    position: 'absolute',    

    alignSelf: 'center',   

    backgroundColor: 'rgba(0.57, 0.57, 0.57, 0.3)', 

    height: '100%',

}

edited Nov 22 '18 at 14:00

answered Nov 22 '18 at 13:36

Manju Basha

312420

see my post please, I updated it

– Lylys
Nov 22 '18 at 13:49

Happy to help, and welcome to Stack Overflow. If this answer or any other one solved your issue, please mark it as accepted.

– Manju Basha
Nov 23 '18 at 5:10

@Lylys i saw you error screenshot. It is related to the export default code that you have written. You can export only one component by default in a module. So kindly change your code to export withBackGround(LinksScreen); instead of export default withBackGround(LinksScreen);

– Manju Basha
Nov 23 '18 at 5:18

yes I understand, but doing this 'export withBackGround (LinksScreen);' the word "export" is underlined in red. An idea to keep my background and add images? (This background code allows me to use a single code for the background of all my pages)

– Lylys
Nov 23 '18 at 9:37

You are importing withBackground in LinksScreen Component. You are again trying to export it in the same component. So literally you are exporting it twice. Both in LinksScreen and in WithBackground.js. You are not allowed to do that is the error. So what are you trying to achieve? retain same image for all or retain the layout and load images>

– Manju Basha
Nov 23 '18 at 12:22

|
show 1 more comment

Can you give a screenshot of the result you are expecting?
There is something called a FlatList you can use that to achieve a list of images.

Note : menuData is an array of objects and Item is an object that has image title and URL

<FlatList

    data={this.props.menuData}

    renderItem={({ item }) => {

        return(

            <View style={{ flexDirection: 'row' }}>

                <Image source={require(item.imageURL)} />

                <Text>{item.imageText}</Text>

            </View>

        );

    }}

    keyExtractor={(item) => item.title }

/>

Use this style for Text:

textStyle: {

    flex: 1,

    width: '100%',

    position: 'absolute',    

    alignSelf: 'center',   

    backgroundColor: 'rgba(0.57, 0.57, 0.57, 0.3)', 

    height: '100%',

}

edited Nov 22 '18 at 14:00

answered Nov 22 '18 at 13:36

Manju Basha

312420

see my post please, I updated it

– Lylys
Nov 22 '18 at 13:49

Happy to help, and welcome to Stack Overflow. If this answer or any other one solved your issue, please mark it as accepted.

– Manju Basha
Nov 23 '18 at 5:10

@Lylys i saw you error screenshot. It is related to the export default code that you have written. You can export only one component by default in a module. So kindly change your code to export withBackGround(LinksScreen); instead of export default withBackGround(LinksScreen);

– Manju Basha
Nov 23 '18 at 5:18

yes I understand, but doing this 'export withBackGround (LinksScreen);' the word "export" is underlined in red. An idea to keep my background and add images? (This background code allows me to use a single code for the background of all my pages)

– Lylys
Nov 23 '18 at 9:37

You are importing withBackground in LinksScreen Component. You are again trying to export it in the same component. So literally you are exporting it twice. Both in LinksScreen and in WithBackground.js. You are not allowed to do that is the error. So what are you trying to achieve? retain same image for all or retain the layout and load images>

– Manju Basha
Nov 23 '18 at 12:22

|
show 1 more comment

Can you give a screenshot of the result you are expecting?
There is something called a FlatList you can use that to achieve a list of images.

Note : menuData is an array of objects and Item is an object that has image title and URL

<FlatList

    data={this.props.menuData}

    renderItem={({ item }) => {

        return(

            <View style={{ flexDirection: 'row' }}>

                <Image source={require(item.imageURL)} />

                <Text>{item.imageText}</Text>

            </View>

        );

    }}

    keyExtractor={(item) => item.title }

/>

Use this style for Text:

textStyle: {

    flex: 1,

    width: '100%',

    position: 'absolute',    

    alignSelf: 'center',   

    backgroundColor: 'rgba(0.57, 0.57, 0.57, 0.3)', 

    height: '100%',

}

edited Nov 22 '18 at 14:00

answered Nov 22 '18 at 13:36

Manju Basha

312420

Can you give a screenshot of the result you are expecting?
There is something called a FlatList you can use that to achieve a list of images.

Note : menuData is an array of objects and Item is an object that has image title and URL

<FlatList

    data={this.props.menuData}

    renderItem={({ item }) => {

        return(

            <View style={{ flexDirection: 'row' }}>

                <Image source={require(item.imageURL)} />

                <Text>{item.imageText}</Text>

            </View>

        );

    }}

    keyExtractor={(item) => item.title }

/>

Use this style for Text:

textStyle: {

    flex: 1,

    width: '100%',

    position: 'absolute',    

    alignSelf: 'center',   

    backgroundColor: 'rgba(0.57, 0.57, 0.57, 0.3)', 

    height: '100%',

}

edited Nov 22 '18 at 14:00

answered Nov 22 '18 at 13:36

Manju Basha

312420

edited Nov 22 '18 at 14:00

answered Nov 22 '18 at 13:36

Manju Basha

312420

answered Nov 22 '18 at 13:36

Manju Basha

312420

answered Nov 22 '18 at 13:36

Manju Basha

312420

see my post please, I updated it

– Lylys
Nov 22 '18 at 13:49

Happy to help, and welcome to Stack Overflow. If this answer or any other one solved your issue, please mark it as accepted.

– Manju Basha
Nov 23 '18 at 5:10

@Lylys i saw you error screenshot. It is related to the export default code that you have written. You can export only one component by default in a module. So kindly change your code to export withBackGround(LinksScreen); instead of export default withBackGround(LinksScreen);

– Manju Basha
Nov 23 '18 at 5:18

yes I understand, but doing this 'export withBackGround (LinksScreen);' the word "export" is underlined in red. An idea to keep my background and add images? (This background code allows me to use a single code for the background of all my pages)

– Lylys
Nov 23 '18 at 9:37

You are importing withBackground in LinksScreen Component. You are again trying to export it in the same component. So literally you are exporting it twice. Both in LinksScreen and in WithBackground.js. You are not allowed to do that is the error. So what are you trying to achieve? retain same image for all or retain the layout and load images>

– Manju Basha
Nov 23 '18 at 12:22

|
show 1 more comment

see my post please, I updated it

– Lylys
Nov 22 '18 at 13:49

Happy to help, and welcome to Stack Overflow. If this answer or any other one solved your issue, please mark it as accepted.

– Manju Basha
Nov 23 '18 at 5:10

@Lylys i saw you error screenshot. It is related to the export default code that you have written. You can export only one component by default in a module. So kindly change your code to export withBackGround(LinksScreen); instead of export default withBackGround(LinksScreen);

– Manju Basha
Nov 23 '18 at 5:18

yes I understand, but doing this 'export withBackGround (LinksScreen);' the word "export" is underlined in red. An idea to keep my background and add images? (This background code allows me to use a single code for the background of all my pages)

– Lylys
Nov 23 '18 at 9:37

You are importing withBackground in LinksScreen Component. You are again trying to export it in the same component. So literally you are exporting it twice. Both in LinksScreen and in WithBackground.js. You are not allowed to do that is the error. So what are you trying to achieve? retain same image for all or retain the layout and load images>

– Manju Basha
Nov 23 '18 at 12:22

see my post please, I updated it

– Lylys
Nov 22 '18 at 13:49

Happy to help, and welcome to Stack Overflow. If this answer or any other one solved your issue, please mark it as accepted.

– Manju Basha
Nov 23 '18 at 5:10

@Lylys i saw you error screenshot. It is related to the export default code that you have written. You can export only one component by default in a module. So kindly change your code to export withBackGround(LinksScreen); instead of export default withBackGround(LinksScreen);

– Manju Basha
Nov 23 '18 at 5:18

yes I understand, but doing this 'export withBackGround (LinksScreen);' the word "export" is underlined in red. An idea to keep my background and add images? (This background code allows me to use a single code for the background of all my pages)

– Lylys
Nov 23 '18 at 9:37

You are importing withBackground in LinksScreen Component. You are again trying to export it in the same component. So literally you are exporting it twice. Both in LinksScreen and in WithBackground.js. You are not allowed to do that is the error. So what are you trying to achieve? retain same image for all or retain the layout and load images>

– Manju Basha
Nov 23 '18 at 12:22

|
show 1 more comment

import React, { Component } from 'react';

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

import { Card, CardItem, Text, Left, Right } from 'native-base';

import styles from './styles';



class ProductImage extends Component {

  render() {

    return (

      <View style={{ flex: 1 }}>

        <ImageBackground

          style={ styles.image }

          source={{ uri: this.props.photo }} 

        >

        </ImageBackground>

      </View>

    );

  }

}



export default ProductImage

answered Nov 22 '18 at 13:34

yoongi_s

I already have a background image => "export default with Background (LinksScreen);" I only want to put an image a bit like a map with text below and above.

– Lylys
Nov 22 '18 at 13:42

add a comment |

import React, { Component } from 'react';

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

import { Card, CardItem, Text, Left, Right } from 'native-base';

import styles from './styles';



class ProductImage extends Component {

  render() {

    return (

      <View style={{ flex: 1 }}>

        <ImageBackground

          style={ styles.image }

          source={{ uri: this.props.photo }} 

        >

        </ImageBackground>

      </View>

    );

  }

}



export default ProductImage

answered Nov 22 '18 at 13:34

yoongi_s

I already have a background image => "export default with Background (LinksScreen);" I only want to put an image a bit like a map with text below and above.

– Lylys
Nov 22 '18 at 13:42

add a comment |

import React, { Component } from 'react';

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

import { Card, CardItem, Text, Left, Right } from 'native-base';

import styles from './styles';



class ProductImage extends Component {

  render() {

    return (

      <View style={{ flex: 1 }}>

        <ImageBackground

          style={ styles.image }

          source={{ uri: this.props.photo }} 

        >

        </ImageBackground>

      </View>

    );

  }

}



export default ProductImage

answered Nov 22 '18 at 13:34

yoongi_s

import React, { Component } from 'react';

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

import { Card, CardItem, Text, Left, Right } from 'native-base';

import styles from './styles';



class ProductImage extends Component {

  render() {

    return (

      <View style={{ flex: 1 }}>

        <ImageBackground

          style={ styles.image }

          source={{ uri: this.props.photo }} 

        >

        </ImageBackground>

      </View>

    );

  }

}



export default ProductImage

answered Nov 22 '18 at 13:34

yoongi_s

answered Nov 22 '18 at 13:34

yoongi_s

answered Nov 22 '18 at 13:34

yoongi_s

answered Nov 22 '18 at 13:34

yoongi_s

I already have a background image => "export default with Background (LinksScreen);" I only want to put an image a bit like a map with text below and above.

– Lylys
Nov 22 '18 at 13:42

add a comment |

I already have a background image => "export default with Background (LinksScreen);" I only want to put an image a bit like a map with text below and above.

– Lylys
Nov 22 '18 at 13:42

I already have a background image => "export default with Background (LinksScreen);" I only want to put an image a bit like a map with text below and above.

– Lylys
Nov 22 '18 at 13:42

add a comment |

Can you try this once:

<ScrollView> 

  <View>

    <Text>Hi</Text>

    <Image source={require('./assets/snack-icon.png')} style={{ width: '100%', 

      height: 150, marginBottom: 10, padding: 10 }} resizeMode="cover" />

  </View>

  <View>

    <Text> Hi2</Text>

    <Image source={require('./assets/snack-icon.png')} style={{ width: '100%', 

      height: 150, marginBottom: 10, padding: 10 }} resizeMode="cover" />

    <Text> Hello2</Text>

   </View>

</ScrollView>

answered Nov 22 '18 at 13:52

Suprabha

1556

As you explained above,Text between the images. I haven't added at the top of image. Do you need to add the text at top of image?

– Suprabha
Nov 22 '18 at 13:53

yes but, it doesn't work the screen of my android device is still red.

– Lylys
Nov 22 '18 at 13:55

What's the error you are getting ?

– Suprabha
Nov 22 '18 at 13:56

I was checking here, You can check this: snack.expo.io/@supi/YW54aW If still you are getting any error, then just let me know. Will check from my end

– Suprabha
Nov 22 '18 at 14:04

this is the result : image.noelshack.com/fichiers/2018/47/4/…

– Lylys
Nov 22 '18 at 14:27

|
show 2 more comments

Can you try this once:

<ScrollView> 

  <View>

    <Text>Hi</Text>

    <Image source={require('./assets/snack-icon.png')} style={{ width: '100%', 

      height: 150, marginBottom: 10, padding: 10 }} resizeMode="cover" />

  </View>

  <View>

    <Text> Hi2</Text>

    <Image source={require('./assets/snack-icon.png')} style={{ width: '100%', 

      height: 150, marginBottom: 10, padding: 10 }} resizeMode="cover" />

    <Text> Hello2</Text>

   </View>

</ScrollView>

answered Nov 22 '18 at 13:52

Suprabha

1556

As you explained above,Text between the images. I haven't added at the top of image. Do you need to add the text at top of image?

– Suprabha
Nov 22 '18 at 13:53

yes but, it doesn't work the screen of my android device is still red.

– Lylys
Nov 22 '18 at 13:55

What's the error you are getting ?

– Suprabha
Nov 22 '18 at 13:56

I was checking here, You can check this: snack.expo.io/@supi/YW54aW If still you are getting any error, then just let me know. Will check from my end

– Suprabha
Nov 22 '18 at 14:04

this is the result : image.noelshack.com/fichiers/2018/47/4/…

– Lylys
Nov 22 '18 at 14:27

|
show 2 more comments

Can you try this once:

<ScrollView> 

  <View>

    <Text>Hi</Text>

    <Image source={require('./assets/snack-icon.png')} style={{ width: '100%', 

      height: 150, marginBottom: 10, padding: 10 }} resizeMode="cover" />

  </View>

  <View>

    <Text> Hi2</Text>

    <Image source={require('./assets/snack-icon.png')} style={{ width: '100%', 

      height: 150, marginBottom: 10, padding: 10 }} resizeMode="cover" />

    <Text> Hello2</Text>

   </View>

</ScrollView>

answered Nov 22 '18 at 13:52

Suprabha

1556

Can you try this once:

<ScrollView> 

  <View>

    <Text>Hi</Text>

    <Image source={require('./assets/snack-icon.png')} style={{ width: '100%', 

      height: 150, marginBottom: 10, padding: 10 }} resizeMode="cover" />

  </View>

  <View>

    <Text> Hi2</Text>

    <Image source={require('./assets/snack-icon.png')} style={{ width: '100%', 

      height: 150, marginBottom: 10, padding: 10 }} resizeMode="cover" />

    <Text> Hello2</Text>

   </View>

</ScrollView>

answered Nov 22 '18 at 13:52

Suprabha

1556

answered Nov 22 '18 at 13:52

Suprabha

1556

answered Nov 22 '18 at 13:52

Suprabha

1556

answered Nov 22 '18 at 13:52

Suprabha

1556

As you explained above,Text between the images. I haven't added at the top of image. Do you need to add the text at top of image?

– Suprabha
Nov 22 '18 at 13:53

yes but, it doesn't work the screen of my android device is still red.

– Lylys
Nov 22 '18 at 13:55

What's the error you are getting ?

– Suprabha
Nov 22 '18 at 13:56

I was checking here, You can check this: snack.expo.io/@supi/YW54aW If still you are getting any error, then just let me know. Will check from my end

– Suprabha
Nov 22 '18 at 14:04

this is the result : image.noelshack.com/fichiers/2018/47/4/…

– Lylys
Nov 22 '18 at 14:27

|
show 2 more comments

As you explained above,Text between the images. I haven't added at the top of image. Do you need to add the text at top of image?

– Suprabha
Nov 22 '18 at 13:53

yes but, it doesn't work the screen of my android device is still red.

– Lylys
Nov 22 '18 at 13:55

What's the error you are getting ?

– Suprabha
Nov 22 '18 at 13:56

I was checking here, You can check this: snack.expo.io/@supi/YW54aW If still you are getting any error, then just let me know. Will check from my end

– Suprabha
Nov 22 '18 at 14:04

this is the result : image.noelshack.com/fichiers/2018/47/4/…

– Lylys
Nov 22 '18 at 14:27

As you explained above,Text between the images. I haven't added at the top of image. Do you need to add the text at top of image?

– Suprabha
Nov 22 '18 at 13:53

yes but, it doesn't work the screen of my android device is still red.

– Lylys
Nov 22 '18 at 13:55

What's the error you are getting ?

– Suprabha
Nov 22 '18 at 13:56

I was checking here, You can check this: snack.expo.io/@supi/YW54aW If still you are getting any error, then just let me know. Will check from my end

– Suprabha
Nov 22 '18 at 14:04

this is the result : image.noelshack.com/fichiers/2018/47/4/…

– Lylys
Nov 22 '18 at 14:27

|
show 2 more comments

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu