How to make component data accessible in other components?

Get Help
1

Hello! I am trying to create alternative text input component. And I want to know, how to allow data accessing from another components. For example we can use data from native input component.Screenshot_39

2

I think there is 2 ways, one is make use of the new formvalue type and another way is make use of the action arguments

3

Thanks for reply! Iā€™m not sure if I understood you, input component has no actions. We have manifest.json and index.js files, what I need to do, to be able to access data from input component?

5

@knight is correct. The first way is to bind formdata to the component. So your manifest.json would look like this

  
{
  "displayName": "Cool new Input",
  "defaultWidth": 160,
  "defaultHeight": 24,
  "components": "./index.js",
  "icon": "./example-thumbnail.png",
  "props": [
    {
      "name": "inputText",
      "displayName": "Text",
      "type": "text",
      "role": "formValue"
    }
  ]
}

Notice the role is formValue. This is a special type of value in Adalo component building. So your index.js will look something like this

import React, { useRef } from 'react'
import { Text, TextInput, View, StyleSheet } from 'react-native'

const InputComponent = (props) => {
	const { inputText } = props

	return(
		<View style={styles.wrapper}>
			<TextInput
				value={inputText.value}
				onChangeText={inputText.onChange}
			/>
		</View>
	)
}

const styles = StyleSheet.create({
	wrapper: {
		display: 'flex',
		alignItems: 'center',
		justifyContent: 'center',
	}
})

export default InputComponent

Now when someone changes the Text it will update the field that was passed to it.

The second way is to use an Action in manifest.json, so your manifest.json will look something like this

  
{
  "displayName": "Cool new Input",
  "defaultWidth": 160,
  "defaultHeight": 24,
  "components": "./index.js",
  "icon": "./example-thumbnail.png",
  "props": [
    {
      "name": "inputText",
      "displayName": "Text",
      "type": "text"
    },
   {
      "name": "onBlur",
      "displayName": "Fired when the user leaves the component",
      "type": "action",
      "arguments": [
        {
          "type": "text",
          "displayName": "Text entered in the textbox"
        }
   },
   {
      "name": "onChangeText",
      "displayName": "Fired when the user updates the text",
      "type": "action",
      "arguments": [
        {
          "type": "text",
          "displayName": "Text entered in the textbox"
        }
   }
  ]
}

with index.js looking like this

import React, { useRef } from 'react'
import { Text, TextInput, View, StyleSheet } from 'react-native'

const InputComponent = (props) => {
	const { inputText, onBlur, onChange } = props

	return(
		<View style={styles.wrapper}>
			<TextInput
				defaultValue={inputText}
				onChangeText={onChangeText}
				onBlur={onBlur}
			/>
		</View>
	)
}

const styles = StyleSheet.create({
	wrapper: {
		display: 'flex',
		alignItems: 'center',
		justifyContent: 'center',
	}
})

export default InputComponent

Doing it this way, in the Adalo interface you will see Actions on your component, then you add a new Action that will update an input or whatever you want.

So, in your example, I would add an Input field on the page and make it 0 by 0 pixels with no border and no background. This way it is invisible. Then the onChangeText action would update the hidden input field. Then you can use the data using the menu that you show in your screenshot

6

Wow, showing it this way, the difference between code and no code come to the surface again. :grinning:

Fortunate to those who can live in these 2 environments.

1 Like
7

thanks for the code example! haha been asking for some code sample for Formvalue which I still learning how to use it. Does formvalue can only use on input?

1 Like
8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.