The Form Factor module provides information on the current form factor used by an application.
The form factor used by an application loads the assets required and customizes some functionality.
Properties
| Property Name |
Description |
Return Type |
| isTV |
Returns true if the current form factor is TV. |
Bool |
| isHandset |
Returns true if the current form factor is Handset. |
Bool |
| isTablet |
Returns true if the current form factor is Tablet. |
Bool |
| formFactor |
Returns the current form factor, which could be TV, Handset, or Tablet. |
string |
Methods
| Method Name |
Description |
Return Type |
| select |
Returns a value from the provided object whose key matches the current form factor. If the form factor is not found within the object, the default value will be returned. |
Any |
Usage
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import { FormFactor } from '@youi/react-native-youi';
export default class ExampleApp extends Component {
render() {
const style = FormFactor.select({
TV: styles.containerTV,
Tablet: styles.containerTablet,
Handset: styles.containerHandset,
});
return (
<View style={style}>
<Text style={styles.text}> {`Form Factor: ${FormFactor.formFactor}`} </Text>
<Text style={styles.text}> {`isTablet: ${FormFactor.isTablet}`}</Text>
<Text style={styles.text}> {`isHandset: ${FormFactor.isHandset}`}</Text>
<Text style={styles.text}> {`isTV: ${FormFactor.isTV}`}</Text>
</View>
);
}
}
