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

오류화면

 

구글링 결과

</Component>; 같은 오타 때문에 생긴다고해서 >; 를 컴포넌트 마다 검색해봤는데 이런 오타는 없었다.

 

 

 

그렇다면 이 부분을 한 번 확인해보자!

// MovieScreen.jsx
return state ? ( 
      <View>
          <Text> Hello </Text>
      </View>
    ) : ( " " );

 

이런 식의 코딩을 렌더링 부분에서 자주 사용했는데 간과한 부분이 있다.

상위 컴포넌트에서 해당 컴포넌트(MovieScreen)를 어떻게 불러오는 지를 확인해야 한다.

 

 

//ScreenTab.jsx
<Tab.Screen
        name="Movie"
        component={MovieScreen}
        options={{
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons
              name="movie-open"
              color={color}
              size={size}
            />
          ),
        }}
      ></Tab.Screen>

해당 컴포넌트(MovieScreen)을 component props로 사용하고 있었다.

 

 

변경 코드

// MovieScreen.jsx
return state ? ( 
      	<View>
          	<Text> Hello </Text>
      	</View>
	) : ( 
    	<View>
        	<Text> isLoading </Text>
        </View>
	);