pos. home. modal. renderTarget
Target
A full-screen extension target that renders when a pos.home.tile.render
target calls for it
Was this section helpful?
Modal
import React from 'react'
import { Text, Screen, ScrollView, Navigator, reactExtension } from '@shopify/ui-extensions-react/point-of-sale'
const Modal = () => {
return (
<Navigator>
<Screen name='HelloWorld' title='Hello World!'>
<ScrollView>
<Text>Welcome to the extension!</Text>
</ScrollView>
</Screen>
</Navigator>
)
}
export default reactExtension('pos.home.modal.render', () => <Modal />);
examples
Modal
React
import React from 'react' import { Text, Screen, ScrollView, Navigator, reactExtension } from '@shopify/ui-extensions-react/point-of-sale' const Modal = () => { return ( <Navigator> <Screen name='HelloWorld' title='Hello World!'> <ScrollView> <Text>Welcome to the extension!</Text> </ScrollView> </Screen> </Navigator> ) } export default reactExtension('pos.home.modal.render', () => <Modal />);
TS
import { Navigator, Screen, ScrollView, Text, extension, } from '@shopify/ui-extensions/point-of-sale'; export default extension('pos.home.modal.render', (root) => { const navigator = root.createComponent(Navigator); const screen = root.createComponent(Screen, { name: 'HelloWorld', title: 'Hello World!', }); const scrollView = root.createComponent(ScrollView); const text = root.createComponent(Text); text.append('Welcome to the extension!'); scrollView.append(text); screen.append(scrollView); navigator.append(screen); root.append(navigator); });