Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16750

React Native Button absolute position not working on real iOS specific device

$
0
0

I put a button in absolute position to on WebView.
This button works on any simulators and my iPhone 5s real device, but not work on iPhone Plus real device.
The button reacts when tapping, but doesn't fire onPress. It works when set position as relative.
All simulators and devices are same iOS version (12.2).

Does anyone know about this issue?

Environments
React Native 0.56
iOS 12.2

enter image description here

import React, { Component } from 'react';
import { ActivityIndicator, BackHandler, Keyboard, NetInfo, Platform, ScrollView, StatusBar, StyleSheet, Text, TouchableOpacity, View, WebView } from 'react-native';
import { Button, Icon } from 'react-native-elements'

export default class SignInScreen extends React.Component {
    constructor(props) {
        super(props)
    }

    handleBackPress() {
        this.refs['WEBVIEW_REF'].goBack()
        return true
    }

    render() {
        return (
            <View style={styles.container}>
                <StatusBar backgroundColor="white" barStyle="dark-content" />
                <WebView
                    ref="WEBVIEW_REF"
                    bounces={false}
                    source={{ uri: 'https://example.com' }}
                    style={styles.container}
                />
                <Button
                    onPress={this.handleBackPress.bind(this) }
                    buttonStyle={styles.buttonBack}
                    title=""
                    icon={{
                    name: 'chevron-left',
                    type: 'material-community',
                    iconStyle: { color: global.color.normal }
                    }}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    buttonBack: {
        width: 45,
        height: 45,
        position: 'absolute',
        left: 10,
        bottom: 60,
        backgroundColor: '#bfbfbf',
        opacity: 0.9
    },
    container: {
        flex: 1,
        paddingTop: 25,
        backgroundColor: '#fff'
    },
});

Viewing all articles
Browse latest Browse all 16750

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>