React-native: [Android] Unexpected view type nested under text node

[brien-crean]

Issue Description

Behaviour of nesting child components within the Text component is not consistent across Android and iOS.

For example when nesting a View component, which has a fixed width and height within a Text component I get 'Unexpected view type nested under text node'. On iOS it does not throw an error and renders the nested view in the example below.

Steps to Reproduce / Code Snippets

class testProject extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>
          <View style={{width: 50, height: 50}}>
            <ActivityIndicator animating={true}/>
          </View>
          Some Text
         </Text>
      </View>
    );
  }
}

Additional Information

• React Native version: 0.34.1
• Platform(s) (iOS, Android, or both?): Issue happens on Android only, works as expected on iOS
• Operating System (macOS, Linux, or Windows?): macOS

[olliekav]

I'm hitting this same issue, but mine is importing a class into Android to share code.

This is a class in index.ios.js with a blank view to test...

class MyTestView extends Component {
  render() {
    return (
      <View style={{flex: 1}}>
      </View>
    )
  }
}

I then import this into index.android.js and I get the error above.

import MyTestView from './index.ios';

export default class WaterRangers extends Component {
    render() {
        return (
            <View style={{flex: 1}}>
                <MyTestView/>
            </View>
        )
    }
}

I'm not even using a Text Component so not sure why it's happening?

[joncursi]

Running into the same issue on RN 0.36.0. Nesting a View inside a Text will work on iOS if height and width are specified on the View, but Android will error out per the above screenshot.

[skrobek]

+1

[boomfly]

+1

[NazarYablonskiy]

+1

[neel132]

+1

[sibelius]

I think we should improve this error message

[berkayk]

+1

[Parrryy]

+1

[jayshah123]

This might be the an expected behaviour, because as per the latest documentation, it says that View is allowed inside Text is supported on IOS only.
docs link

[xtechnet]

me too...

[jose920405]

+1

[syzer]

+1

[idris-maps]

+1

[cauboy]

+1

[beeremy]

+1

[brien-crean]

closing as @jayshah123 pointed out, this feature is only available on iOS

[giovanams]

+1

[clydeshaffer]

It sure would be nice though, if the error message could tell me where in my code the errant View-Within-A-Text lies. For instance, if I'm trying to make an iOS-oriented RN app work on Android.

[byk04712]

+1

[sven0726]

+1

[amsul]

@brien-crean Does closing this imply there are no plans to eventually support this either?

[davidpaulsson]

:( This is a much-desired feature. I'm currently using this way to replace emojis in with my own emoji library (swapping them for an Image). This makes that impossible for Android. Any plans to look into this?

[Arshiamidos]

i found my issue.
this error happens when you want use button as text in react-navigation.
my code was

return {
      title: (
    <Button transparent onPress={() => navigation.goBack()}   >
      <Icon name="chat" />
    </Button>) ,
      headerLeft: (
        <Button transparent onPress={() => navigation.navigate("ScreenOne")}   >
          <Icon name="arrow-back" />
        </Button>),
      headerRight: (
        <Button transpar

so as u see i want use button as text so react-native-navigation thinks my header text is unsupported.
using text in title _solved_ my problem

[mcdonnez]

So I spent the past few hours trying to make an image inside nested Text components clickable. We have a function that uses this component in converting html to react-native components. Since Image doesn't have an onPress prop you have to use TouchableOpacity. But... you can't use TouchableOpacity because it gives the error: Nesting of <View> within <Text> is not supported on Android

My next thought was to use TouchableWithoutFeedback however for some reason the click wasn't registering when I tested it.

Then I wrapped the image in a Text component and added the onPress prop to that, however, now the image was clickable only on the left half of the image.

Finally, I did the following to add space to the right side which expanded the Text hitbox and made the image "clickable":

<Text onPress={() => myAction()}>
    <Image source={{uri: 'theUrl'}} />
    &nbsp;
</Text>

Hope someone finds this useful. This seemed to be the best location to post it after my internet searching.

I am using react 16.2.0

[FauricioValencia]

+1

[mickmak-busicat]

+1. I know this is expected behaviour on Android but it will be nice if the error prompt is able to locate
which component caused the problem.

[geminiyellow]

same error.

[Legitcoder]

I changed title to headerTitle on navigationOptions and it worked for my situation.

from this:
return { title: renderTitle(), .... },

to this:
return { headerTitle: renderTitle(), .... },

renderTitle function:

 renderTitle = () => {  
        return(
            <View style={{...}}>
            <Image style={{...}}  source={{ uri: coin.ImageUrl }}/>
            <Text style={{...}}>  {coin.CoinName}</Text>
            </View> 
        );
    }

[izkshitiz]

I created a component(component1) that contained a view tag and which I nested with a js variable
<View>{varaible}</View>
this code threw some error and to solve it, as I read somewhere on a forum that I have to wrap the js variable inside text tag so I did this <View><Text>{varaible}</Text></View> and it worked for the time being but after I had created another component(component2), I needed a nested within component1 but it threw Unexpected view type nested under text node error
code with the error was like
<Component1> <View> <Text></Text> </View> </Component1>

what solved the error for me was that I removed the text tag in component 1 code.
<View>{varaible}</View>

[Biplovkumar]

i have same issue in android only

       ```
 <View Style={{ marginTop: 0,alignItems: 'center',justifyContent: 'center'}} >
             <Text style={styles.questiontextstyle}>
             Checkboxes   (     <Icon size = {SCREEN_HEIGHT/30} name='checkbox-marked-outline' type='material-community'color='rgba(255,255,255,0.8)' />)  means one or more answers for that question are correct.
             </Text>
           </View>

```