npm install react-xml-parser -> xml parser kütüphanesini kullandım

import React, {Component} from 'react';
import {FlatList, StyleSheet, Text, View,Alert} from 'react-native';
export default class App extends Component {  
  constructor(props)
  {
      super(props);
    this.state={
      data:'',
    };
  }
  componentDidMount()
  {
    let request = new XMLHttpRequest();
    request.onreadystatechange = (e) => {
      if (request.readyState !== 4) {
        return;
      }
    
      if (request.status === 200) {//http OK mesajı
        
        let XMLParser = require('react-xml-parser');
        let xml = new XMLParser().parseFromString(request.responseText);// text'i xml,json tarzına çeviriyor
            this.setState({data:xml.getElementsByTagName('Currency')});//currency taglarını çekiyorum
       
      } else {
        Alert.alert('Uyarı','İnternet Bağlantınızı Kontrol ediniz.');
      }
    };
    
    request.open('GET', 'https://www.tcmb.gov.tr/kurlar/today.xml',true);
    request.send();
     
}
render_item({item})
{
  return(
    <View style={styles.column_view_style} >
    <View style={{flex:1}}>
    <Text style={styles.row_text_style}>{item.attributes.Kod}</Text>
    </View>
    <View style={{flex:1}}>
    <Text style={styles.row_text_style}>{item.children[1].value}</Text>
    </View>
    <View style={{flex:1}}>
    <Text style={styles.row_text_style}>{item.children[3].value}</Text>
    </View>
    <View style={{flex:1}}>
    <Text style={styles.row_text_style}>{item.children[4].value}</Text>
    </View>
    </View>
    
  );
}
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.column_view_style}>
        <View style={{flex:1}}>
        <Text style={styles.column_text_style}>{'Kod'}</Text>
        </View>
        <View style={{flex:1}}>
        <Text style={styles.column_text_style}>{'İsim'}</Text>
        </View>
        <View style={{flex:1}}>
        <Text style={styles.column_text_style}>{'Alış'}</Text>
        </View>
        <View style={{flex:1}}>
        <Text style={styles.column_text_style}>{'Satış'}</Text>
        </View>
        </View>
        <View style={{flex:9}}>
        <FlatList 
         data={this.state.data}
         extraData={this.state}
         renderItem={this.render_item}
         keyExtractor={(item)=>item.attributes.Kod}></FlatList>
         </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:'column',
  },
  column_view_style:{
   flex:1,
   flexDirection:'row',
    
  },
  column_text_style:{
  textAlign:'center',
  textAlignVertical:'center',
   color:'black',
   width:'100%',
   height:'100%',
   fontSize:20
  },
  row_text_style:{
    textAlign:'center',
    textAlignVertical:'center',
     color:'black',
     width:'100%',
     height:'100%',
    }
});

JavaScript asekron programlama olduğu için Promise yapısını kullandım Tamamını indir

import SQLite from 'react-native-sqlite-storage';

 class Database{

constructor()
{
   
    this.createtable();    
}
createtable()
{

    return new Promise((resolve,reject)=>{
        this.baglan();
        this.baglanti.transaction((tx) => {
            tx.executeSql("select name FROM sqlite_master WHERE type=? AND name=?", ['table','kisiler'],(tx,results)=>{
            
          if(results.rows.item(0)===undefined)
           {     
              tx.executeSql('CREATE TABLE  kisiler(id INTEGER PRIMARY KEY autoincrement NOT NULL, ad text not null,yas integer not null)', []);   
           }
    });    
        });
        this.kapat();
    });
}
success()
{

}
error(err)
{

}
baglan()
{
this.baglanti=SQLite.openDatabase({name: 'kisi.db', location: 'default'},this.success,this.error);       
}
kapat()
{
    return new Promise((resolve,reject)=>{
        this.baglanti=null;
       });    
}
insert(values)
{
   return new Promise((resolve,reject)=>{
    this.baglan();
    this.baglanti.transaction((tx) => {
        tx.executeSql('insert into kisiler (ad,yas) VALUES (?,?)',values);   
      });
   this.kapat();

   });    
}
update(values)
{

    this.baglan();
        this.baglanti.transaction((tx) => {
            tx.executeSql('update kisiler set ad=?,yas=? where id=?',values);
            
          });
       this.kapat(); 

}
delete(values)
{
 return new Promise((resolve,reject)=> 
 {
     this.baglan();
    this.baglanti.transaction((tx) => {
        tx.executeSql('delete from kisiler where id=?',values);
      });
   this.kapat(); 
});

}
get_data()
{
    return new Promise((resolve)=>{

        this.baglan();
        this.baglanti.transaction((tx) => {
            tx.executeSql('select * from kisiler', [], (tx, results) => {
                         
              let array=[];
              for(let i=0;i<results.rows.length;i++)
              {
                array[i]={ad:results.rows.item(i).ad,yas:results.rows.item(i).yas,id:results.rows.item(i).id}
              }
              this.kapat();
            resolve(array);//gönderdiğimizde then ile yakalıyoruz                            
          });
        });
      
    });
}

}
export default Database;

