Do i have to make seperate MyComponent.android.js file to use SafeArea

Question

I am pretty new to react-native. Whenever i have to make use of SafeAreaView I have to make a seperate .android.js file for same component without safe area leading to duplication.

Is it possible to conditionally use SafeAreaView with platform.os?

Please refer this https://stackoverflow.com/a/51427630/11212074 — hong developer, Aug 06 '19 at 05:30
@hongdevelop I went through the thread. I want to know if I use SafeAreaView and run it on android will it behave like plain View? — amar, Aug 06 '19 at 05:34
SafeAreaView has the same props as regular views. The view shown is the same as the normal view. — hong developer, Aug 06 '19 at 05:46

score 1 · Accepted Answer · answered Aug 06 '19 at 05:29

1

Yes, It is possible to use SafeAreaView with Conditionally for Platform.OS. SafeAreaView only applicable on ios, but also work on android. On my code SafeAreaView work on both OS. If there is a need only on a particular OS then give condition.

answered Aug 06 '19 at 05:29

Abhishek Sutariya

112
1
1
6

So if i am running on Android then SafeAreaView will behave like View? – amar Aug 06 '19 at 05:32
1

Yes, when it is on Notch display it adjusts your UI through SafeAreView in both OS. – Abhishek Sutariya Aug 06 '19 at 06:06

Kishan Bharda · Answer 2 · 2019-08-06T06:01:43.647

I have same problem. So what I done is that create one component called whatever you want eg. SafeScrollView.js and then render conditionally SafeAreaView in that component then pass children to that component.

For example :

I have SafeScrollView.js like below :

import React from 'react';
import { View, SafeAreaView, Platform } from 'react-native';

const SafeScrollView = (props) => {
    if (Platform.OS === "ios") {
        return (
            <View style={props.style}>
                {props.children}
            </View>
        );
    }
    return (
        <SafeAreaView style={props.style}>
            {props.children}
        </SafeAreaView>
    )
}

export default SafeScrollView

Then use SafeScrollView as a component like below :

<SafeScrollView>
     // Your component
</SafeScrollView>

Now, In IOS it will render normal View component and if device is android it will render SafeScrollView. So, you don't have to create separate file.

score 0 · Answer 3 · answered Aug 06 '19 at 05:16

0

SafeAreaView only supports ios. So, you can use conditional statement to you this for particular os.

answered Aug 06 '19 at 05:16

ManojK

171
1
4

I know that and I have already mentioned that i have to make seperate .android.js file. How can i conditionally use in ios and plain in android. – amar Aug 06 '19 at 05:19

Do i have to make seperate MyComponent.android.js file to use SafeArea

3 Answers3