Return UI components from functions in react-native

2022-05-04 10:22 user567 imported from Stackoverflow

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>
```

See also questions close to this topic

how to change prettier format for react native

my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

from this code

      import { View, Text } from 'react-native'
    
    import React from 'react'
    
    export default function App() {
      return (
        <View>
    
    <Text>Apps</Text>   
</View>
      )
    }

it's formatted to this

import {
  View,
  Text
} from 'react-native'

import React from 'react'

export default function App() {
  return ( <
    View >

    <
    Text > Apps < /Text>


    <
    /View>
  )
}

Command failed: xcrun instruments -s

I want to run my react native app on a real ios device with this line :

npx react-native run-ios --udid SOME-UDID

but i got this error :

xcrun: error: sh -c '/Applications/Xcode.app/Contents/Developer/usr/bin/xcodebuild -sdk /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX.sdk -find instruments 2> /dev/null' failed with exit code 17664: (null) (errno=No such file or directory)
xcrun: error: unable to find utility "instruments", not a developer tool or in PATH
error Command failed: xcrun instruments -s
xcrun: error: sh -c '/Applications/Xcode.app/Contents/Developer/usr/bin/xcodebuild -sdk /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX.sdk -find instruments 2> /dev/null' failed with exit code 17664: (null) (errno=No such file or directory)
xcrun: error: unable to find utility "instruments", not a developer tool or in PATH

everything is ok on simulator

I'm using XCODE 13

How to maintain global states created dynamically
I am trying to Display list of items with then name and button to download its respective file Same list are available in different other screens. When I click on download
1. State info sharing: It should start download and the state/progress of the download should be visible to same item available in different other screens.unique identifier is item id
2. There can be parallel downloads
Problem statement:
1. Unable to share the information for same item if we use state within the same item
2. On use of redux its solving problem 1 however Parallel download information is getting overwritten as its writing to same reducer state
Any idea or approach is appreciated. Thanks

Related questions

Return UI components from functions in react-native

1 answer

See also questions close to this topic