import * as React from 'react' ; import { Text , View , Alert , TouchableOpacity } from 'react-native' ; import { ContextMenuView } from 'react-native-ios-context-menu' ; import type { ContextMenuExampleProps } from './SharedExampleTypes' ; import { ContextMenuCard } from '../components/ContextMenuCard' ; export function ContextMenuViewExample14 ( props ) { return ( < ContextMenuView style = { props . style } previewConfig = { { previewType : 'CUSTOM' , previewSize : 'STRETCH' , backgroundColor : 'rgba(255,255,255,0.75)' , preferredCommitStyle : 'pop' , } } renderPreview = { ( ) => ( < View style = { { flex : 1 , alignItems : 'center' , justifyContent : 'center' } } > < TouchableOpacity > < Text style = { { fontSize : 32 } } > Hello World < /Text> < /TouchableOpacity> < TouchableOpacity > < Text style = { { fontSize : 32 } } > Hello World < /Text> < /TouchableOpacity> < TouchableOpacity > < Text style = { { fontSize : 32 } } > Hello World < /Text> < /TouchableOpacity> < /View>)} onPressMenuItem={({ nativeEvent }) => { Alert . alert ( 'onPressMenuItem Event' , `actionKey: ${ nativeEvent . actionKey } - actionTitle: ${ nativeEvent . actionTitle }` ) ; } } > < ContextMenuCard index = { props . index } title = { 'ContextMenuViewExample14' } description = { [ `Show a custom preview for the context menu with the "preferredCommitStyle" property in the "PreviewConfig" prop set to "pop"` ] } / > < /ContextMenuView>); } ;