React Native Markdown Kullanımı

Projelerimizde bazı durumlarda uzun ya da içinde birden fazla yazı stili bulunan metinler eklememiz gerekebilir. Eğer eklenecek bu metin statik bir yapıdaysa tek tek biçimlendirmeler yapılarak istediğimiz görüntüde bir sayfayı oluşturabiliriz. Fakat bu metnin servisten bize gelmesi ya da tek tek biçimlendirmemizin pek mümkün olmadığı durumlarda başka çözümler kullanmamız gerekmekte.

Örnek vermemiz gerekirse;

kampanya detaylarını içeren bir ekranınız bulunuyor ve içindeki tüm bilgileri servisten alıyorsunuz. Bu ekranda kampanyanın kullanım koşullarında maddeler halinde uzunca bir yazı bulunuyor ve bazı maddelerin içinde bulunan linkler aracılığı ile bir sözleşme metnine yada websitesine kullanıcıyı yönlendirmeniz gerekiyor. Peki bunu nasıl yapabilirsiniz?

1. Belirli kurallarla metni mapleyerek link bulunan maddelere bir onPress özelliği ekleyebilirsiniz. Fakat metni maplemek için bir kural seti oluşturmak çok mümkün olmayabilir ya da gelen metinlerde belirli bir standart olmayabilir. Bu da kodun doğru çalışmasını uzun vadede etkileyebilir.
2. Metin bir PDF olarak eklenebilir, bu sayede ön yüzde herhangi bir tasarım değişikliği yapmanız gerekmez ve PDF içindeki linkleri açabilirsiniz. Tabi PDF doğru şekilde oluşturulduysa.
3. Bir diğer yöntem olarak metni HTML olarak alabilirsiniz. Servisten aldığınız HTML’i WebView olarak açarak ya da direkt render edebilmenizi sağlayan bir kütüphane yardımı ile ilgili sayfaya ekleyerek pratik bir şekilde istenilen görüntüyü oluşturabilirsiniz. Fakat burada büyük bir sorun bulunmakta. Yaptığınız projede kampanyaları ekleyen ekip HTML bilmiyor olabilir, HTML bilse de bu formatta düzenlemek ve kontrol etmek karışık ve zor olabilir.
4. Bir diğer ve bu yazıda anlatılacak olan yöntem ise Markdown kullanmak.

Peki Markdown Nedir?

Markdown, John Gruber tarafından oluşturulan, basit ve okunabilir bir işaretleme dilidir (markup language). HTML bilgisi gerektirmeden metin biçimlendirmesine olanak tanır.

Neden Markdown?

Çünkü sunduğu basit syntax ile herhangi bir editör kullanmadan dahi pratik bir şekilde metinlerinizi düzenleyip, bunları kullanıcılara hızlı bir biçimde gösterebilmenize olanak sağlıyor.

React Native ile Markdown Nasıl Kullanılır?

React Native projelerinizde Markdown kullanabilmek için projenize ekleyebileceğiniz birden fazla kütüphane bulunmakta. Fakat hem TypeScript desteği bulundurması hem detaylı bir dökümana sahip olması hem de aktif olarak yüksek bir kullanıma sahip olmasından dolayı, daha güncel kütüphaneler bulunsa da bu rehberde react-native-markdown-display kütüphanesini kullanacağız.

İlk olarak projemize kütüphaneyi eklemek ile başlayalım.

yarn add react-native-markdown-display

Kütüphane projeye eklendikten sonra kullanmak istediğiniz sayfaya import ederek hızlı bir biçimde kullanmaya başlayabilirsiniz.

Örnek:

import React from 'react';
import { SafeAreaView, ScrollView } from 'react-native';
import Markdown from 'react-native-markdown-display';

