reactjs - React Native Android error trying to nest a view inside a text -


i working on iphone/android app react-native displays weather in table. in order create table, found table-layout library react-native: https://github.com/gil2015/react-native-table-component , used in code. 1 of data rows in table, wanted display animated svg file of weather, used library: https://www.npmjs.com/package/react-native-svg-image. code posted below:

tabledata = [["weather" ,this.geticonforweather(iconsweather[0]), this.geticonforweather(iconsweather[1]), this.geticonforweather(iconsweather[2]), this.geticonforweather(iconsweather[3]), this.geticonforweather(iconsweather[4]), this.geticonforweather(iconsweather[5]), this.geticonforweather(iconsweather[6]), this.geticonforweather(iconsweather[7]), this.geticonforweather(iconsweather[8]), this.geticonforweather(iconsweather[9])],             ["temp", temp[0] + '°', temp[1]+ '°', temp[2]+ '°', temp[3]+ '°', temp[4]+ '°', temp[5]+ '°', temp[6]+ '°', temp[7]+ '°', temp[8]+ '°', temp[9]+ '°'],             ["precip" ,precip[0]+'%', precip[1]+'%', precip[2]+'%', precip[3]+'%', precip[4]+'%', precip[5]+'%', precip[6]+'%', precip[7]+'%', precip[8]+'%', precip[9]+'%'],             ["humidity" ,humidity[0]+'%', humidity[1]+'%', humidity[2]+'%', humidity[3]+'%', humidity[4]+'%', humidity[5]+'%', humidity[6]+'%', humidity[7]+'%', humidity[8]+'%', humidity[9]+'%'],           ];  geticonforweather(iconname) { return <view style={{height: 40, width: 40, alignitems:'center', justifycontent:'center'}}>               <svgimage               style={{ width: 40, height: 40, backgroundcolor: 'transparent' }}               scrollenabled = {false}               source={{uri: icons[iconname]}}               />               </view> }  //this part of code in return() in render() displays table: <view style={styles.table}>             {/* right scrollview wraper */}            <scrollview horizontal={true} showshorizontalscrollindicator={false}>              {/* if parent element not table element, should add type of borderstyle. */}              <tablewraper borderstyle={{borderwidth: 1,bordercolor: 'rgba(255,255,255,0.0)',}}>                <row data={tablehead} style={styles.head} textstyle={styles.headtext} widtharr={widtharr}/>                 {                  tabledata.map((data, i) => (                    <row key={i} data={data} style={[styles.list, i%2 && {backgroundcolor: 'rgba(255,255,255,0.0)'}]} widtharr={widtharr} textstyle={styles.listtext}/>                  ))                }               </tablewraper>            </scrollview>          </view>

the variable tabledata has data needs displayed in table. part question focuses on this.geticonforweather(iconsweather[#]) , tabledata.map((data, i)). function geticonforweather(iconname) returns code display svg image based on current weather text (i.e. "rainy", "cloudy", "windy", etc), , tabledata.map responsible mapping data onto table. code works on ios , table shows animated svg files, when run on android error:

"invariant violation: nesting of <view> within <text> not supported on android."

i have done testing table using, , conclusion table somehow implementing <text> </text> object, , when pass <svgimage> table data getting nested view error. there way can bypass or other ways can display svg images on table in android?

for(let = 0; < days; i++){  await weatherbuildgui.push( <view key={i} style={styles.weatherdays}>    <view style={{flex:0.25, alignitems:'center', justifycontent:'center'}}>     <text style={{fontweight: 'bold', textalign:'center'}}>{weatherhi[i]}</text>   </view>    <view style={{flex:0.25, alignitems:'center', justifycontent:'center'}}>     <text style={{textalign:'center'}}>${weatherlo[i]}</text>   </view>    <view style={{flex:0.25, alignitems:'center', justifycontent:'center'}}>     <text style={{textalign:'center', color:clr}}>{weatherday[i]}</text>   </view>    <view style={{flex:0.25, alignitems:'center', justifycontent:'center'}}>     <text style={{textalign:'center', color:clr}}>{weathericon[i]}</text>   </view> </view> ) }

the react react native <text> component supports nested views on ios. cell component in first link uses <text> wrap data pass table, , since you're passing <view> image cell doesn't work.

i guess try change <cell> component support custom renderer.

or modify cell component follows (line 39):

{typeof data === 'object'   ? <view>{data]</view>}   : <text style={[textstyle, styles.text]}>{data}</text>}

Comments

Post a Comment

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

i've set bento/ubuntu-16.04 vagrant box using php 5.6, , getting following error quite few times when try , run shell script: "uncaught reflection exception: class domdocument not exist". i've tried adding following top of script (not together), each no success: "sudo apt-get install php5.6-xml", "sudo apt-get install php5-xml", "sudo apt-get install php-dom" i've tried resetting server "sudo service apache2 restart". does have suggestions?
Read more

vue.js - Create hooks for automated testing -

Image
qa guys complained can't automate frontend testing. because our html looks same outside. lazy hack did this <template> <div :role="$options.name"> ... </div> </template> <script> export default { name: 'vmcomponentname' } </script> which takes name script , applies html. in browser get: <div role="vmcomponentname"> ... </div> line :role="$options.name" goes in every component. is there dry er solutions? please share. additional details i'll explain in details looking for. imagine have vmusercreate form creates user. test case can create user . to automatically test without role, have use following selector: .wrapper > .wrapper > .wrapper > .submit-button the test extremely brittle (will break lot). if use roles can use [role="vmusercreateform"] .submit-button selector. many folds less brittle. so basically, i'm ...
Read more

Add new key value to json node in java -

i have json file : { "id":1, "name":"abc", "addressdetails": { "city":"newyork" } } i wanted add 1 more key-value ("pincode" : "414141") node 'addressdetails'. i tried using : objectmapper mapper = new objectmapper(); jsonnode root = mapper.readtree(new file("d://test.json")); objectnode node = mapper.createobjectnode(); node.with("addressdetails").put("pincode", "414141"); but it's not getting added, there way can ? you can try you should modify file path objectmapper mapper = new objectmapper(); objectnode nodes = mapper.readvalue(new file("d:\\test.txt"), objectnode.class); nodes.with("addressdetails").put("pincode", "414141"); mapper.writer().writevalue(new file("d:\\test.txt"), nodes);
Read more