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

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.

screenshot 2016-10-03 20 46 03

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

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 40
Comments: 31 (2 by maintainers)

Most upvoted comments

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> 
        );
    }

Legitcoder on Jun 21, 2018

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.

clydeshaffer on Sep 29, 2017

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

jayshah123 on Mar 15, 2017

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

mcdonnez on Apr 24, 2018

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

arash-hacker on Apr 17, 2018

I think we should improve this error message

sibelius on Jan 9, 2017