http://iosres.com/
https://material.io/tools/devices/
http://screensiz.es/


https://www.sebastien-gabriel.com/designers-guide-to-dpi/
https://medium.com/@pnowelldesign/pixel-density-demystified-a4db63ba2922
POINTS in Apple, DIP (Density Independent Pixels) in Android
RN: unidad siempre es DIP, no se pone la unidad



import React from "react";
import PropTypes from "prop-types";
import { AppState, View } from "react-native";

class StatusHandler extends React.PureComponent {
    static propTypes = {
        setStatus: PropTypes.func.isRequired
    };

    componentDidMount() {
        AppState.addEventListener("change", this.props.setStatus.bind(this));
        this.props.setStatus(AppState.currentState);
    }

    render() {
        return <View hidden />;
    }
}

export { StatusHandler };




return (
                <Provider>
                    <StatusBar hidden />
                    <ConnectedOnLayoutHandler />
                    <ConnectedOnStatusHandler />
                    <ConnectedKillSwitchHandler onSuccess={() => null} />
                    <TopLevelNavigator
                        ref={navigatorRef => NavigatorService.setContainer(navigatorRef)}
                        uriPrefix={Platform.OS == "android" ? "tbstntrn://tbstntrn/" : "tbstntrn://"}
                    />
                </Provider>
            );




Todos los componentes que precisan estado se conectan a state.view.appLayout





import { HomeCardHandset } from "./homeCard.handset";
import { HomeCardTablet } from "./homeCard.tablet";
import { HomeCardTV } from "./homeCard.tv";
import { selectViewForFormFactor } from "../../utilities";

export const HomeCard = selectViewForFormFactor(HomeCardHandset, HomeCardTablet, HomeCardTV);









import React from "react";
import PropTypes from "prop-types";

// eslint-disable-next-line react/require-render-return
class HomeCardCommon extends React.PureComponent {
    static propTypes = {
        appLayout: PropTypes.string.isRequired,
        ...
    };

    render() {
        throw new Error("MUST IMPLEMENT ABSTRACT render() METHOD");
    }
}

export { HomeCardCommon };





action para layout:

export const resetLayout = ({ view: { ...rest } }) => ({
    view: {
        ...rest,
        appLayout: `${Dimensions.get("window").height}/${Dimensions.get("window").width}`
    }
});




Todas las vistas son

render() { if FormFactor.isPortrait ... else ... }