I want to format arabic text in the given image form but i'm unable to do it

here is my code snippet.I'm loading the data from backend.

 return (
    <View style={[Layout.center]}>
      <Text
        style={[
          Common.fontFamilyOthmani,
          Layout.center,
          Fonts.textRegular,`enter code here`
          { color: Colors.blackTextColor },
        ]}
      >
        {props.data.verse_arabic}
      </Text>
      <Text
        style={[
          Common.fontFamilyOthmani,
          Layout.center,
          Fonts.textSmall,
          Gutters.tinyHMargin,
          { color: Colors.blackTextColor },
        ]}
      >
        {'〘' + props.data.verse_number + '〙'}
      </Text>
    </View>
  )

I want my view to look like this.

But my view is this.