Nativebase: The issue with Thumbnail in TouchableHighlight

Created on 26 Feb 2017 · 19Comments · Source: GeekyAnts/NativeBase

Hello,

There is an issue with Thumbnail wrapped by TouchableHighlight. I am using Exponent XDE v14.0.0 and running the project on Genymotion emulator for Google Nexus 5 4.4.4 API 19.

Versions used

node.js 7.6.0
exponent 14.0.0
react 15.4.0
react-native 0.41.0
native-base 2.0.10

Expected behaviour

I am able to tap Thumbnail wrapped by TouchableHighlight.

Actual behaviour

When I tap Thumbnail, I get "undefined is not an object (evaluating 'this.wrappedInstance.setNativeProps')".

The project code

import Exponent from 'exponent';
import React from 'react';
import {
  Platform,
  Alert,
  TouchableHighlight
} from 'react-native';
import {
  Container,
  Header,
  Body,
  Title,
  Content,
  Thumbnail
} from 'native-base';

class App extends React.Component {
  constructor (props) {
    super(props);

    this.state = {
      isReady: false
    };
  }

  async componentWillMount() {
    if (Platform.OS === 'android') {
      await Exponent.Font.loadAsync({
        'Roboto': require('native-base/Fonts/Roboto.ttf'),
        'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf')
      });

      this.setState({
        isReady: true
      });
    }
  }

  render() {
    if (!this.state.isReady) {
      return <Exponent.Components.AppLoading />;
    }

    return (
      <Container style={{ flex: 1 }}>
        <Header>
          <Body>
            <Title style={{ alignSelf: 'stretch' }}>Test</Title>
          </Body>
        </Header>
        <Content>
          <TouchableHighlight onPress={ () => Alert.alert('Info', 'Image tapped') }>
            <Thumbnail style={{ width: 50, height: 50 }} source={{ uri: 'http://www.apdconsumo.pt/person.png' }} />
          </TouchableHighlight>
        </Content>
      </Container>
    );
  }
}

Exponent.registerRootComponent(App);

The screenshots

screenshot1
screenshot2

The device

I have tested the project only on Android.

The additional information

I think, you do not define the setNativeProps method in the Thumbnail component. Please, check Composite components and setNativeProps.

bug

Source

alexn777

Most helpful comment

I get the same error even if I use native-base Text in react-native TouchableHighlight:

import {
  Alert,
  TouchableHighlight
} from 'react-native';
import {
  Text
} from 'native-base';

<TouchableHighlight onPress={ () => Alert.alert('Info', 'Text touched') }>
  <Text>Click here</Text>
</TouchableHighlight>

However, if I use react-native Text, it works without issues:

import {
  Alert,
  TouchableHighlight,
  Text
} from 'react-native';

<TouchableHighlight onPress={ () => Alert.alert('Info', 'Text touched') }>
  <Text>Click here</Text>
</TouchableHighlight>

alexn777 on 7 Mar 2017

👍7 😄1

All 19 comments

LeoAref on 28 Feb 2017

I just tested it on iOS and android both and it works. Maybe exponent is causing this?

sankhadeeproy007 on 28 Feb 2017

I also get this error with an icon in a TouchableHighlight, when the container is wrapped in a style provider

sedders123 on 28 Feb 2017

styleprovider
Strange!

sankhadeeproy007 on 28 Feb 2017

This is the code in my case:

  render() {
    return (
      <View style={{...this.props.style.container, height: this.state.height}}>
        <View onLayout={this.setHeaderHeight}>
          <TouchableHighlight onPress={this.toggle}>
            <Text>click here</Text>
          </TouchableHighlight>
        </View>
        <View onLayout={this.setContentHeight}>
          {this.props.children}
        </View>
      </View>
    );
  }
}

export default connectStyle('zoraTheme.Accordion', styles)(Accordion);

And I'm getting the same error

LeoAref on 28 Feb 2017

I have just updated native-base to the latest version 2.0.11 and it started working. It did not work with native-base 2.0.10.

alexn777 on 28 Feb 2017

It worked with me as well after install 2.0.11

LeoAref on 28 Feb 2017

+1 to the 2.0.11 fix

sedders123 on 28 Feb 2017

Great! Closing it then.

sankhadeeproy007 on 28 Feb 2017

@sankhadeeproy007
I'm already using 2.0.12, but the issue still comes up. Is it related to react native 0.42? Exactly having the Thumbnail in TouchableHighlight. Anyone?

laukaichung on 5 Mar 2017

The issue is back again in native-base 2.0.12.

alexn777 on 5 Mar 2017

👍1

I get the same error even if I use native-base Text in react-native TouchableHighlight:

import {
  Alert,
  TouchableHighlight
} from 'react-native';
import {
  Text
} from 'native-base';

<TouchableHighlight onPress={ () => Alert.alert('Info', 'Text touched') }>
  <Text>Click here</Text>
</TouchableHighlight>

However, if I use react-native Text, it works without issues:

import {
  Alert,
  TouchableHighlight,
  Text
} from 'react-native';

<TouchableHighlight onPress={ () => Alert.alert('Info', 'Text touched') }>
  <Text>Click here</Text>
</TouchableHighlight>

alexn777 on 7 Mar 2017

👍7 😄1

@sankhadeeproy007 , can you reopen the issue? The error comes up again for Thumbnail inside TouchableHighlight in 2.0.12.

laukaichung on 12 Mar 2017

Same as @stonecold123 , error comes up with Icon inside TouchableHighlight in 2.0.13.

abrantes01 on 21 Mar 2017

@sankhadeeproy007 the issue was never resolved and it is breaking our projects. please reopen and fix it. click on the image to enlarge.

nbe

zhoplocal on 24 Mar 2017

👍2

We are looking into the issue. As a workaround for now, you can wrap the child component of TouchableHighlight into a RN <View>.

shivrajkumar on 17 Apr 2017

👍3

To expand on @shivrajkumar 's workaround, you need to import the View component from React Native: using Native Base's View component still causes the error.