Props:Componentler arasında haberleşme yada parametre aktarımı(style,title,value….)

App.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,ScrollView,Dimensions} from 'react-native';
import CardView from './src/Components/CardView';


export default class App extends Component {

  constructor(props)
  {
    super(props);
    this.state={

      width:Dimensions.get('screen').width
    };

  }
///props iki component arasında parametre aktarımı 

  doldur()
  {
     let card_array=[];
     for(let i=0;i<20;i++)
     {
       card_array.push(
         <View 
        style={{height:100,width:this.state.width,marginTop:1}} key={i.toString()}>
       <CardView 
       View_style={{height:100,width:this.state.width,flexDirection:'row',alignSelf:"flex-start"}}
       Image_style={{height:100,width:100}} 
       Text_style={{height:100,width:this.state.width-100,textAlignVertical:'center',marginLeft:1}}
       source={require('./src/Resource/Icon/react-icon.png')}
       Text='dasddsadsadasdasdsadasdasdsadsasdasdasdsadsadsaadad' 
       ></CardView>
       </View>);
     }
return card_array;
  }

  render() {
    return (
      <View style={styles.container} onLayout={()=>{this.setState({width:Dimensions.get('screen').width})}}>
      <ScrollView style={{flex:1,flexDirection:'column'}}>
       {this.doldur()}
      </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    flexDirection:'column',
    justifyContent: 'flex-start',
    backgroundColor: '#F5FCFF',
  },
 
});

 

CardView.js

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

export default class CardView extends Component{

constructor(props)
{
    super(props);
}


render(){

    //Bu komponentin alacağı paremetreler tanımlanıyor.
return(
<View style={this.props.View_style}>
<Image 
style={this.props.Image_style} 
source={this.props.source}>
</Image>
<Text 
numberOfLines={1} 
ellipsizeMode='tail' 
style={this.props.Text_style}>{this.props.Text}</Text>
</View>
);}
}

 

Navigation Kütüphanesi yüklenmesi:
1-npm install –save react-navigation
2-yarn add react-native-gesture-handler
-yada npm kullanıyorsanız
– npm install –save react-native-gesture-handler
3-react-native link react-native-gesture-handler

App.js

import React from 'react';
import {createStackNavigator,createAppContainer} from 'react-navigation';
import Home from './src/Pages/Home';
import Login from './src/Pages/Login'; 

const navigator=createStackNavigator({//Router diyebiliriz ilk olarak login sayfasını açacaktır
  
  login:{screen:Login},
  home:{screen:Home}
});

export default createAppContainer(navigator);

 

Login.js

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

export default class Login extends Component{
  constructor(props)
  {
    super(props);
    
   this.giris_click=this.giris_click.bind(this);
     this.state={//runtime'de değiskenleri ve değerleri saklayan yapıdır.
         sayac:0
     }
  }
  static navigationOptions={
    title:'NavigateKullanım'
  };
giris_click()
{
  this.props.navigation.navigate('home');//butona basıldığında diğer sayfa gidiyor.
   
}
  render() {
    return (
      <View style={styles.ana_view}>
          <TextInput style={styles.text_input} placeholder='Kullanıcı Adınız'></TextInput>
          <TextInput style={styles.text_input} placeholder='Şifre'></TextInput>
          <Button title="Giriş" style={styles.text_input}  onPress={this.giris_click}></Button>
          <Text>{this.state.sayac}</Text>
          </View>
    );
  }
}

const styles = StyleSheet.create({
  ana_view:{
    flex:1,
    flexDirection:'column',
   justifyContent:'center'
  },
text_input:{
 marginRight:10,
 marginLeft:10 
}
});

 

Home.js

import React,{Component} from 'react';
import {StyleSheet,View,Button,FlatList,TextInput,Text,TouchableOpacity} from 'react-native';

class Home extends Component{ 
constructor(props)
{
    super(props);
    this.ekle_click=this.ekle_click.bind(this);
    this.state={
        liste:[],
        text_value:'',
        sayac:0,
    }

}
static navigationOptions={
    title:'NavigateKullanım'//başlık texti
  };
ekle_click()
{
    if(this.state.text_value!='')
    {
        let liste=this.state.liste;
        liste.push({key:this.state.sayac,value:this.state.text_value});
        this.setState({liste:liste,text_value:'',sayac:(this.state.sayac+1)});
    }
}
    render()
    {
        return(
            <View style={style.view_style}>
            <View style={style.list_view_style}>
            <FlatList style={style.flat_style}
             extraData={this.state}
            data={this.state.liste}
            keyExtractor={(item)=>item.key.toString()} 
            renderItem={({item}) => <Text style={style.flatlist_text_style}>{item.value}</Text>}
           />
            </View>
            <View style={style.input_buton_view_style}>
            <TextInput  style={style.input_style} value={this.state.text_value}  onChangeText={(value)=>this.setState({text_value:value})}></TextInput>

            <TouchableOpacity style={style.button_style}  onPress={this.ekle_click} >
           <Text style={style.button_text_style}>Ekle</Text>
            </TouchableOpacity>
            </View>
            </View>
        );
    }
}
const style=StyleSheet.create({

    view_style:{
        flex:1,
        flexDirection:'column',
       
    },
    list_view_style:{
        flex:5
    },
    input_buton_view_style:{
         flex:1,
         flexDirection:'column',
         position:'absolute',
         bottom:1,
         left:2,
         right:2
        
        },

    input_style:{
        borderWidth:1,
        fontSize:20,
        borderRadius:10,
        height:35,
       
   }
    ,
    flat_style:{
        flex:5
    },
      button_style:{
         height:35,
          marginTop:10,
          justifyContent:'center',
          alignItems:'center',
          borderRadius:10, 
          backgroundColor:'yellow',
          fontFamily:'bold'
          
        },
      button_text_style:{
        fontSize:20,
        fontFamily:'bold',
        height:35,
        textAlignVertical: "center",
        textAlign: "center",
        fontWeight: '400'
      },
      flatlist_text_style:{

        height:40,
        fontSize:20,
      }
});
export default Home;

 

