I want to use the value of a custom component as magic text

Get Help
1

I have created a simple custom component. How can I pass this value to magic text like a normal component?

You want to pass the value of the zipcode to another component.

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

const ZipcodeAddress = (props) => {
	const { color, text } = props
	const [zipcode, setZipcode] = useState('')
  
	return (
	  <View style={styles.container}>
		<TextInput
		  style={styles.input}
		  value={zipcode}
		  onChangeText={text => setZipcode(text)}
		  placeholder="text"
		/>
	  </View>
	)
  }
  
  const styles = StyleSheet.create({
	container: {
	  padding: 8
	},
	input: {
	  borderWidth: 1,
	  borderColor: '#ccc',
	  borderRadius: 4,
	  padding: 8
	}
  })
  
  export default ZipcodeAddress
2

Adalo currently does not natively support direct extraction of values from a custom component into Magic Text fields. However, there is a reliable workaround that we’ve used successfully:

  1. Use a Temporary Helper Property in a Collection

  • Create a Collection (e.g., “Temporary States” or “App Data”) with a property like valueToUse

  • From the custom component, trigger an action that updates a record in this collection (e.g. on value change or button click).

  • Now you can reference this updated value as Magic Text in other screens or components.