Custom text contextmenu for react-native using webview in this you could customize everything about your contextmenu without using any native code
npm install react-native-webview react-native-text-contextmenu
import * as React from 'react';
import { StyleSheet, View, Dimensions } from 'react-native';
import TextContextmenu from 'react-native-text-contextmenu';
const html = `
<div class="main-content">
<p></p><p>Chapter 1 : Mt. Yellow’s True Monarch and Nine Provinces (1) Group</p><p></p><p>20th May 2019, Monday.</p><p></p><p>At the end of spring and summer’s arrival.</p><p></p><p>This season, the temperature difference between the Jiang Nan region’s day and night was huge. During the day, even if one was wearing shorts he could heat up like a hot dog; yet during the night he had to curl up on his bed, freezing like a cold bird.</p><p></p><p>Jiang Nan University City.</p>
</div>
`
export default function App() {
const css = `
.main-content p {
font-size: 26px;
line-height: 160%;
margin-left: 52px;
margin-right: 42px;
font-family: Arial, sans-serif, serif;
background-color: inherit;
z-index: -9999999999999999999999999;
}
.selection-menu {
font: 12px/100% Roboto, sans-serif;
}
.mobile {
font-size: 20px !important;
min-height: 30px !important;
font-weight: bold;
padding: 14px !important;
padding-top: 21px !important;
}
`
return (
<View style={styles.container}>
<TextContextmenu minlength={3} value={html} menus={[{
text: "Copy",
icon: `<i class="fa fa-eye"></i>`,
id: "copy"
},
{
text: "Delete",
icon: `<i class="fa fa-times"></i>`,
id: "delete"
},
{
text: "Translate",
icon: `<i class="fa fa-times"></i>`,
id: "translate"
}]} maxItems={2} scrollTop={100} selections={[{ text: "the ", color: "red" }]} onSelect={(data, text) => {
console.log(data, text);
}} width={Dimensions.get("window").width} height={Dimensions.get("window").height} css={css} />
</View>
);
}
the width of the webview
the height of the webview
the contextmenu when the text gets selected
text or html
when a contextmenu gets selected, it include the menu and the selected text
how many items get display in contextmenu and the rest will be included under a collabs button
select text with its properties eg [{text: "the", color: red}]
when the window gets scrolled, it return scrolltop
style of the page. here you can customize even the selection-menu
see the css file for more info
inject javascript before the contextmenu gets bind
inject javascript after the contextmenu gets bind
how much text has to get selected before contextmenu gets displayed default is 1
override the contextmenujs and load your own js file. This is a link eg file:///android_asset/contextMenu.js
When the container gets clicked
ScrollY Offset
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
Made with create-react-native-library