Styjun

Could Sauron have read Tom Bombadil's mind if Tom had held the Palantir?

What is this opening trap called, and how should I play afterwards? How can I refute the gambit, and play if I accept it?

Does the Distant Spell metamagic apply to the Sword Burst cantrip?

Counting occurrence of words in table is slow

How can I repair scratches on a painted French door?

Links to webpages in books

Does anycast addressing add additional latency in any way?

Does squid ink pasta bleed?

Averting Real Women Don’t Wear Dresses

Should I tell my insurance company I'm making payments on my new car?

How could mana leakage be dangerous to a elf?

Is there any set of 2-6 notes that doesn't have a chord name?

Is adding a new player (or players) a DM decision, or a group decision?

Is there a maximum distance from a planet that a moon can orbit?

How to append a matrix element by element?

Was touching your nose a greeting in second millenium Mesopotamia?

Is it okay to visually align the elements in a logo?

Inverse-quotes-quine

Does Marvel have an equivalent of the Green Lantern?

Short story with brother-sister conjoined twins as protagonists?

Fedora boot screen shows both Fedora logo and Lenovo logo. Why and How?

Why isn’t the tax system continuous rather than bracketed?

Why cruise at 7000' in an A319?

Is this one of the engines from the 9/11 aircraft?

Items in view go out of screen

React Native flexible view sizing within a paged scrollviewReact-Native: how to fill fullsize screen without explicit Width and Height?React Native - image pushes text out screen - fixed with 3rd view?Show splash screen before show main screen in react native without using 3rd party libraryI am using React-native and node js.I am not able to navigate from one screen to another after getting response from Node jsComponent won't stay wrapped within bounds (React Native)React-Native error adding a video using expo to the app.js for backgroundReact Native: How to make ScrollView scroll for just one item in it?Not able to navigate to other page in react nativeHow to fix this error 'undefined is not an object'?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

1

I put images to View with .map. But when I have add 5 items last image goes out of screen. because I give width:'25%' to view.

I want my images which are out of screen go next row. How could I do this ?

This is my method :

renderImages() 
 return images.map((items, key) => 
 
 return (
 <View key=key style= backgroundColor: items.renk, width: '22%', marginLeft: '3%', marginTop: '2%',alignItems: 'center' >
 <Image source=items.img style= height: 60, width: 60 />
 </View>
 );
 
 );

this is my render :

 render() 
 return (
 <View> 

 <ScrollView style= flex: 1>
 <View style= flexDirection: 'row' >
 this.renderImages()
 </View>
 </ScrollView>

 </View>
 );
 
}

react-native

share|improve this question

asked Mar 25 at 10:53

hakanhakan

37811 gold badge11 silver badge1111 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  You can't do it with view tag. You can use flatlist and give column prop to value 4
  
  – Firu
  Mar 25 at 11:10
  

  
  
  
  

add a comment | 

1

I put images to View with .map. But when I have add 5 items last image goes out of screen. because I give width:'25%' to view.

I want my images which are out of screen go next row. How could I do this ?

This is my method :

renderImages() 
 return images.map((items, key) => 
 
 return (
 <View key=key style= backgroundColor: items.renk, width: '22%', marginLeft: '3%', marginTop: '2%',alignItems: 'center' >
 <Image source=items.img style= height: 60, width: 60 />
 </View>
 );
 
 );

this is my render :

 render() 
 return (
 <View> 

 <ScrollView style= flex: 1>
 <View style= flexDirection: 'row' >
 this.renderImages()
 </View>
 </ScrollView>

 </View>
 );
 
}

react-native

share|improve this question

asked Mar 25 at 10:53

hakanhakan

37811 gold badge11 silver badge1111 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  You can't do it with view tag. You can use flatlist and give column prop to value 4
  
  – Firu
  Mar 25 at 11:10
  

  
  
  
  

add a comment | 

I put images to View with .map. But when I have add 5 items last image goes out of screen. because I give width:'25%' to view.

I want my images which are out of screen go next row. How could I do this ?

This is my method :

renderImages() 
 return images.map((items, key) => 
 
 return (
 <View key=key style= backgroundColor: items.renk, width: '22%', marginLeft: '3%', marginTop: '2%',alignItems: 'center' >
 <Image source=items.img style= height: 60, width: 60 />
 </View>
 );
 
 );

this is my render :

 render() 
 return (
 <View> 

 <ScrollView style= flex: 1>
 <View style= flexDirection: 'row' >
 this.renderImages()
 </View>
 </ScrollView>

 </View>
 );
 
}

react-native

share|improve this question

asked Mar 25 at 10:53

hakanhakan

37811 gold badge11 silver badge1111 bronze badges

renderImages() 
 return images.map((items, key) => 
 
 return (
 <View key=key style= backgroundColor: items.renk, width: '22%', marginLeft: '3%', marginTop: '2%',alignItems: 'center' >
 <Image source=items.img style= height: 60, width: 60 />
 </View>
 );
 
 );

 render() 
 return (
 <View> 

 <ScrollView style= flex: 1>
 <View style= flexDirection: 'row' >
 this.renderImages()
 </View>
 </ScrollView>

 </View>
 );
 
}

share|improve this question

asked Mar 25 at 10:53

hakanhakan

37811 gold badge11 silver badge1111 bronze badges

share|improve this question

asked Mar 25 at 10:53

hakanhakan

37811 gold badge11 silver badge1111 bronze badges

asked Mar 25 at 10:53

hakanhakan

37811 gold badge11 silver badge1111 bronze badges

asked Mar 25 at 10:53

hakanhakan

37811 gold badge11 silver badge1111 bronze badges

1 Answer
1

active

oldest

votes

1

Modify your code View component like this:

<View style= flexDirection: 'row', flexWrap:'wrap' >
 this.renderImages()
 </View>

also it is unecessary to set the style of scrollview to flex:1 if its not set into horizontal: true.

share|improve this answer

answered Mar 25 at 11:16

MervzsMervzs

70022 silver badges1515 bronze badges

add a comment | 

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');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55336171%2fitems-in-view-go-out-of-screen%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

Modify your code View component like this:

<View style= flexDirection: 'row', flexWrap:'wrap' >
 this.renderImages()
 </View>

also it is unecessary to set the style of scrollview to flex:1 if its not set into horizontal: true.

share|improve this answer

answered Mar 25 at 11:16

MervzsMervzs

70022 silver badges1515 bronze badges

add a comment | 

1

Modify your code View component like this:

<View style= flexDirection: 'row', flexWrap:'wrap' >
 this.renderImages()
 </View>

also it is unecessary to set the style of scrollview to flex:1 if its not set into horizontal: true.

share|improve this answer

answered Mar 25 at 11:16

MervzsMervzs

70022 silver badges1515 bronze badges

add a comment | 

Modify your code View component like this:

<View style= flexDirection: 'row', flexWrap:'wrap' >
 this.renderImages()
 </View>

also it is unecessary to set the style of scrollview to flex:1 if its not set into horizontal: true.

share|improve this answer

answered Mar 25 at 11:16

MervzsMervzs

70022 silver badges1515 bronze badges

<View style= flexDirection: 'row', flexWrap:'wrap' >
 this.renderImages()
 </View>

share|improve this answer

answered Mar 25 at 11:16

MervzsMervzs

70022 silver badges1515 bronze badges

answered Mar 25 at 11:16

MervzsMervzs

70022 silver badges1515 bronze badges

answered Mar 25 at 11:16

MervzsMervzs

70022 silver badges1515 bronze badges