For a starting point of our editor, we take a standard approach. This approach is used in the majority of CAD systems or in applications that allow creating wireframes of the web pages.\u00a0<\/span><\/p>\n So, with the help of regular “tap” and following dragging, we select an area on the screen where we want to place the new component. It can be an input box, just a draft of \u201cdummy text\u201d or any other component.\u00a0<\/span><\/p>\n After that, we choose the needed element from the app components library and, if necessary, adjust its size. In the end, we receive JSON configuration with new page parameters.\u00a0<\/span><\/p>\n But enough with theory, let\u2019s write the code.<\/span><\/p>\n For the convenient work with the form, first of all, we need a grid, which can be found in every editor. This grid lets to place components more accurately on the page and helps not to waste time on the element manual positioning. Let\u2019s try to implement something like this.\u00a0<\/span><\/p>\n Firstly, we need to create a component to be the wrapper for all components of the page: src\/pages\/Home\/components\/PageWrap<\/a>. It will also serve as a place where all events will be handled (interaction between user and components).<\/span><\/p>\n For a proper drawing of the grid, we need to know the parameters of the page we are working with beforehand. Responsible for it is a handler: handleLayout src\/pages\/Home\/components\/PageWrap.js:51<\/a><\/span><\/p>\n Then we can create the grid component: <\/span>src\/pages\/Home\/components\/GridComponent.js<\/a><\/strong><\/p>\n As a foundation, we use a hurriedly generated SVG picture. To make the form look beautiful, we need to make a flexible grid that depends on our own conditional units instead of screen pixels. It allows making the page readable independently of screen proportions or its positioning.\u00a0<\/span><\/p>\n HOC src\/pages\/Home\/components\/GridComponent.js<\/a> is responsible for the attachment of the elements to the grid and transformation of coordinates from pixels to our conditional units. It serves as a wrapper of all page elements and performs their positioning.\u00a0\u00a0\u00a0<\/span><\/p>\n Now let\u2019s work on the functions of interaction with our elements. As said before, we need to be able to change the sizes of elements and their disposition on the screen.\u00a0<\/span><\/p>\n For this interaction we use PanResponder. This is an event handler that allows us to track the interaction between users and elements on the screen. We need it not only for the elements but for the whole page. As at the very beginning of element creation (first click on the form’s empty space), the element itself doesn\u2019t exist.\u00a0<\/span><\/p>\n So set panResponder against the whole page, or more specifically, against the wrapped component: src\/pages\/Home\/components\/PageWrap.js:22.\u00a0<\/a><\/span><\/p>\n The handling of elements interaction is realized in the same way as it is usually done in browsers. That is through the events system. Actually, it is possible to realize it by standard React capabilities, when we implement OnClick function for every element and also for the wrapper element. Still,<\/span> I am more keen to use the approach with the events’ system. It seems easier and eventually initiates a smaller number of render events.<\/p>\n Now, it\u2019s time for interactions. While initiating the PanResponder, we should instantly assign to its events onPanResponderGrant, onPanResponderMove, onPanResponderRelease. An attentive reader could ask why I missed onPanResponderTerminate. I did it on purpose, as now we are working on the conception and can neglect a few other additional aspects.\u00a0<\/span><\/p>\n In its turn, with the help of eventEmiter, onclick events generate our custom events. And existing elements on the page react to these particular custom events.\u00a0<\/span><\/p>\n Every element of the page has 2 phases: phase of calmness and phase of the interaction. It helps to assign all elements to our events only when it\u2019s necessary, and avoid their simultaneous interaction.<\/span><\/p>\n To implement such type of actions with a minimum number of code changes, we add one more wrapping component: src\/pages\/Home\/components\/ComponentContainer.js<\/a>. Its function is to realize assigning to events and interaction with users.\u00a0<\/span><\/p>\n This new component is a container where we place our main component from the list of our components and also the component which changes the phase while choosing (in our case it\u2019s \u201ctap\u201d on the element): src\/pages\/Home\/components\/ComponentContainer.js:118<\/a>. There is also a range of additional marker components that appear only at the interaction phase and are used for convenient dragging\/changing the main component sizes.\u00a0<\/span><\/p>\n For example, let’s take a look at the abstract element. It can be a button, field, etc.\u00a0 In the editing mode, it has to have zones that react to our events: 4 elements that handle the size changes while dragging beyond the component\u2019s rims and 1 central element that is responsible for transposition.\u00a0<\/span><\/p>\n Schematically it looks like this:\u00a0<\/span><\/p>\n <\/p>\n Black square shows object outlines, blue and red zones handle the interaction: <\/span>src\/pages\/Home\/components\/InteractionMarket.js<\/span><\/a><\/p>\n To implement the creation of a new component we need to make a new additional cap component. This cap component is needed to define the location area for a new component and to choose the type of the component from our library: src\/pages\/Home\/components\/CapComponent.js\u00a0<\/a><\/span><\/p>\n When the interaction between the user and this element is finished,\u00a0 the modal window is called. In our case, these are a few basic elements from the React-native-base library: <\/span>src\/pages\/ModalComponentsSelector\/index.js<\/span><\/a><\/p>\n After choosing the component, the mechanism of adding new element is called from the wrapped component: src\/pages\/Home\/components\/PageWrap.js:83<\/a><\/span><\/p>\n Therefore the configuration of a new component is added to the state and page rebuilding with new components takes place.\u00a0<\/span><\/p>\n This is the end of the main part of the conception of the dynamic page building.\u00a0 Received configuration can be sent to the server for future processing. Or, as in our case, saved in localStorage for descriptive reasons.\u00a0<\/span><\/p>\n If you find the article useful, I will continue the topic and describe how to change settings of previously created components.\u00a0<\/span><\/p>\n <\/p>\n Read more:<\/p>\n \u2013 Adding SVG Icons to Your React Native App<\/a><\/p>\n \u2013 Creating Custom React Native UI Components Android<\/a><\/p>\n \u2013 How to Create WYSIWYG Widget Editor on React Native<\/a><\/p>\nThe Grid Formation<\/h3>\n
![\"\"](\"http:\/\/productcrafters.io\/blog\/wp-content\/uploads\/2026\/01\/1-768x1321-1.webp\")
<\/p>\nMake panResponder available and add our events\r\n
\r\nthis.panResponder = PanResponder.create({\r\n \/\/ Ask to be the responder:\r\n onStartShouldSetPanResponder: (e, gestureState) =>\r\n !!gestureState.dx || !!gestureState.dy,\r\n onStartShouldSetPanResponderCapture: () => false,\r\n onMoveShouldSetPanResponderCapture: () => false,\r\n onMoveShouldSetPanResponder: (e, gestureState) =>\r\n !!gestureState.dx || !!gestureState.dy,\r\n onPanResponderGrant: (evt, gestureState) => {\r\n if (events.listenerCount(EVENT_MOVE_BEGIN)) {\r\n events.emit(EVENT_MOVE_BEGIN, gestureState)\r\n } else {\r\n events.emit(EVENT_MOVE_NEW, gestureState)\r\n }\r\n },\r\n onPanResponderMove: (evt, gestureState) => {\r\n events.emit(EVENT_MOVE, gestureState)\r\n },\r\n onPanResponderRelease: (evt, gestureState) => {\r\n events.emit(EVENT_MOVE_END, gestureState)\r\n },\r\n onPanResponderTerminationRequest: () => false,\r\n onShouldBlockNativeResponder: () => false,\r\n})\r\n<\/code><\/pre>\nForm the grid\r\n
\r\n<Svg height={height} width={width}>\r\n {_.range(0, height, grid.height).map((h) => (\r\n <Line\r\n x1={0}\r\n y1={h}\r\n x2={width}\r\n y2={h}\r\n key={`line_${h}_${width}`}\r\n stroke=\"rgba(0, 0, 0, 0.2)\"\r\n strokeWidth={1.6}\r\n strokeDasharray={`${pointSize} ${unitWidth - pointSize}`}\r\n strokeDashoffset={0.4}\r\n \/>\r\n ))}\r\n<\/Svg>\r\n<\/code><\/pre>\nInteraction With the Elements<\/h3>\n
Get attached to the mouse events\r\n
\r\nonListeningBegin = () => {\r\n const { events } = this.props\r\n events.addListener(EVENT_MOVE, this.onMove)\r\n events.addListener(EVENT_MOVE_END, this.onMoveEnd)\r\n}\r\n<\/code><\/pre>\nFigure coordinates to display the grid\r\n
\r\ngetNewPosition = (dx, dy) => {\r\n if (this.interactionType === 'left') {\r\n if (dx < this.style.width) {\r\n return { left: this.style.left + dx, width: this.style.width - dx }\r\n }\r\n } else if (this.interactionType === 'right') {\r\n if (this.style.width + dx > 0) {\r\n return { width: this.style.width + dx }\r\n }\r\n } else if (this.interactionType === 'top') {\r\n if (dy < this.style.height) {\r\n return { top: this.style.top + dy, height: this.style.height - dy }\r\n }\r\n } else if (this.interactionType === 'bottom') {\r\n if (this.style.height + dy > 0) {\r\n return { height: this.style.height + dy }\r\n }\r\n } else if (this.interactionType === 'center') {\r\n return { top: this.style.top + dy, left: this.style.left + dx }\r\n }\r\n\r\n return null\r\n}\r\n<\/code><\/pre>\n![\"\"](\"http:\/\/productcrafters.io\/blog\/wp-content\/uploads\/2026\/01\/2-1-1.webp\")
<\/p>\nElement and interaction zones look like this\r\n
\r\n<React.Fragment>\r\n <InteractionMarket type=\"center\" onPress={this.handleInteract} \/>\r\n <InteractionMarket type=\"left\" onPress={this.handleInteract} \/>\r\n <InteractionMarket type=\"right\" onPress={this.handleInteract} \/>\r\n <InteractionMarket type=\"top\" onPress={this.handleInteract} \/>\r\n <InteractionMarket type=\"bottom\" onPress={this.handleInteract} \/>\r\n<\/React.Fragment>\r\n<\/code><\/pre>\nCreation of a New Element<\/h3>\n
![\"\"](\"http:\/\/productcrafters.io\/blog\/wp-content\/uploads\/2026\/01\/3-1-1.webp\")
<\/p>\n