How To Write a Different Language In React Native Button

Issue

I have button that should display the Turkish sentence İsminizi Giriniz but in android buttons are capitalized in English so the button says İSMINIZI GIRINIZ which should be İSMİNİZİ GİRİNİZ instead

// renders İSMINIZI GIRINIZ, should be İSMİNİZİ GİRİNİZ instead
<Button title='İsminizi Giriniz'/>

it actually works when i gave the "İSMİNİZİ GİRİNİZ" string as the title prop but ios -unlike android- renders the title as is and none of my other buttons are capitalized which would look inconsistent so I'm looking for something that would tell react native that this button is Turkish and it should do the capitalization accordingly

Solution

Here's a quick example using the toLocaleUpperCase method in JavaScript to capitalize the Turkish string correctly:

import React from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';

const capitalizeTurkish = (str) => {
  return str.replace(/i/g, 'İ').toLocaleUpperCase('tr-TR');
};

const App = () => {
  const turkishText = 'İsminizi Giriniz';
  const capitalizedText = capitalizeTurkish(turkishText);

  return (
    <View style={styles.container}>
      <Button title={capitalizedText} onPress={() => console.log('Button pressed')} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

In this example, the capitalizeTurkish function replaces all occurrences of the lowercase 'i' with 'İ' and then uses toLocaleUpperCase('tr-TR') to correctly capitalize the Turkish string.

Answered By - Lesig