Search code examples
javascriptandroidreact-nativestylesheet

Text gets cut Off when using Unicode Hindi Font


Text is cutting off when I write in Hindi (Unicode) whereas English works well.

Was working well with version 0.49.2

React Native Version : 0.59.8 React Native Environment Info:

  • System:
  • OS: Windows 10
  • CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
  • Memory: 916.05 MB / 3.78 GB
  • Binaries:
    • npm: 6.7.0 - C:\Program Files\nodejs\npm.CMD
  • IDEs:

    • Android Studio: Version 3.3.0.0 AI-182.5107.16.33.5264788

    • Phone:- Samsung On6, Samsung M30

Github issue link

https://github.com/facebook/react-native/issues/25155

render() {
        data=[
            {
                text:"ज. गु. श्री रामान्दाचार्य जी",
                style:{color:"#ff0000",textAlign:"center",fontSize:25}
            },
            {
                text:"Google LLC[5] is an American multinational technology company that specializes in Internet-related services and products, which include online advertising technologies, search engine, cloud computing, software, and hardware. It is considered one of the Big Four technology companies, alongside Amazon, Apple and Facebook.Google LLC[5] is an American multinational technology company that specializes in Internet-related services and products, which include online advertising technologies, search engine, cloud computing, software, and hardware. It is considered one of the Big Four technology companies, alongside Amazon, Apple and Facebook.",
                style:{color:"#0000ff",fontSize:25,margin:10,fontFamily: 'lucida grande',}
            },
            {
                text:"रामान्दाचार्य जी द्वारा बनाये गये लगभग तीस हजार शिष्यों में से निम्नलिखित बारह शिष्य प्रधान माने जाते हैं। इन प्रधान शिष्यों को महाभागवत कहा गया है। सांप्रदायिक मान्यतानुसार इन्हें विविध देवताओं तथा ऋषियों-मुनियों के अवतार माना गया है। श्री अनंतानंदाचार्य जी आपश्री के सर्वप्रथम शिष्य बने फिर श्री पीपा जी, श्री रविदास जी, श्री कबीरदास जी आदि ने आपश्री का शिष्यत्व प्राप्त किया। ये सभी शिष्य परमज्ञानी और सेवानिष्ठ भक्त थे और विद्या, शक्ति तथा मर्यादा का अनुसरण करते हुए श्रद्धापूर्वक सुयोग्य रूप से गुरु सेवा करते रहते थे। इन्हीं महाभागवतों के गुरु भाइयों, शिष्यों-प्रशिष्यों ने आपश्री का संदेश भारत के कोने-कोने तक पहुचाया।",
                style:{color:"#0000ff",fontSize:25,margin:10,fontFamily: 'sans-serif',}
            },
            {
                text:"रामान्दाचार्य जी द्वारा बनाये गये लगभग तीस हजार शिष्यों में से निम्नलिखित बारह शिष्य प्रधान माने जाते हैं। इन प्रधान शिष्यों को महाभागवत कहा गया है। सांप्रदायिक मान्यतानुसार इन्हें विविध देवताओं तथा ऋषियों-मुनियों के अवतार माना गया है। श्री अनंतानंदाचार्य जी आपश्री के सर्वप्रथम शिष्य बने फिर श्री पीपा जी, श्री रविदास जी, श्री कबीरदास जी आदि ने आपश्री का शिष्यत्व प्राप्त किया।",
                style:{color:"#0000ff",fontSize:25,margin:10,fontFamily: 'sans-serif',}
            }

        ]
        if (!this.state.loading)
            return (
                <View style={{ backgroundColor: Colors.background, flex: 1 }}>
                    <FlatList
                        data={data}
                        renderItem={({ item }) =>
                            <View style={{ flex: 1 }}>
                                <Text style={item.style}>{item.text}</Text>
                            </View>
                        }
                        keyExtractor={item => item.text}
                    />
                </View>
            );
        else {
            return (
                <Loading />
            )
        }
    }

Solution

  • The issue has been resolved in version 0.60.

    https://github.com/facebook/react-native/pull/25306

    The same issue has also been resolved for RTL Languages.

    https://github.com/facebook/react-native/issues/24837