Text strings must be wrapped within a Component

  Kiến thức lập trình
const MyFlexWrapper = styled(View)(
  props => `
  flex-direction: ${props.direction || 'column'};
  justify-content: ${props.justifyContent || 'flex-start'};
  align-items: ${props.alignItems || 'flex-start'};
  margin: ${props.viewMargin || '0px'};
  padding: ${props.viewPadding || '0px'};
  width: ${props.width || 'auto'};
  height: ${props.height || 'auto'};
  flex-basis: ${props.flexBasis || 'auto'};
  flex-wrap: ${props.flexWrap || 'nowrap'};
  background: ${props.background || 'transparent'};
  position: ${props.position || 'relative'};
  border-color: ${props.borderColor || Colors.white};
`
)
const MyTouchableFlex = styled(TouchableOpacity)(
  props => `
  flex-direction: ${props.direction || 'column'};
  justify-content: ${props.justifyContent || 'flex-start'};
  align-items: ${props.alignItems || 'flex-start'};
  margin: ${props.viewMargin || '0px'};
  padding: ${props.viewPadding || '0px'};
  width: ${props.width || 'auto'};
  height: ${props.height || 'auto'};
  flex-basis: ${props.flexBasis || 'auto'};
  flex-wrap: ${props.flexWrap || 'nowrap'};
  background: ${props.background || 'transparent'};
  position: ${props.position || 'relative'};
  border-radius: ${props.borderRadius || '0px'};
  border-width: ${props.borderWidth || '0px'};
  border-color: ${props.borderColor || Colors.white};
  disabled: ${props.disabled || false};
`
)

Code in LandingStack/Screen: => returned JSX

  useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <MyFlexWrapper direction="row" alignItems="center">
          {C ? Visible ? (<MyTouchableFlex direction="row" onPress={() => Alert.alert(t("common:title"), t("common:subtitle"), [{text: t("common:ok")}])} viewPadding="0 20px 0 0"><Icon name={"Off"} /> </TouchableFlex> ) : null: (<TouchableFlex direction="row"  onPress={() => Alert.alert(t("common:title"), t("common:subtitle"), [{text: t("common:ok")}])} viewPadding="0 20px 0 0"><Icon name={"Off"} /></MyTouchableFlex>)}
          <MyTouchableFlex direction="row" onPress={() => navigation.navigate('mysettings')} viewPadding="0 20px 0 0">
            <Icon name="setting" fill={theme.primaryText} />
          </MyTouchableFlex>
          <MyTouchableFlex direction="row" onPress={() => navigation.navigate('N')} viewPadding="0 20px 0 0">
            <Icon name="n" fill={theme.primaryText} />
          </MyTouchableFlex>
        </MyFlexWrapper>
      )
    })
  }, [])

Code in HeaderRightComponent => returned JSX

<MyFlexWrapper direction="row" alignItems="center">
    {C ? Visible ? (<MyTouchableFlex direction="row" onPress={() => Alert.alert(t("common:title"), t("common:subtitle"), [{text: t("common:ok")}])} viewPadding="0 20px 0 0"><Icon name={"Off"} /> </TouchableFlex> ) : null: (<TouchableFlex direction="row"  onPress={() => Alert.alert(t("common:title"), t("common:subtitle"), [{text: t("common:ok")}])} viewPadding="0 20px 0 0"><Icon name={"Off"} /></MyTouchableFlex>)
}
    <MyTouchableFlex direction="row" onPress={() => navigation.navigate('N')} viewPadding="0 20px 0 0">
      <Icon name="n" fill="#fff" />
    </MyTouchableFlex>
    </MyFlexWrapper>

ERROR Error: Text strings must be rendered within a component.

This error is located at:
    in RCTView (created by View)
    in View (created by Animated(View))
    in Animated(View) (created by TouchableOpacity)
    in TouchableOpacity (created by TouchableOpacity)
    in TouchableOpacity (created by Styled(TouchableOpacity))
    in Styled(TouchableOpacity) (created by HeaderRightComponent)
    in RCTView (created by View)
    in View (created by Styled(View))
    in Styled(View) (created by HeaderRightComponent)
    in HeaderRightComponent (created by Header)
    in RCTView (created by View)
    in View (created by Animated(View))
    in Animated(View) (created by Header)
    in RCTView (created by View)
    in View (created by Header)
    in RCTView (created by View)
    in View (created by Animated(View))
    in Animated(View) (created by Header)
    in Header (created by HeaderSegment)
    in HeaderSegment (created by Header)
    in Header (created by HeaderContainer)
    in RCTView (created by View)
    in View (created by HeaderContainer)
    in RCTView (created by View)
    in View (created by Animated(View))
    in Animated(View) (created by HeaderContainer)
    in HeaderContainer (created by CardContainer)
    in RCTView (created by View)
    in View (created by CardContainer)
    in RCTView (created by View)
    in View
    in CardSheet (created by Card)
    in RCTView (created by View)
    in View (created by Animated(View))
    in Animated(View) (created by PanGestureHandler)
    in PanGestureHandler (created by PanGestureHandler)
    in PanGestureHandler (created by Card)
    in RCTView (created by View)
    in View (created by Animated(View))
    in Animated(View) (created by Card)
    in RCTView (created by View)
    in View (created by Card)
    in Card (created by CardContainer)
    in CardContainer (created by CardStack)
    in RNSScreen (created by Animated(Anonymous))
    in Animated(Anonymous) (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by MaybeScreen)
    in MaybeScreen (created by CardStack)
    in RNSScreenContainer (created by ScreenContainer)
    in ScreenContainer (created by MaybeScreenContainer)
    in MaybeScreenContainer (created by CardStack)
    in RCTView (created by View)
    in View (created by Background)
    in Background (created by CardStack)
    in CardStack (created by HeaderShownContext)
    in RCTView (created by View)
    in View (created by SafeAreaProviderCompat)
    in SafeAreaProviderCompat (created by StackView)
    in RNGestureHandlerRootView (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by StackView)
    in StackView (created by StackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by StackNavigator)
    in StackNavigator (created by LandingStackScreen)
    in LandingStackScreen (created by SceneView)

Above is code and stack trace from logger. It looks the error is in headerRightComponent or LandingStack so, looking there, there does not seem to be an issue. I tried commenting out the code as is and recompiling still failed with same error but at some other line of the file this time. I cannot locate a text string at all to wrap in the text component . Saw the git diffs comparing to last commit.

LEAVE A COMMENT