Как разобрать строку в реагирующий нативный компонент?

Question

Я хочу разобрать строку, содержащую jsx в react-native Компонент

Пример:

const str1 = "Hi I am default text <Text style={{fontWeight: 'bold'}}>I am bold text</Text>";

Теперь я хочу отрендерить ее, как показано ниже:

const App = props => {

  return (
     <View>
       <Text> {str1} </Text>
     </View>
  );
}

Я должен отметить, что приведенный выше код работает, если я изменяю его на:

const str2 = <Text>Hi I am default text <Text style={{fontWeight: 'bold'}}>I am bold text</Text></Text>;

, но в соответствии с моим условием str1 может быть только строкой, потому что я беру его из TextInput Component.

Ожидание : str1 должно быть проанализировано, как показано ниже:

Привет Я текст по умолчанию Я жирный текст

Какова моя цель?

Я хочу создать пост в своем приложении, думаю, что текст поста:

Привет, друзья! Как дела, пожалуйста Как сообщение.

Как вы можете видеть Как выделено жирным шрифтом itali c, поэтому я хочу сделать что-то вроде этого .