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

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

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.

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