Question 220343 in React native Question posted in
The official React Native documentation can be found here.

Set the title dynamically in react native paper card title

I am using react native paper. But I have some trouble with setting the title with my variables. Any help is appreciated.

As stated in their doc Text for the title. Note that this will only accept a string or <Text>-based node. but I am not sure how to insert -based nodes
https://callstack.github.io/react-native-paper/docs/components/Card/CardTitle

        <Card.Title
          title={
            <Text>
              Top {sites.length} Sights in {country.name}
            </Text>
          }
            />

But i get the following error

Text' cannot be used as a JSX component.
  Its instance type 'Text' is not a valid JSX element.
    Type 'Text' is missing the following properties from type 'ElementClass': render, context, setState, forceUpdate, and 3 more.
Tags:

2

Answers


  1. 0

    here:

     <Card.Title
          title={(props) => (
            <Text>
              {`Top ${sites.length} Sights in ${country.name}`}
            </Text>
          )}
            />
    Login or Signup to reply.
  2. 0

    The error appeares because title prop is expecting a text not JSX. To use variable title you can use this code

    <Card.Title
          title={`Top ${sites.length} Sights in ${country.name}`}
/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search