Widget styling and customization

The best way to style and customize the widget is using StorifyMe Widget Editor, which is a visual tool available inside StorifyMe platform.

Widget style

Best way to style look and feel is using a Widget Editor

Custom font

Download the font, it should be in .ttf format, maybe some others will do. Place it somewhere in the project you want.

iOS Custom fonts

For iOS, check the iOS Custom fonts section

import {
  StorifyMeEnv,
  StorifyMeWidget,
  StorifyMe,
  StorifyMeWidgetConfig,
  StorifyMeStoryAudioOptions,
  StorifyMeStoryPlaybackOptions,
} from 'react-native-storifyme';

export default function App() {
  const ref = React.useRef(null);
  
  // Widget configuration
  const widgetConfig: StorifyMeWidgetConfig = {
    supportedFonts: [
      {
        name: 'Aclonica',
        url: 'aclonica.ttf',
      },
      {
        name: 'Courier',
        url: 'courier.ttf',
      },
      {
        name: 'Aladin',
        url: 'aladin.ttf',
      },
    ],
  };

  return (
    <ScrollView>
      <View>
        <View style={styles.container}>
        <StorifyMeWidget
          accountId={ACCOUNT_ID}
          apiKey={API_KEY}
          env={ENV}
          widgetId={WIDGET_ID}
          config={widgetConfig}
          ref={ref}
        />
      </View>
    </ScrollView>
  );
}