CODEWITHSUNDEEP
javascriptreact-nativestyling
Rachellllls
Rachellllls

Reputation: 15

React Native some of the component display out of the screen

I render buttons using multiple render method but I found out that it is difficult to manage the style of it.

This is my code that I render buttons

 const [abc, setAbc] = useState([
{ type: 'aa'},{ type: 'bb'},{ type: 'cc'},{ type: 'dd'},
{ type: 'ee'},{ type: 'ff'},{ type: 'gg'},{ type: 'hh'},
{ type: 'ii'},{ type: 'jj'},{ type: 'kk'},{ type: 'll'},
{ type: 'mm'},{ type: 'nn'},{ type: 'oo'},{ type: 'pp'},
{ type: 'qq'},{ type: 'rr'},{ type: 'ss'},{ type: 'tt'},
{ type: 'uu'},{ type: 'vv'},{ type: 'ww'},{ type: 'xx'},
{ type: 'yy'},{ type: 'zz'},
])

const renderedABC =  abc.map(item => {
    return <Button key={item.type} title={item.type}/>;
  })

and it display like

enter image description here

I would like to make more row and display it kind of separately. At least it fill the "blank" at the bottom.

Upvotes: 0

Views: 1554

Answers (2)

sd_dewasurendra
sd_dewasurendra

Reputation: 393

You have to render the component in with flex:1 style. If you want to render those row by row then you can use flexDirection: row. default value is 'column'. In your case, you do not need to use flexDirection.

renderedABC(){
   return(
       <View style={{flex: 1}}>
           {abc.map(item => <Button key={item.type} title={item.type}/>)
       </View>
   )
};

Upvotes: 1

Izzuddiin
Izzuddiin

Reputation: 265

You should wrap the buttons with some <View/> and add flex: 1 as a style

Please try 

const renderedABC =  (
    <View style={{flex: 1}}>
        {abc.map(item => <Button key={item.type} title={item.type}/>)
    </View>
);

Upvotes: 0

Related Questions