ThemedStylesheet.md

Themed StyleSheets

Themed StyleSheets allow you to create a StyleSheet using information from a FURN theme. The resulting objects are memoized onto the Theme object itself, so if you access them again they'll be cached if the Theme hasn't changed. You can then access styles off the StyleSheet as you usually would and pass them into components as the value for a style prop.

Defining a themed StyleSheet

Defining a themed StyleSheet is similar to creating a RN StyleSheet, but it takes in a theme as an arg.

// Component.styles.ts
import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
import { Theme } from '@fluentui-react-native/framework';

export const getThemedStyles = themedStyleSheet((theme: Theme) => {
  return {
    root: { minHeight: 382, paddingHorizontal: 16 },
    container: { backgroundColor: theme.colors.background },
    list: { flexDirection: 'row' },
    content: { margin: 8 },
  };
});

Using a themed StyleSheet

You can use a themed StyleSheet as you would an RN StyleSheet that's generated via a function:

// Component.ts
import { getThemedStyles } from './Component.styles.ts';
import { useFluentTheme } from '@fluentui-react-native/framework';

export const Component = () => {
  const styles = getThemedStyles(useFluentTheme());

  return (
    <View style={styles.root}>
      <Text style={styles.content}>Hello World!</Text>
    </View>
  );
};

Additional Reading

For more detailed information, check out our README.