Стили React Native для разных устройств

Android

С андроидом у меня возникали проблемы только с версии 8 и выше. Судя по всему они там поменяли рендер или по каким то другим причинам.

Я написал небольшой пакет react-native-android-version, который позволяет решить эту проблему.

Устанавливаем:

yarn add react-native-android-version

Пример использования:

import  AndroidVersion from "react-native-android-version";
import {StyleSheet} from "react-native";

const styles = StyleSheet.create({
    image: {
        ...AndroidVersion.select({

            //Применяем стили для Android API 26 и выше

            '>=26': {
                width: 'auto',
                height: 'auto',
            },
            //Применяем стили для Android API 28 
            '28': {
                width: 'auto',
                height: 'auto',
            },
            //Применяем стили для Android API 25
            25: {
                width: 'auto',
                height: 'auto',
            },
            //Применяем стили по умолчанию
            default: {
                width: '100%',
                height: '100%',
            }
        })
    }
});

IOS

Тут основная сложность в определении типа устройства, например Iphone X имеет верхнюю бровь и скругленные нижние углы, поэтому надо определять именно тип устройства.

Ставим дополнительный пакет react-native-react-native-ios-device

Добавляем в Xcode, как описано в readme.

Пример использования:

import React from 'react';
import IosDevice from 'react-native-react-native-ios-device';

export default class Test extends React.Component {

    state ={
        ios: {}
    };

    componentWillUnmount() {
        IosDevice.getInfo()
            .then(
                (data) => {
                    if (data === 'iPhone10,3') {
                        this.setState({ios: {backgroundColor: 'red'}})
                    }
                }
            )
    }

    render() {
        return (
            <View style={this.state.ios}></View>
        )
    }
}

В методе componentWillMount определяем тип устройства и добавляем стили.

Теги: