Not working after updating to 4.1.2

[pesseyjulien]

Hi,

I tried to upgrade the package from 3.4.1 to 4.1.2, I read the breaking changes and it seems like there wasn't any big changes but after the upgrade, it seems to be broken.

Before (3.4.1) :

After (4.1.2) :

Code :

import { SafeAreaView, initialWindowMetrics } from 'react-native-safe-area-context';

<SafeAreaView edges={this.edges()} style={this.safeViewStyle()}>

..

</SafeAreaView>

    edges = () => {
        return this.state.fullScreen ? ['right', 'left'] : ['right', 'top', 'bottom', 'left'];
    }

    //safeview BG color
    safeViewStyle = () => {
        return {
            flex: 1,
            height: '100%',
            backgroundColor:  (this.state.renderLoading)
                                ? 'white'
                                : (this.state.settingsPage ? 'white' : '#F5F5FD'),
            paddingBottom: (initialWindowMetrics
                            && initialWindowMetrics.insets
                            && initialWindowMetrics.insets.bottom) ? -(initialWindowMetrics.insets.bottom/2) : 0
        }
    }

const styles = StyleSheet.create({
    safeView: {
        flex: 1
    },
    webView: {
        width: '100%',
        height: '100%',
        flex: 1,
        justifyContent: 'center',
    },
    container: {
        height: 30,
        width: '100%',
        flexDirection: 'row'
    },
    items: {
        width: '50%'
    }
});

Any idea what I might be missing ?

Thanks in advance for your help, Julien

[jacobp100]

Do you have a safe area provider at the top of your app?

[jacobp100]

I’ll close this ticket because it’s not a bug but I’ll still provide you with pointers

[pesseyjulien]

thanks and no SafeArea.

My main.js :

render() { return <MyWebView/> }

My WebView.js :

 render() {

         return (

             <SafeAreaView edges={this.edges()} style={this.safeViewStyle()}>

                <StatusBar barStyle={this.barStyle()} backgroundColor={this.barColor()} />

                {(this.state.renderLoading) ? <LoadingView/> : false}

                <UpdateNotice />

                <OfflineNotice />

                {
                    (this.state.canGoBack)
                    ? <View style={styles.container}>
                        <View style={styles.items}>
                            <TouchableOpacity style={{position: 'absolute', left: 5}} onPress={this.onBack.bind(this)}>
                                <Icon name="arrow-back" size={30} color="#000" />
                            </TouchableOpacity>
                        </View>
                        <View style={styles.items}>
                            <TouchableOpacity style={{position: 'absolute', right: 5}} onPress={this.onOpen.bind(this)}>
                                <Icon name="launch" size={25} color="#000" />
                            </TouchableOpacity>
                        </View>
                    </View>
                    : false
                }

                 <View style={{height: 5}} >
                     <ScrollView
                         style={{
                             flex: 1,
                             height: '100%',
                             //backgroundColor: 'red'
                         }}
                         //scrollEnabled={false}
                         onLayout={e => {
                             this.setState({ scrollViewHeight: e.nativeEvent.layout.height })
                         }}
                         refreshControl={
                             <RefreshControl
                                 refreshing={false}
                                 enabled={this.state.isPullToRefreshEnabled}
                                 onRefresh={this.onRefresh}
                                 tintColor="transparent"
                                 colors={["transparent"]}
                                 style={{ backgroundColor: "transparent" }}
                             />
                         }
                     >
                     </ScrollView>
                 </View>

                 <WebView
                     source={{uri: this.state.url}}
                     style={WEBVIEW(this.state.scrollViewHeight)}
                   ..
                 />
             </SafeAreaView>
         )
    }

[pesseyjulien]

All good, working with :

Main.js

  render() {
        return (
            <SafeAreaProvider>
                    <MyWebView/>
            </SafeAreaProvider>
        )
    }

Thanks again !