背景

react-i18nextはi18nextを元にReact/ReactNativeで使用できるようにしたライブラリのようですね。サービスを多言語対応にできます。
今回、ReactNativeのアプリケーションでreact-i18nextを使用して一部分だけ文字色を変更・リンクに飛ばす実装がありました。
変数を埋め込む方法については公式で明記されていたのですが、その部分だけスタイルを変える実装は見当たりませんでした。
確かに下のようにリンクに飛ばす箇所や色を変更する箇所だけ分割して<Text></Text>でその都度ネストすれば良い話なのですが、、

<View style={tw`flex-row flex-wrap`}>
    <Text>{t`hogehoge.service`}</Text>
    <Pressable>
        <Link style={tw`text-red`}>利用規約</Link>
    </Pressable>
    <Text>及び</Text>
    <Pressable>
        <Link style={tw`text-red`}>プライバシーポリシー</Link>
    </Pressable>
    <Text>をご確認ください。</Text>
</View>

...
hogehoge: {
...
    service: '当サービスの',
    termsOfUse: '利用規約',
    or: '及び',
    privacyPolicy: 'プライバシーポリシー',
    confirm: 'ご確認ください'
...
}

i18nextは翻訳のために使用されるライブラリであり、これだと翻訳が難しい場面もあるのでは？と思い(英語とか主述の順番逆だし、ないと思うけどこの区切り型だと通用しない自然言語があるかもだし...)なんとか一文で解決できないかなと思いました。

結論

Trans(公式はこちら)を使うことにしました。componentsのpropsで使用するコンポーネントをカスタマイズすることができるので、これを利用してTextやView、Pressableにスタイルを当てていきます。

          <Trans
            i18nKey="hogehoge.confirmMessage"
            components={{
              TermsOfUsePressable: (
                <Pressable
                  accessibilityRole="link"
                  style={tw`flex items-center`}
                  onPress={() => Linking.openURL('https://...')}
                />
              ),
              PrivacyPolicyPressable: (
                <Pressable
                  accessibilityRole="link"
                  onPress={() => Linking.openURL('https://...')}
                />
              ),
              LinkText: <Text style={tw`text-red font-bold text-xs`} />,
              Text: <Text style={tw`text-xs`} />,
              View: <View style={tw`flex-row flex-wrap`} />,
            }}
          />

...
hogehoge: {
...
    confirmMessage:
              '<View><Text>当サービスの</Text><TermsOfUsePressable><LinkText>利用規約</LinkText></TermsOfUsePressable><Text>及び</Text><PrivacyPolicyPressable><LinkText>プライバシーポリシー</LinkText></PrivacyPolicyPressable><Text>をご確認ください。</Text></View>'
...
}

かなり長くなってしまいましたが、こちらで一旦意図した実装はできそうでした。もしベストプラティクスがあれば教えていただけると幸いです！

それでは！