Display variable in text react native

Display variable in text react native

If you are working with React Native, it is common to need to display variables in text. This can be done easily by using the {"{"}variableName{"}"} syntax within a Text component.

For example, let's say you have a variable called "username" that you want to display in a Text component:

const username = "Raju";

<Text>Hello, {"{"}username{"}"}!</Text>

This will render as:

Hello, Raju!

Using props to pass variables

Another way to display a variable in React Native is by passing it as a prop to a component. This can be useful if you need to display the same variable in multiple places or if the variable is coming from a parent component.

Here is an example:

function Greeting(props) {
  return (
    <Text>Hello, {"{"}props.name{"}"}!</Text>
  );
}

const App = () => {
  const username = "Raju";
  return (
    <Greeting name={username} />
  );
}

This will render the same output as before:

Hello, Raju!

Conclusion

These are just a few ways to display variables in React Native. Whether you use the {"{"}variableName{"}"} syntax or pass the variable as a prop, the end result is the same: the variable will be displayed in the text.

Remember to use the Text component to display text, and use the {"{"}variableName{"}"} syntax or props to display variables within that text. Also, don't forget to use the highlight.js library for syntax highlighting in your code examples!