CODEWITHSUNDEEP
react-nativebuttonmobilecross-platformtouchableopacity
Paulo Rodrigues
Paulo Rodrigues

Reputation: 407

React native TouchableOpacity onPress not working on Android Build (APK)

TouchableOpacity works on the android emulator and on the cell phone, but when I generated the APK, TouchableOpacity didn't work anymore.

what could be happening?

When I click on TouchableOpacity nothing happens, it just makes the opacity animation

the right thing would be to go to the Home screen but it doesn't

does it have something over it like z-index?

Javascript Code Bellow

import React from 'react';
import {View, Image, Text, TouchableOpacity, TextInput} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import {useField} from '@unform/core';
import {Form} from '@unform/mobile';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';

import styles from './styles';

import logoImg from '../../assets/logo.png';
import Home from '../Home';

export default function Login() {
  const navigation = useNavigation();

  function navigateToHome() {
    navigation.navigate(Home);
  }

  return (
    <KeyboardAwareScrollView style={styles.scroll}>
      <View style={styles.container}>
        <Image style={styles.logo} source={logoImg} />
        <TextInput style={styles.input} placeholder="Login" />
        <TextInput
          secureTextEntry={true}
          style={styles.inputPassword}
          placeholder="Senha"
        />
        <TouchableOpacity style={styles.button} onPress={navigateToHome}>
          <Text style={styles.buttonText}>Entrar</Text>
        </TouchableOpacity>
      </View>
    </KeyboardAwareScrollView>
  );
}

Style Code Bellow

import {StyleSheet} from 'react-native';

export default StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  scroll: {
    backgroundColor: '#fff',
  },
  logo: {
    marginTop: 30,
  },
  input: {
    marginTop: 30,
    padding: 10,
    width: 300,
    height: 56,
    backgroundColor: '#f5f5f5',
    fontSize: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#8CC63F',
    borderRadius: 4,
  },
  inputPassword: {
    marginTop: 30,
    padding: 10,
    width: 300,
    height: 56,
    backgroundColor: '#f5f5f5',
    fontSize: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#8CC63F',
    borderRadius: 4,
  },
  button: {
    width: 122,
    height: 66,
    marginTop: 60,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#20565C',
    borderRadius: 4,
  },
  buttonText: {
    fontSize: 16,
    color: '#fff',
    textTransform: 'uppercase',
    fontWeight: 'bold',
  },
});

Upvotes: 1

Views: 2296

Answers (2)

Mian Aamir Shehzad
Mian Aamir Shehzad

Reputation: 228

In Android, if the TouchableOpacity is wrapped in a View that has

position: "absolute"

prop in the View's styles, the touchable will not generate touch events. Please remove the position: "absolute" from the parent view.

Upvotes: 0

OsamaD
OsamaD

Reputation: 471

update below code like this:

<TouchableOpacity style={styles.button} onPress={()=>this.navigateToHome}>
      <Text style={styles.buttonText}>Entrar</Text>
    </TouchableOpacity>

hope it works for you.

Upvotes: 0

Related Questions