css - Two column grid in react native flexbox -


this question has answer here:

i'm trying build 2 column grid in react native. have 4 square, each should occupy half width of screen , there total of 2 columns in case.

here code: 

 let profilemetricsarray = [{   title: localization.session_count,   value: this.state.sessioncount }, {   title: localization.hours_used,   value: this.state.hoursused }, {   title: localization.day_streak,   value: this.state.daystreak }, {   title: localization.session_count,   value: this.state.sessioncount }].map((item, i) => {   return  <view style={globalstyle.profilemetrics}>                <text style={globalstyle.profietext}> {item.title}</text>                <text style = {globalstyle.profilevalues}> {item.value}  </text>             </view> })

inside render function 

<view style={globalstyle.profilemetricscontainer}>             {profilemetricsarray}             </view>

styles: 

profilemetricscontainer: {   flexdirection:'row',   justifycontent:'center',   flex: 1 }, profilemetrics: {   flex: 0.5,   margin: 10,   borderradius: 10,   paddingbottom: 20,   backgroundcolor: 'white' },

however, above code happens each square takes 25% width of screen , appears in single column. how can fixed ?

have tried using dimensions calculate grid item? work me

import {dimensions} 'react-native'    const {width, height} = dimensions.get('window')    const style = stylesheet.create({    griditem: width/2  })


Comments

Post a Comment

Popular posts from this blog

resizing Telegram inline keyboard -

telegram's inline keyboard great feature lots of different use cases. inline buttons added list of items this: inline_keyboard = [[inlinekeyboardbutton(text="button", callback_data="button"), inlinekeyboardbutton(text="reset",callback_data="reset")]] inline_keyboard_markup = inlinekeyboardmarkup(inline_keyboard) update.message.reply_text("hi", reply_markup=inline_keyboard_markup) the above code adds 2 buttons each half width of chat screen. i know the normal keyboard button there resize_keyboard parameter somehow can used. my question is there way resize inline buttons ? example make full width or quarter width. unfortunately, can't now. :( you can suggest @botsupport , might add feature next version.
Read more

javascript - How to bind ViewModel Store to View? -

i'm pretty new ext js , trying embed multiselect inside panel . the viewmodel has stores property can see here: ext.define('test.view.controls.search.searchfiltermodel', { extend: 'ext.app.viewmodel', alias: 'viewmodel.filter', data: { title: '' }, stores: { test: { fields: [ 'id', 'name' ], proxy: { type: 'ajax', url: 'api/test', reader: 'array' }, autoload: true } } }); i bind in view this: viewmodel: { type: 'filter' }, layout: 'fit', border: 1, plain: true, scrollable: 'y', layout: 'fit', bind: { title: '{title}', }, items: { xtype: 'multiselect', scrollable: false, allowblank: true, ddreorder: true, bind: { store: '{test}' }, valuefield: 'id', displayfield: 'name' } ...
Read more

python - Alternative to referencing variable before assignment -

import time # define variables username = "username" password = "password" customer_info_file_path = "c:\\users\megam\pycharmprojects\general stuff\the square pie co\customer " \ "information\{}.txt ".format(name) username_entry = input("enter username\n>>") password_entry = input("enter password\n>>") if username_entry != username or password_entry != password: print("access denied\nyou have entered username or password incorrectly. please check password , " "account name , try again.\n") else: print("access granted") choice_menu = input("\na) view list of customers\nb) add customer\nc) delete customer\nd) log out\n>>") if choice_menu == "a": customer_info = open(customer_info_file_path, 'a', ) file = open(customer_info_file_path, 'r') output = file.read() ...
Read more