Touchable Items don't work on Android

Expo SDK
1

I’m struggling with a touch items problem on Android.
Could you help me?

Problem:

can not touch any touchable items(TextInput,TouchableHighlight,TouchableOpacity).

It occurs on only Android, but not iOS.

below is my code.

Strange to say, Once switching toggle inspector(React debugger) on and off, it become to work.

It occurs not only develop enviroment, but also product enviroment.

It seems that there are no strange code in my code.

Do you have any thoughts about what the cause might be?

render {
  return(
        <View style={styles.wrapper}>
            <ScrollView>
              <TextInput
                style={styles.signInInput}
                value={this.state.email}
                onChangeText={(text) => { this.setState({ email: text }); }}
                autoCapitalize="none"
                autoCorrect={false}
                placeholder="email"
                keyboardType="email-address"
                underlineColorAndroid="transparent"
              />
              <TextInput
                style={styles.signInInput}
                value={this.state.password}
                onChangeText={(text) => { this.setState({ password: text }); }}
                autoCapitalize="none"
                autoCorrect={false}
                placeholder="password"
                secureTextEntry
                underlineColorAndroid="transparent"
              />
              <TouchableHighlight
                onPress={this.onPress}
                style={styles.buttonStyle}
                underlayColor="transparent"
              >
                <Text style={styles.labelStyle}>signin</Text>
              </TouchableHighlight>
            </ScrollView>
        </View>
  );
}

my project package dependencies

"dependencies": {
    "autobind-decorator": "^2.1.0",
    "expo": "^25.0.0",
    "firebase": "4.6.2",
    "lodash.debounce": "^4.0.8",
    "moment": "^2.20.1",
    "prop-types": "^15.6.0",
    "react": "16.2.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-25.0.0.tar.gz",
    "react-native-autolink": "^1.4.0",
    "react-native-firebase": "^3.2.2",
    "react-native-fontawesome": "^5.7.0",
    "react-native-loading-gif": "^1.1.3",
    "react-native-redux-toast": "^1.0.3",
    "react-native-vector-icons": "^4.5.0",
    "react-navigation": "^1.0.0-beta.23",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  },
2

I tried to display log onTouchMove event, but I can’t get root cause.
Do you have any thoughts about what the cause might be?

App.js (root component)

return (
      <Provider store={store}>
        <View
          style={{ flex: 1 }}
          onTouchMove={(e) => {console.log('[App]touchMove', e.nativeEvent)}} // add console.log
        >
          <AppWidthNavigation />
        </View>
      </Provider>

SignIn.js (the component having touch problem)

render {
  return(
        <View
          style={styles.wrapper}
          onTouchMove={(e) => {console.log('[SignIn]touchMove', e.nativeEvent)}} // add console.log
        > 
            <ScrollView>
              <TextInput
                style={styles.signInInput}
                value={this.state.email}
                onChangeText={(text) => { this.setState({ email: text }); }}
                autoCapitalize="none"
                autoCorrect={false}
                placeholder="email"
                keyboardType="email-address"
                underlineColorAndroid="transparent"
              />
              <TextInput
                style={styles.signInInput}
                value={this.state.password}
                onChangeText={(text) => { this.setState({ password: text }); }}
                autoCapitalize="none"
                autoCorrect={false}
                placeholder="password"
                secureTextEntry
                underlineColorAndroid="transparent"
              />
              <TouchableHighlight
                onPress={this.onPress}
                style={styles.buttonStyle}
                underlayColor="transparent"
              >
                <Text style={styles.labelStyle}>signin</Text>
              </TouchableHighlight>
            </ScrollView>
        </View>
  );
}

procedure
1.launch genymotion,any Android emulator(in my case 7.1 API25)
2.exp start, exp android
3.touch the target component(SignIn.js)
4.log displayed(only Root component)

[App]touchMove 
{identifier: 0, locationY: 151.38833618164062, locationX: 66.22439575195312, pageY: 151.38833618164062, timestamp: 3954850, …}
  1. turn off and on toggle inspector
    6.touch the target component(SignIn.js)
    7.log displayed(Both Root and SingIn component)
[App]touchMove
{identifier: 0, locationY: 153.27529907226562, locationX: 170.88375854492188, pageY: 477.0848083496094, timestamp: 3965350, …}
[SignIn]touchMove
{identifier: 0, locationY: 141.84500122070312, locationX: 172.52413940429688, pageY: 465.654541015625, timestamp: 3965375, …}
3

Hi Yoshi, can you reproduce the issue on https://snack.expo.io?

1 Like
4

Thank you for responding.
I have found the problem when conding on Expo.snack.

I’m using “react-native-loading-gif”.
The document said …

By default, GIF and WebP are not supported on Android. You will need to add some optional modules in android/app/build.gradle, depending on the needs of your app.

This package seems not to work on Expo.
After removing this package, It becomes to work fine.

I’m so sorry,This is my oversight.
But I found this cause on coding on expo snack.
thank you.

5

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.