CODEWITHSUNDEEP
react-native
A.Arshad
A.Arshad

Reputation: 21

React Native Text strings must be rendered within a <Text> component

Hy , i am trying to write a component within same file where i am using it . so that i can call that component again and again .I just don't want to copy paste code for each "Component".when i call that component it gives me that error : 

Text strings must be rendered within a <Text> component.

My Complete Repository : MealAPP I am working on this file : Filters Screen Here is my code : 

//Component that i want to call 

const FilterSwitch = props => {
  return (
    <View style={styles.filterContainer}>
      <Text>{props.label}</Text>
      <Switch
        trackColor={{ true: Colors.primaryColor }}
        thumbColor={Platform.OS === "android" ? Colors.primaryColor : ""}
        value={props.state}
        onValueChange={props.onChange}
      />
    </View>
  );
};

const FilterScreen = props => {
  const [isGlutenFree, setIsGlutenFree] = useState(false);
  return (
    <View style={styles.screen}>
// i am calling here 

      <FilterSwitch
        label="Gluten-free"
        state={isGlutenFree}
        onChange={newValue => setIsGlutenFree(newValue)}
      />

    </View>
  );
};

Stack Trace : 

Running application on Android SDK built for x86.

Text strings must be rendered within a <Text> component.
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:4137:14 in <anonymous>
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:4134:2 in createTextInstance
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15909:12 in completeWork
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19409:28 in completeUnitOfWork
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19380:30 in performUnitOfWork
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19347:39 in workLoopSync
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18997:22 in renderRoot
* [native code]:null in renderRoot
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18709:28 in runRootCallback
* [native code]:null in runRootCallback
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5642:32 in runWithPriority$argument_1
- node_modules\scheduler\cjs\scheduler.development.js:643:23 in unstable_runWithPriority
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5638:22 in flushSyncCallbackQueueImpl
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5627:28 in flushSyncCallbackQueue
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18796:28 in batchedUpdates$1
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2709:30 in batchedUpdates
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2794:17 in batchedUpdates$argument_0
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2870:28 in receiveTouches
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:436:47 in __callFunction
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:26 in __guard$argument_0        
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:110:17 in __guard$argument_0        
* [native code]:null in callFunctionReturnFlushedQueue

Upvotes: 0

Views: 906

Answers (2)

Ben Butterworth
Ben Butterworth

Reputation: 28482

Your ES-lint probably mistakenly generated {" "} on line 31, as seen in your github file, FiltersScreen.js, here. This happened to me too, and sometimes occurs when you have empty space between a > and a <. Make sure you don't have empty spaces after the component (new lines are fine).

Upvotes: 1

Oleg Kupriianov
Oleg Kupriianov

Reputation: 178

Are you sure that this is all your code here? Usually such error happens when you really try to render plain text not wrapped in Text tag.

Upvotes: 2

Related Questions