CODEWITHSUNDEEP
androidreactjsreact-nativewebviewexpo
psquizzle
psquizzle

Reputation: 185

Expo / React Native WebView, onPress Event within Animation Not Working on Android

Ok, so using Expo with a WebView Component and an overlying native component (red box in Expo Snack) that is animated (ScaleX).

Code functions on iOS flawlessly however not on android emulator or device. It instead executes the HTML/WebView onclick handeler within the webpage javascript.

When the animation component is removed it also functions on Android.

Is this a known issue or how do I rectify this?

onPress={()=>alert()}

Expo snack https://snack.expo.io/@psquizzle/webview-example

import React, { Component, useEffect, useState , useRef} from 'react';
import { WebView } from 'react-native-webview';
import { View, Text, TouchableOpacity, Image, Animated} from 'react-native';

const SpeakerButton = props => {
  const [fadeAnim] = useState(new Animated.Value(0)); // Initial value for opacity: 0

  React.useEffect(() => {
    if(props.show){
      Animated.timing(fadeAnim, {
        toValue: 1,
        duration: 500,
        useNativeDriver: true,
      }).start();
    } else {
      Animated.timing(fadeAnim, {
        toValue: 0,
        duration: 0,
        useNativeDriver: true,
      }).start();
    }

  }, [props.show]);

  return (
    <Animated.View 
      widthValue={parseFloat(fadeAnim*60)}
      style={{
        ...props.style,
        transform: [
          
          {  scaleX: fadeAnim } 
        ] , 
      }}
      
      >
      {props.children}
    </Animated.View>
  );
};

export default function App() {
  const initialHTMLContent = `
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="author" content="">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script>document.addEventListener("click", function(){
  alert("Hello World");
});</script>
</head>
<body>
<h1>Hello</h1>
<my-component source-url="/api/video/v1/us-west-2.893648527354.channel.DmumNckWFTqz.m3u8"></my-component>
</body>
</html>`;

  return (
    <View
      style={{
        flex: 1,
      }}>
      <WebView
        originWhitelist={['*']}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        source={{
          html: initialHTMLContent,
          baseUrl: 'https://hotels.yourroom.eu',
        }}
      />

        <SpeakerButton show={true} >
               <TouchableOpacity onPress={()=>alert('Hello Back')}
             style={{display:'flex', alignItems:'center',justifyContent:'center', position:'absolute', bottom:250, right:-5,zIndex:20,  backgroundColor:'red',width:60,height:50, borderRadius:10, shadowColor: '#0000008e',
           shadowOffset: { width: 5, height: 5 },
            shadowOpacity: 0.8,
           shadowRadius: 5,  
             elevation: 5}}>
                <Image style={{ height:30, width:30, tintColor:'white', marginRight:5}} ></Image>
             </TouchableOpacity>
             </SpeakerButton>
    </View>
  );
}

Any help would be much appreciated.

To see the problem run Expo Snack in Adroid Emulator mode and click the red box.

Upvotes: 1

Views: 1133

Answers (1)

psquizzle
psquizzle

Reputation: 185

So it seemed to be an issue with CSS style rendering on android, simply moved the cess to parent element and now it behaves as expected.

     <SpeakerButton show={true}  style={{display:'flex', alignItems:'center',justifyContent:'center', position:'absolute', bottom:250, right:-5,backgroundColor:'red',width:60,height:50, borderRadius:10, shadowColor: '#0000008e',
           shadowOffset: { width: 5, height: 5 },
            shadowOpacity: 0.8,
           shadowRadius: 5,  
             elevation: 5}} >
               <TouchableOpacity onPress={()=>alert('Hello Back')}
            >
                <Image  style={{ height:30, width:30, tintColor:'white', marginRight:5}} ></Image>
             </TouchableOpacity>
             </SpeakerButton>

Upvotes: 0

Related Questions