Return UI components from functions in react-native
The following code is working fine
<View>
<ViewShot ref={viewShotRef}>
<Grayscale >
<Image style={styles.imgstyle}
source={{ uri: sourceImage, }}
onLoadEnd={onImageLoaded}
/>
</Grayscale>
</ViewShot>
</View>
I tried to render some of the UI in a function
const renderFilter = () => {
return(
<Grayscale >
<Image style={styles.imgstyle}
source={{ uri: sourceImage, }}
onLoadEnd={onImageLoaded}
/>
</Grayscale>
)
}
<View>
<ViewShot ref={viewShotRef}>
renderFilter()
</ViewShot>
</View>
But I got an error. Not sure from where exactly the error is coming.
Error: Text strings must be rendered within a <Text> component.
1 answer
-
answered 2022-05-04 11:01
David Scholz
You cannot call a function inside a JSX block without using curly braces. The following will fix your issue.
<View> <ViewShot ref={viewShotRef}> {renderFilter()} </ViewShot> </View>
How many English words
do you know?
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
how many words do you know
Powered by Examplum