import React, {Component} from 'react';
import {TextInput, StyleSheet, Text, View,TouchableOpacity} from 'react-native';

export default class App extends Component {
 
 constructor(props)
 {
   super(props)//Component clasının yapılandırıcısını çağrıyoruz.

   this.state={//runtime'de değiskenleri ve içindeki verileri saklıyor
    
     text_input_value:'',
     sayac:0,
     text_value:'',
   };
 this.normal_btn_click=this.normal_btn_click.bind(this);
 this.btn_text_degistir=this.btn_text_degistir.bind(this); 
}

btn_text_degistir()
{
  this.setState({text_value:this.state.text_input_value,text_input_value:''});
}
 normal_btn_click()
 {

  this.setState({sayac:++this.state.sayac});
 }

  render() {
    return (
      <View style={styles.main_view_style}>
        <View style={styles.view_1_style}>
        <Text style={styles.label_style} >{this.state.text_value}</Text>
        <TextInput placeholder='bir seyler giriniz..' 
        value={this.state.text_input_value}
        style={styles.textinput_style} 
        onChangeText={(value)=>{
         //isimsiz fonksiyon 
         this.setState({text_input_value:value});
         //state içinde ki değiskenleri this.setState fonksiyonu ile güncelliyoruz.
          }}>
        </TextInput>
        <TouchableOpacity style={styles.btn_goster_style} onPress={this.btn_text_degistir}>
        <Text style={styles.btn_goster_text_style}>Text'de Göster</Text>
        </TouchableOpacity>  
        
        </View>
   <View style={styles.view_2_style}>
   <TouchableOpacity style={styles.btn_normal_sayac_style} onPress={this.normal_btn_click}>
   <Text style={styles.btn_normal_sayac_text_style}>Normal Buton Arttır</Text>
   </TouchableOpacity>

   <TouchableOpacity style={styles.btn_arrow_sayac_style} onPress={()=>this.setState({sayac:++this.state.sayac})}>
   <Text style={styles.btn_arrow_sayac_text_style}>Arrow Buton Arttır</Text>
   </TouchableOpacity>
   <Text style={styles.label_style}>{this.state.sayac}</Text>
   </View>
   
      
      </View>
    );
  }
}

const styles = StyleSheet.create({
  main_view_style: {
    flex: 1,//ekranı kapla
    flexDirection:'column',//nesneler yukardan aşağı dizilecektir
       backgroundColor: 'white',
  },
  view_1_style:{
    flex:1,
    alignItems:'center'//yatayda ortala

  },
  view_2_style:{
    flex:1,
    flexDirection:'column',
    alignItems:'center'
  },
  btn_goster_style:{
    height:35,
    width:'99%',
    marginLeft:1,
    marginRight:1,
    backgroundColor:'red',
    borderRadius:10,
    marginTop:1,
  },btn_goster_text_style:{
    height:'100%',
    textAlign:'center',
    textAlignVertical:'center',
    color:'white', 
    
  },
  textinput_style:{
    height:35,
    width:'99%',
    marginLeft:1,
    marginRight:1,
    borderRadius:10,
    borderWidth:1,
    borderColor:'#e5e5e5',
    marginTop:1,
  },
  label_style:{
    height:35,
    width:'99%',
    marginLeft:1,
    marginRight:1,
    borderRadius:10,
    borderWidth:1,
    borderColor:'#e5e5e5',
    marginTop:1,
    textAlignVertical:'center',
    paddingLeft:2,
    color:'black'
  },
  btn_normal_sayac_style:{
    height:35,
    width:'99%',
    marginLeft:1,
    marginRight:1,
    backgroundColor:'#ffa959',
    borderRadius:10,
    marginTop:1,
  },
  btn_normal_sayac_text_style:{
    height:'100%',
    textAlign:'center',
    textAlignVertical:'center',
    color:'white',
  },btn_arrow_sayac_style:{
    height:35,
    width:'99%',
    marginLeft:1,
    marginRight:1,
    backgroundColor:'#75baff',
    borderRadius:10,
    marginTop:1,
  },
  btn_arrow_sayac_text_style:{
    height:'100%',
    textAlign:'center',
    textAlignVertical:'center',
    color:'white',
  },
});