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

Question

I am working on an iphone/android app with react-native that displays weather in a table. In order to create the table, I found this table-layout library for react-native: https://github.com/Gil2015/react-native-table-component and used it in my code. For one of the data rows in my table, I also wanted to display an animated svg file of the weather, so I used this library: https://www.npmjs.com/package/react-native-svg-image . My code is 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 is the part of the code in my return() in render() that displays the table:
<View style={styles.table}>

           {/* Right scrollview wraper */}
           <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
             {/* If parent element is not table element, you should add the 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 all the data that needs to be displayed in the table. The part my question focuses on is this.getIconForWeather(iconsWeather[#]) and tableData.map((data, i)) . The function getIconForWeather(iconName) returns the code to display an SVG image based on the current weather text (ie "rainy", "cloudy", "windy", etc), and the tableData.map is responsible for mapping the data onto the table. This code works perfectly on IOS and the table shows animated SVG files, however when I run it on android I get the error:

"Invariant violation: Nesting of <View> within <Text> is not supported on android."

I have done some testing with the table I am using, and my conclusion is that the table is somehow implementing a <Text> </Text> object, and so when I pass <SVGImage> into the table data I am getting a nested view error. Is there any way I can bypass this or what are other ways I can display my SVG images on the table in Android?

for(let i = 0; i < 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>
)
}

Answer 1

The react React Native <Text> component only supports nested views on iOS. The Cell component in your first link uses <Text> to wrap the data you pass into the table, and since you're passing a <View> for your image cell it doesn't work.

I guess you could try to change the <Cell> component to support a custom renderer.

Or you could modify the Cell component as follows (line 39):

{typeof data === 'object'
  ? <View>{data]</View>}
  : <Text style={[textStyle, styles.text]}>{data}</Text>}