React native определение платформы

Для определения платформы в react-native вначале импортируем Platform

import {Platform} from 'react-native';

Использовать его можно, например так:

const Wrapper = Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;

И если переписать функцию AppButton.js из предыдущих статей, то можно сделать примерно так:

import React from 'react';
import {StyleSheet, View, TouchableOpacity, TouchableNativeFeedback, Platform} from 'react-native';
import {AppTextBold} from './AppTextBold';
import { THEME } from '../../theme';

export const AppButton = ({children, onPress, color=THEME.MAIN_COLOR}) => {
    const Wrapper = Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
    return (
        <Wrapper onPress={onPress} activeOpacity={0.7}>
            <View style={{...styles.button, backgroundColor: color}}>
                <AppTextBold style={styles.text}>{children}</AppTextBold>
            </View>
        </Wrapper>
    )
}

const styles = StyleSheet.create({
    button: {
        paddingHorizontal: 20,
        paddingVertical: 10,
        borderRadius: 50,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    text: {
        color: '#fff',
    }
})

Пример использования определения стилей в зависимости от платформы, файл Navbar.js

import React from 'react';
import {View, StyleSheet, Platform} from 'react-native';
import { AppTextBold } from './AppTextBold';
import { THEME } from '../../theme';

export const Navbar = () => {
    return(
        <View style={{...styles.navbar, ...Platform.select({
            ios: styles.navbarIos,
            android: styles.navbarAndroid,
        })}}>
            <AppTextBold style={styles.text}>
                Учет товаров
            </AppTextBold>
        </View>
    )
}

const styles = StyleSheet.create({
    navbar: {
        paddingBottom: 10,
        height: 70,
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    navbarAndroid: {
        backgroundColor: THEME.MAIN_COLOR,
    },
    navbarIos:{
        borderBottomColor: THEME.MAIN_COLOR,
        borderBottomWidth: 1,
    },
    text: {
        color: Platform.OS === 'ios' ? THEME.MAIN_COLOR : 'white',
        fontSize: 20,
    }
})