function App(): JSX.Element {
  const exampleMarkdown = `
 # Heading1 <h1>
 ## Heading 2 <h2>
 ### Heading 3 <h3>
 #### Heading 4 <h4>
 ##### Heading 5 <h5>
 ###### Heading 6 <h6>
    
   **Bold <strong>**
 *Italic <em>*
 ***Bold and Italic <em><strong>***

 >Block Quotes
 >>Nested Block Quotes

 1. Ordered List
   1. Ordered List
   2. Ordered List
 2. Ordered List
 2. Ordered List

 - Unordered List
     - Unordered List
    - Unordered List
 - Unordered List
 - Unordered List

 [Innovance](https://innovance.com.tr/) *Link with title*
 <https://innovance.com.tr/> *Direct Link*
 
 \`\`\`
   Code Area
 \`\`\`
  `;

  return (
    <SafeAreaView>
      <ScrollView contentInsetAdjustmentBehavior="automatic">
        <Markdown>{exampleMarkdown}</Markdown>
      </ScrollView>
    </SafeAreaView>
  );
}
export default App;

Markdown Display - 1 - Snack

Projemize bu şekilde Markdown formatında metin eklemiş olduk. Bundan sonra tek yapmamız gereken bu metinleri tasarımımıza göre özelleştirmek. Peki bunu nasıl yapabiliriz? Kullandığımız kütüphane bunu yapmak için bize iki yöntem sunmakta.

Yöntem 1: style Propunu Kullanarak Özelleştirme: Markdown komponentinin style propunu kullanarak Markdown ögelerinin stillerini özelleştirebilirsiniz.

Örnek:

<Markdown
  style={{
    heading1: {color: 'red'},
    link: {textDecorationLine: 'none', color: 'blue'},
    ordered_list: {color: 'purple', fontSize: 24},
    em: {textDecorationLine: 'underline', fontStyle: 'normal'},
  }}>
    {exampleMarkdown}
</Markdown>

Markdown Display - 2 - Snack

Yöntem 2: rules Propunu Kullanarak Özelleştirme: Markdown komponentinin rules propunu kullanarak kendi özel render kurallarımızı tanımlayarak Markdown öğelerinin görünümünü özelleştirebiliriz.

Örnek:

import React from  'react';
import  {
  ImageBackground,
  SafeAreaView,
  ScrollView,
  Text,
  View,
} from  'react-native';
import Markdown, {RenderRules} from 'react-native-markdown-display';

const Background = require('./assets/Color1.jpg');

const App = () =>  {
  const  exampleMarkdown:  any  =  `
    ### Heading 3 <h3>
    >Block Quotes
    Paragraph
  `;

const  renderRules:  RenderRules  = {
  heading3:  (node,  children)  =>  (
    <View  key={node.key}  style={{backgroundColor:  'purple'}}>
      <Text  style={{color:  'white',  fontStyle:  'italic',  fontWeight:  '900'}}>
        {children}
      </Text>
    </View>
  ),
  blockquote:  (node,  children,  _parent,  styles)  =>  (
    <View
      key={node.key}
      style={{
        ...styles._VIEW_SAFE_blockquote,
        borderColor:  '#5C9C5C',
        marginTop:  16,
        height:  162,
        width:  300,
    }}>
      <ImageBackground
        source={Background}
        resizeMode="contain"
        style={{width:  '100%',  height:  '100%'}}>
          <Text style={{color:  'white'}}>{children}</Text>
      </ImageBackground>
    </View>
  ),
  paragraph:  (node,  children)  =>  (
    <Text
      key={node.key}
      style={{
      textAlign:  node.type ===  'blockquote'  ?  'left'  :  'center',
      marginVertical:  16,
     }}>
       {children}
    </Text>
   ),
};

 return (
   <SafeAreaView>
     <ScrollView  contentInsetAdjustmentBehavior="automatic">
       <Markdown  rules={renderRules}>{exampleMarkdown}</Markdown>
     </ScrollView>
   </SafeAreaView>
  );
}
export  default App;

Markdown Display - 3 - Snack

Bu şekilde projenize Markdown formatında metinler ekleyebilir, tasarımlarını özelleştirebilirsiniz.

Yararlı Linkler:

1. React Native Markdown Display
2. Markdown Syntax
3. Online Markdown Editor