Skip to main content

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

App.js
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>
);
}