react-native-ios-context-menu/example/src/examples/ContextMenuViewExample01.tsx
Dominic Go 73d558ab60 💫 WIP: Context Menu Auxiliary Preview
Summary:
* Fix autolayout + margin issues for aux. preview.,
* Temp. modify examples to test aux. preview.,
2022-02-09 08:05:36 +08:00

52 lines
1.3 KiB
TypeScript

import * as React from 'react';
import { Alert, View, Text } from 'react-native';
import { ContextMenuView } from 'react-native-ios-context-menu';
import type { ContextMenuExampleProps } from './SharedExampleTypes';
import { ContextMenuCard } from '../components/ContextMenuCard';
export function ContextMenuViewExample01(props: ContextMenuExampleProps) {
return (
<ContextMenuView
style={props.style}
menuConfig={{
menuTitle: 'ContextMenuViewExample01',
menuItems: [{
actionKey : 'key-01',
actionTitle: 'Action #1',
}, {
actionKey : 'key-02' ,
actionTitle: 'Action #2',
}, {
actionKey : 'key-03' ,
actionTitle: 'Action #3',
}],
}}
renderAuxillaryPreview={() => (
<View
style={{backgroundColor: 'red'}}
>
<Text>
Hello
</Text>
</View>
)}
onPressMenuItem={({nativeEvent}) => {
Alert.alert(
'onPressMenuItem Event',
`actionKey: ${nativeEvent.actionKey} - actionTitle: ${nativeEvent.actionTitle}`
);
}}
>
<ContextMenuCard
index={props.index}
title={'ContextMenuViewExample01'}
description={[
`Basic 'ContextMenuView' usage.`
]}
/>
</ContextMenuView>
);
};