react-native-vector-icons – Hanzala Gün

React Native + Realm + Zustand ile basit kelime ezberleme uygulaması

Muhammed Hanzala Gün — Sun, 25 Jul 2021 14:10:20 +0000

Giriş

Merhabalar. İngilizce kelime eksiğim için geliştirdiğim basit bir uygulamayı paylaşmak ve Realm, Zustand kullanımı hakkında kısa bir örnek olması için bu post’u paylaşıyorum. Bu uygulamayı preply uygulamasında ders aldığım şu dönemlerde Fabian Afumbom A. isimli öğretmenimin dil öğrenirken kendi kullandığı ve bana da tavsiyesi üzerine yaptım. Neyse fazla uzatmadan konuya girelim.

Kullanılan Paketler

Paket Kurulumları (React-native v0.64.2)

Önce projemizi terminal açıp react-native ile oluşturuyoruz.

npx react-native init FabianEnglish

siz “FabianEnglish” kısmını istediğiniz bir proje ismi ile değiştirebilirsiniz.

Daha sonra proje dizinine ilerliyoruz

cd FabianEnglish

ve realm’i kuruyoruz

npm install realm

daha sonra podları yüklüyoruz

cd ios && pod install && cd ..

realm bu kadar.

Sıra geldi zustand’ı yüklemeye. Kök dizinde olduğunuzdan eminseniz aşağıdaki kodu tekrar terminale yapıştırın ve zustand kurulumunu tamamlayın.

npm install zustand

ya da yarn ile

yarn add zustand

sıra geldi react native vector icons kurmaya. Proje biraz daha güzel görünsün diye ikonlar her zaman lazım :). Hadi paketimizi ekleyelim.

npm install --save react-native-vector-icons

son olarak blur paketimizi ekleyelim

yarn add @react-native-community/blur

ya da

npm install --save @react-native-community/blur

ve son olarak ios için yeniden podları yükleyelim

cd ios && pod install && cd ..

paket kurulumu tamamlandı.

Projenin GitHub sayfası

https://github.com/HanzalaGun/FabianEnglish

Projeyi Kodlayalım

Öncelikle projeyi parçalara ayırmak için klasörlerimizi oluşturalım. Kök dizinde src adında bi klasör ve bu klasörün altında common, components, screen, state adında 4 adet klasör oluşturuyoruz. Daha sonra screen altında ListScreen.js adında bir dosya oluşturuyoruz.

bu dosyaya App.js içinde direkt gösterebiliriz. Aslında daha karmaşık yapılar için gerekli bir durum direkt App.js içine de ListScreen.js içine kodlayacaklarımızı kodlayabilirdik fakat ilerde projeyi geliştirmek istersek ve sayfalar artarsa karışıklık olmasın diye biz yine yapımızı hazır tutalım :). App.js şu şekilde gözükecek.

import React from 'react'
import ListScreen from './src/screens/ListScreen'

const App = () => {
  return (
      
  )
}
export default App

artık ListScreen.js e geçebiliriz.Öncelikle arkaplanda bir fotoğraf ve bu fotoğrafın önüne bulanıklık vermek istedim. Bunun için istediğimiz bir arkaplan fotoğrafını common clasörü içine bg.jpg ismiyle koyuyoruz. bu isim önemli değil sadece resmi çekerken aynı isimde olduğuna dikkat edin. resmi çekmek için

const bg= require('../common/bg.jpg')

ile ListScreen.js içerisine aktarıyoruz.İkonlarımızı çekelim

import Icon from 'react-native-vector-icons/FontAwesome';

ve bu ikonu kullanmak için

Icon.loadFont()

sayfa içerisine yukarıdaki kod parçasını yazarak ikonları yüklememiz gerekiyor. Bu sırada blur arkaplan için ufak bi komponent hazırlayalım. components içerisine MyBlur.js adında bir dosya oluşturup “@react-native-community/blur” eklentimizi burada kullanıyoruz. MyBlur.js dosyamız şu şekilde

import React from 'react'
import { StyleSheet } from 'react-native'
import { BlurView } from "@react-native-community/blur";

const MyBlur = () => {
    return (
        
    )
}

export default MyBlur

const styles = StyleSheet.create({
    absolute: {
        position: "absolute",
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
      }
})

ListScreen.js sayfamıza geri dönelim. Bu sayfada header kısmında sol tarafta FabianEnglish yazacak. Sağ tarafta ise iki adet buton olacak bu butonların birisi “Ask Me” diğer ise “Learn” olacak Ask Me ile bize kaydettiğimiz kelimesinin çevirisini yapacağımız bi modal olacak doğru ise kelimenin scoru yükselecek. altında bir skip butonu olacak ve bu butona basarsak score azalacak. Header’ın altında bi search input olacak ki kelimeleri arayabilelim. Daha sonra sağ altta absolute olarak konumlandırdığımız bir buton olacak bu butona bastığımızda kelime kaydedebileceğimiz bölüm görünür hale gelecek. Son olarak da body kısmında kelimelerimiz listelenecek. Unutmadan bir adet de kendimize ait bir TextInput oluşturalım. O halde öncelikle components klasörüne

Askme.js
Learn.js
SendComp.js(kelime kaydedeceğimiz komponent)
ListComp.js(kelimelerin listeleneceği komponent )
MyTextInput.js

sayfalarını oluşturuyoruz.

ListScreen’e geri dönmeden son olarak state yönetimimizi oluşturalım.

state klasörümüz içerisine state.js adında bir dosya oluşturdum. Evet asıl konulardan biri olan Zustand’ı kullanmaya başlayalım. Burada state ve aksiyonlarımızı oluşturuyoruz diyebiliriz. Ama redux’tan kullanımı çok daha kolay geldi bana :). Önce state.js içindeki kodları paylaşıp sonra açıklamaya çalışalım.

import create from 'zustand'

export const useStore = create(set => ({
  wordState:false,
  popupState:false,
  askmeState:false,
  learnState:false,
  selectedWordState:{},
  search:"",

  setWordState:(data)=>set((state)=>({...state,wordState:data})),
  setPopupState:(data)=>set((state)=>({...state,popupState:data})),
  setAskmeState:(data)=>set((state)=>({...state,askmeState:data})),
  setLearnState:(data)=>set((state)=>({...state,learnState:data})),
  setSelectedWordState:(data)=>set((state)=>({...state,selectedWordState:data})),
  setSearch:(data)=>set((state)=>({...state,search:data})),
  
}))

önce zustand içinden create fonksiyonunu çağırıp bu fonksiyonu useStore adında değişkene atayarak export edip create fonksiyonumuzu içine set parametresiyle array function oluşturuyoruz. ve içerisine değişken olarak wordState, learnState, search gibi değişkenlerimizi tanımlıyoruz. Ne olarak lazımsa o şekilde değer veriyoruz obje, string, int, boolean gibi gibi.. set ön ekiyle başlayan değişkenlerimiz ise aksiyonlarımız diyebiliriz yukarda tanımladığımız stateleri güncellemek için kullanacağız. Daha fazlası için zustand’ın dökümanlarına dalabilirsin :).

ama kısaca state okumak için

    const loading = useStore(state => state.wordState)

state güncellemek için ise

    const setLoading = useStore(state => state.setWordState)

şeklinde kullanıyoruz.

Evet artık ListScreen.js e dönüp burayı da şu hale getiriyoruz.

import React from 'react'
import { StyleSheet, Text, SafeAreaView, View, Pressable, ImageBackground } from 'react-native'
import Icon from 'react-native-vector-icons/FontAwesome';
import AskMe from '../components/AskMe';
import Learn from '../components/Learn';
import ListComp from '../components/ListComp'
import SendComp from '../components/SendComp'
import MyTextInput from '../components/MyTextInput'
import { useStore } from '../state/atom';
import MyBlur from '../components/MyBlur';

const bg= require('../common/bg.jpg')
Icon.loadFont()

  
const ListScreen = () => {
    const setAskVisible = useStore(state => state.setAskmeState)
    const setLearnVisible = useStore(state => state.setLearnState)
    const setSearch = useStore(state => state.setSearch)
    const search=(data)=>{
       setSearch(data)
    }
    return (
        
             
             
                    
                        
                            Fabian English |
                            setAskVisible(true)}>
                                
                                ask me
                            
                            setLearnVisible()}>
                                
                                learn
                            
                        
                    
            
            
            
            
                
                    search(data)} padding={20}/>
                
                

               
            
                    
           
        


    )
}

export default ListScreen

const styles = StyleSheet.create({
    container:{
        height:'100%',
        
    },
    head:{
        flexDirection:'row',
        justifyContent:'space-around',
        marginBottom:10,
        alignItems:'center',
        paddingVertical:10,
    },
    head1:{
        marginBottom:10,
        backgroundColor:'#ffffff50',
        shadowColor:'black',
        shadowOpacity:0.,
        shadowRadius:1,
        shadowOffset:{width: -1, height: 3},
    },
    
    title:{
        color:'white',
        fontSize:20,
        fontWeight:'700',
        textShadowColor:'black',
        textShadowRadius:3,
        textShadowOffset:{width: -1, height: 1},
    },
   
    headtext:{
        color:'white',
        fontSize:14,
        fontWeight:'600',
        textShadowColor:'black',
        textShadowRadius:6,
        textShadowOffset:{width: -1, height: 1},
        paddingLeft:3
    },
    pressable:{
        flexDirection:'row',
        alignItems:'center'
    },
    pressableicon:{
        shadowColor:'black',
        shadowOpacity:0.2,
        shadowRadius:1,
        shadowOffset:{width: -1, height: 3},
    },
})

useStore ile zustand a nasıl veri gönderebileceğimizi görmüşsündür, bu kadar kolay 🙂

Sırayla diğer komponentleri de paylaşalım.

//MyTextInput.js
import React from 'react'
import { StyleSheet, View, TextInput, Dimensions } from 'react-native'

const MyTextInput = ({onChange,placeholder,value,autoFocus=false,padding=70}) => {

    return (
        
            {onChange(a)}}>
            
        
    )
}

export default MyTextInput

const styles = StyleSheet.create({
    container:{
        backgroundColor:'#f2f2f270',
        padding:5,
        margin:3,
        alignSelf:'center',
        borderRadius:5,
    }
})

burada araya girip diğer önemli konu olan Realm e bakalım.

import Realm from 'realm'

kullanmak için yukardaki şekilde import etmemiz gerekiyor. Ve bir şema kullanmamız gerekiyor. Bu şemayı farklı yerlerde kullanacağımız için bunu da hemen ayrı bir dosyada kaydedelim ki hem daha temiz bir görünüm olsun hem de değişiklik yapması kolay olsun. common klasörümüze Shema.js dosyası oluşturalım.

export const WordShema = {
    name: 'Words',
    properties: {
        id:'int',
        name:  'string',
        description: 'string',
        pronunciation: 'string',
        translate: 'string',
        date: 'date',
        score: 'int'
    }
  };

bunda fazla anlatacak birşey yok ilk name şemamızın ismi properties içindekiler ise tabloda kaydettiklerimiz yani asıl verilerimiz.

id => benzersiz id miz
name => kelimemiz
description => kelimeye açıklama eklemek istersek diye var
pronunciation => kelimenin telaffuzu
translate => çevirisi
date => kelimenin üretilme tarihi için
score => kelimenin puanını tutmamız için

gelelim kullanım kısmına

import { WordShema } from '../common/Shema';

diyerek şemamızı da import ediyoruz

öncelikle realmi kullanırken open fonksiyonunu kullanarak hangi şemayı açacağımızı söylüyoruz ve açtıktan sonra ne yapacağımızı fonksiyon döndürerek söylüyoruz.

Realm.open({schema:[WordShema]}).then(realm=>{
   //her zaman işlemlerimizi burada yapıyoruz.
})

Örneğin tüm kelimeleri çekmek istersek

Realm.open({schema:[WordShema]}).then(realm=>{
   let obj = realm.objects('Words');
})

bu şekilde obj değişkenine tüm kelimeleri aktarmış olduk. ‘Words’ şemada verdiğimiz ilk name değişkeninden geliyor.

Veritabanına yazı yazdırmak istersek ise

 Realm.open({schema:[WordShema]}).then(realm=>{
                realm.write(()=>{
                    const myData=realm.create('Words',{
                        id:'benzersiz id',
                        name:'kelime',
                        description:'açıklama',
                        pronunciation:'telafuz',
                        translate:'çeviri',
                        date:new Date(),
                        score:0
                    })
                })
            })

şeklinde yapabiliriz.

ya da Realm’de güncelleme işlemi için

Realm.open({schema:[WordShema]}).then(realm=>{
                let obj = realm.objects('Words').filtered("id='"+data.id+"'")[0];
                realm.write(() => {
                obj.name='güncellenen kelime'
                })
            })

şeklinde kullanabiliriz. burada filtered fonksiyonu Words tablomuzun içinde filtreleme yapmamıza yarıyor.

Real kullanımını da temel olarak gördüğümüze göre kodlarımıza dönebiliriz. Komponentlere devam edelim ve hepsini artık arka arkaya paylaşsamda anlamayacağınız bir kısım kalmadı :). devamında bir açıklama yapmama gerek yok 🙂

//SendComp.js
import React, {useState, useEffect} from 'react'
import { StyleSheet, Text, View, TouchableOpacity, Dimensions, Alert, SafeAreaView } from 'react-native'
import MyTextInput from './MyTextInput'
import Realm from 'realm';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {  useStore } from '../state/state';
import { WordShema } from '../common/Shema';
const width=Dimensions.get('screen').width;

Icon.loadFont()
const SendComp = ({isSend=true}) => {
    const data = useStore(state => state.selectedWordState)
    const [name, setName] = useState('')
    const [description, setDescription] = useState('')
    const [pronunciation, setPronunciation] = useState('')
    const [translate, setTranslate] = useState('')
    const [opened, setOpened] = useState(isSend?false:true)
    const setLoading = useStore(state => state.setWordState)
    const setModalVisible = useStore(state => state.setPopupState)

    useEffect(() => {
        if(!isSend&&data){
            setName(data.name)
            setDescription(data.description)
            setPronunciation(data.pronunciation)
            setTranslate(data.translate)

        }
    }, [data])
    
    const sendData=()=>{
        if(name.length>0&&translate.length>0){
            Realm.open({schema:[WordShema]}).then(realm=>{
                realm.write(()=>{
                    const myData=realm.create('Words',{
                        id:parseInt(new Date().getTime()+''+Math.floor(Math.random()*10000)),
                        name:name,
                        description:description,
                        pronunciation:pronunciation,
                        translate:translate,
                        date:new Date(),
                        score:0
                    })
                })
            }).then(()=>{
                setLoading(true)
                setName('')
                setDescription('')
                setPronunciation('')
                setTranslate('')
                setModalVisible(false)
            })
        }else{
            Alert.alert('You must be fill Word and Translate')
        }
        
    }
    const updateData = ()=>{
        if(name.length>0&&translate.length>0){

            Realm.open({schema:[WordShema]}).then(realm=>{
                let obj = realm.objects('Words').filtered("id='"+data.id+"'")[0];
                realm.write(() => {
                obj.name=name
                obj.description=description
                obj.pronunciation=pronunciation
                obj.translate=translate
                })
            }).then(()=>{
                setLoading(true)
                setModalVisible(false)
            })
        }else{
            Alert.alert('You must be fill Word and Translate')
        }
    }
    return (
        
            {opened&&
               
                {setName(data)}}>
                {setTranslate(data)}}>
                {setPronunciation(data)}}>
                {setDescription(data)}}>
            }
            
                {opened?
                
                isSend?sendData():updateData()}>
                    
                
                {isSend&&setOpened(false)}>
                    
                }
                
                :
                

                setOpened(true)}>
                    
                
                
                }
            

        
    )
}

export default SendComp

const styles = StyleSheet.create({
    container:{
        flexDirection:'row',
        paddingHorizontal:10,
        
    },
    buttonplus:{
        backgroundColor:'#fff5',
        padding:10,
        borderRadius:50,
        borderWidth:1,
        borderColor:'white',
        shadowColor:'black',
        shadowOpacity:0.5,
        shadowRadius:1,
        shadowOffset:{width: -1, height: 3},
    },
    buttonminus:{
        position:'absolute',
        bottom:-10
    },
    buttonsend:{
        justifyContent:'center',
        flex:1,
    },
    plusicon:{
        shadowColor:'black',
        shadowOpacity:0.5,
        shadowRadius:1,
        shadowOffset:{width: -1, height: 3},
    },
    inputs:{
        backgroundColor:'#111',
        borderRadius:5
    }
})

//Askme.js
import React, { useEffect, useState } from 'react'
import { StyleSheet, Dimensions, View,Modal, TouchableOpacity, Text } from 'react-native'
import Realm from 'realm'
import { useStore } from '../state/atom';
import { WordShema } from '../common/Shema';
import MyTextInput from './MyTextInput';
import MyBlur from './MyBlur';
const AskMe = () => {
    const visible = useStore(state => state.askmeState)
    const setVisible = useStore(state => state.setAskmeState)
    const [data, setData] = useState([])
    const [word, setWord] = useState('')
    const [index, setIndex] = useState(0)
    useEffect(() => {
        Realm.open({schema:[WordShema]}).then(realm=>{
            setData(realm.objects('Words').sorted('score',true))
        })
    }, [])
    useEffect(() => {
        if(data.length>0&&word.toLowerCase()==data[index].translate.toLowerCase()){
            //realmda kelimenin scorunu yükselt
            Realm.open({schema:[WordShema]}).then(realm=>{
                let obj = realm.objects('Words').filtered("id='"+data[index].id+"'")[0];
                realm.write(() => {
                    obj.score++
                })
            }).then(()=>{
                setIndex(data.length!=index+1?index+1:0)
                setWord('')
            })
        }
    }, [word])
    const skip =()=>{
        //realmda kelimenin scorunu düşür
        if(data.length>0){
            Realm.open({schema:[WordShema]}).then(realm=>{
                let obj = realm.objects('Words').filtered("id='"+data[index].id+"'")[0];
                realm.write(() => {
                    obj.score--
                })
                console.log(obj)
            }).then(()=>{
                setIndex(data.length!=index+1?index+1:0)
                setWord('')
            })
        }
    }
    return (
        
            
            setVisible(false)}>
                {data.length>0&&data[index].name}
                {data.length>0&&'( '+data[index].pronunciation+' )'}
                {data.length>0&&data[index].description}
                {setWord(data)}}
                >
                skip()}>
                    {'skip >>'}
                
                
                if you skip this word, the word's score to less
                if you learned this word, you must delete this word
                
            
        
    )
}

export default AskMe

const styles = StyleSheet.create({
    view:{
        width:'100%',
        height:'100%',
        alignItems:'center',
        justifyContent:'center',
        alignSelf:'center',
        borderRadius:10
    },
    skiptext:{
        color:'white',
        fontWeight:'900'
    },
      skip:{
          padding:10,
          marginTop:20,
          backgroundColor:'#f005',
          alignItems:'flex-end',
          width:Dimensions.get('screen').width-70,
          borderRadius:5
      },
      title:{
        color:'white',
        fontSize:25,
        fontWeight:'900',
        textShadowColor:'#f00',
        textShadowRadius:5,
        textShadowOffset:{width: 0, height: 0},
        marginBottom:20
    },
    bottom:{
        color:'white',
        fontSize:12
    },
    text:{
        color:'white'
    }
})

//Learn.js
import React, { useEffect, useState } from 'react'
import { StyleSheet, Dimensions, View,Modal, TouchableOpacity, Text } from 'react-native'
import Realm from 'realm'
import { useStore } from '../state/atom';
import { WordShema } from '../common/Shema';
import MyBlur from './MyBlur';
const Learn = () => {
    const visible = useStore(state => state.learnState)
    const setVisible = useStore(state => state.setLearnState)
    const [data, setData] = useState([])
    const [index, setIndex] = useState(0)
    useEffect(() => {
        Realm.open({schema:[WordShema]}).then(realm=>{
            setData(realm.objects('Words').sorted('score',true))
        })
    }, [])
    
    const skip =()=>{
            setIndex(data.length!=index+1?index+1:0)
    }
    return (
        
            
            setVisible(false)}>
                {data.length>0&&data[index].name}
                {data.length>0&&'( '+data[index].pronunciation+' )'}
                {data.length>0&&data[index].translate}
                {data.length>0&&data[index].description}
               
                skip()}>
                    {'next >>'}
                
                
                
            
        
    )
}

export default Learn

const styles = StyleSheet.create({
    view:{
        width:'100%',
        height:'100%',
        alignItems:'center',
        justifyContent:'center',
        alignSelf:'center',
        borderRadius:10
    },
    skiptext:{
        color:'white',
        fontWeight:'900'
    },
      skip:{
          padding:10,
          marginTop:20,
          backgroundColor:'#f005',
          alignItems:'center',
          width:Dimensions.get('screen').width-70,
          borderRadius:5
      },
      title:{
        color:'white',
        fontSize:25,
        fontWeight:'900',
        textShadowColor:'#f00',
        textShadowRadius:5,
        textShadowOffset:{width: 0, height: 0},
        marginBottom:20
    },
    text:{
        color:'white'
    }
})

//ListComp.js
import React, {useState, useEffect} from 'react'
import { View, Dimensions, ScrollView } from 'react-native'
import Realm from 'realm';
import MyRow from './MyRow';
import { useStore } from '../state/state';
import { WordShema } from '../common/Shema';

const height=Dimensions.get('screen').height;
const ListComp = () => {
    
    const [data, setData] = useState([])

    const loading = useStore(state => state.wordState)
    const search = useStore(state => state.search)
    const setLoading = useStore(state => state.setWordState)
    const setModalVisible = useStore(state => state.setPopupState)

    useEffect(() => {
        Realm.open({schema:[WordShema]}).then(realm=>{
            setData(realm.objects('Words').sorted('date',true))
        }).then(()=>{setLoading(false)
            setModalVisible(false)})
    }, [loading])
    useEffect(() => {
        Realm.open({schema:[WordShema]}).then(realm=>{
            setData(realm.objects('Words').sorted('date',true))
        }).then(()=>{
            setModalVisible(false)
        })
    }, [])
    useEffect(() => {
        Realm.open({schema:[WordShema]}).then(realm=>{
            setData(realm.objects('Words').filtered(
                'translate CONTAINS[c] "'+search+'" OR name CONTAINS[c] "'+search+'"'
            ))
        }).then(()=>{setLoading(false)
            })
    }, [search])
    return (
        
            
        
           
            
                {data.length>0&&
                
                data.map((data,ind)=>{
                    return(
                        
                    )
                })
            }

            
            
        
    )
}

export default ListComp

Bu komponentler içerisinde kullandığımız diğer komponentleri de burada paylaşabilirim.

//MyModal.js
import React from 'react'
import { StyleSheet, Modal, TouchableOpacity } from 'react-native'
import { useStore } from '../state/atom';
import SendComp from './SendComp';
import MyBlur from './MyBlur';
const MyModal = () => {

    const visible = useStore(state => state.popupState)
    const setVisible = useStore(state => state.setPopupState)
    const setSelectedData = useStore(state => state.setSelectedWordState)

    return (
        
            
            {
                setVisible(false)
                setSelectedData({})}}>
                
            
        
    )
}

export default MyModal

const styles = StyleSheet.create({
    view:{
        width:'100%',
        height:'100%',
        alignItems:'center',
        justifyContent:'center',
        alignSelf:'center',
        borderRadius:10
    }
})

//MyRow.js
import React, {useEffect} from 'react'
import { Dimensions, StyleSheet, Text, View, TouchableOpacity } from 'react-native'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { WordShema } from '../common/Shema';
import {  useStore } from '../state/atom';
import MyModal from './MyModal';

const width=Dimensions.get('screen').width;
const padding=20

Icon.loadFont()
const MyRow = ({data,ind}) => {
    const setModalVisible = useStore(state => state.setPopupState)

    const setLoading = useStore(state => state.setWordState)

    const selectedData = useStore(state => state.selectedWordState)
    const setSelectedData =useStore(state => state.setSelectedWordState)

    const deleter = ()=>{
        Realm.open({schema:[WordShema]}).then(realm=>{
            realm.write(() => {
            let obj = realm.objects('Words').filtered("id='"+data.id+"'");
            realm.delete(obj)
            setLoading(true)

        })
        })
    }

    useEffect(() => {
        if(selectedData.name!=undefined){
            setModalVisible(true)
        }
    }, [selectedData])
    return (
        setSelectedData(data)} >
            
            
                
                    
                        {data.name}({data.pronunciation})
                    
                    
                        {data.translate}
                    
                
                
                    {data.description}
                
            
            deleter()} style={styles.icon}>
                
            
        
    )
}

export default MyRow

const styles = StyleSheet.create({
    container:{
        
        padding:padding/2,
        width:width-padding,
        alignSelf:'center',
        margin:4,
        borderRadius:5,
        backgroundColor:'#ffffff60',
        flexDirection:'row',
        shadowColor:'black',
        shadowOpacity:0.2,
        shadowRadius:1,
        shadowOffset:{width: -1, height: 3},
    },
    info:{
        flex:1,
        justifyContent:'space-between'
    },
    data:{
        flexDirection:'row',
        justifyContent:'space-between'
        
    },
    text:{
        textAlign:'center',
        padding:2,
        color:'white',
        fontSize:20,
        fontWeight:'900',
        textShadowColor:'black',
        textShadowRadius:5,
        textShadowOffset:{width: 0, height: 0},
    },
    icon:{
        alignItems:'center',
        justifyContent:'center'
    },
    description:{
        color:'white',
        fontSize:14,
        fontWeight:'900',
        textShadowColor:'black',
        textShadowRadius:5,
        textShadowOffset:{width: 0, height: 0},
    }
})

evet artık

npx react-native run-ios

ya da

npx react-native run-android

diyerek uygulamamızı ayağa kaldırabiliriz. Tebrik ederim 🙂

İlk blog yazım olduğu için hatalarım olduysa affola 🙂

React native ile mobil uygulama geliştirme üzerine daha fazla bu tip uygulama geliştirme yazıları eklemeye devam edeceğim takipte kalın 🙂 Sağlıkla kalın..

Simple word memorization app with React Native + Realm + Zustand

Muhammed Hanzala Gün — Sun, 25 Jul 2021 14:09:17 +0000

Introduction

Hello. I am sharing this post to share a simple application that I developed for my lack of English words and to give a short example about the use of Realm, Zustand. I made this application on “Preply” of my teacher Fabian Afumbom A., which he used while learning a language, during the periods when I was taking lessons in the Preply application. Well, without further ado, let’s get to the point.

Packages Used

Package Installations (React native v0.64.2)

First, we open our project in terminal and create it with react native.

npx react-native init FabianEnglish

you can replace “FabianEnglish” with a project name of your choice.

Then we proceed to the project directory

cd FabianEnglish

and we install realm

npm install realm

then we install the pods

cd ios && pod install && cd ..

that’s it for realm.

It’s time to install zustand. If you are sure that you are in the root directory, paste the code below into the terminal again and complete the zustand installation.

npm install zustand

or with yarn

yarn add zustand

it’s time to install react native vector icons. Icons are always needed so that the project looks a little better :). Let’s add our package.

npm install --save react-native-vector-icons

Finally, let’s add our blur package

yarn add @react-native-community/blur

npm install --save @react-native-community/blur

and finally, let’s install the pods for ios

cd ios && pod install && cd ..

paket kurulumu tamamlandı.

This Project’s GitHub page

https://github.com/HanzalaGun/FabianEnglish

Let’s Code the Project

First, let’s create our folders to split the project into parts. We create a folder named src in the root directory and 4 folders named common, components, screen, state under this folder. Then we create a file named ListScreen.js in the screen.

we can write this file’s code directly in App.js. Awe can show this file directly in App.js. Actually, for more complex structures, we could code what we would code directly into App.js , but if we want to grow the project in the future and the pages increase, let’s keep our structure ready so that there is no confusion :). App.js will look like this.

import React from 'react'
import ListScreen from './src/screens/ListScreen'

const App = () => {
  return (
      
  )
}
export default App

artık ListScreen.js eNow we can move on to ListScreen.js. First of all, I wanted to give a background photo and a blur in front of this photo. For this, we put a background photo we want in the common folder with the name bg.jpg. this name is not important, just make sure it has the same name when you import the picture. for import this picture we can use this code

const bg= require('../common/bg.jpg')

We transfer it to ListScreen.js with. Let’s import our icons

import Icon from 'react-native-vector-icons/FontAwesome';

and to use this icon

Icon.loadFont()

We need to load the icons by typing the above code snippet into the page. In the meantime, let’s prepare a small component for the blur background. We create a file called MyBlur.js in components and use our “@react-native-community/blur” plugin here. Our MyBlur.js file looks like this

import React from 'react'
import { StyleSheet } from 'react-native'
import { BlurView } from "@react-native-community/blur";

const MyBlur = () => {
    return (
        
    )
}

export default MyBlur

const styles = StyleSheet.create({
    absolute: {
        position: "absolute",
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
      }
})

Let’s go back to our ListScreen.js page. On this page, FabianEnglish will be written on the left in the header section. On the right, there will be two buttons, one of which will be “Ask Me” and the other will be “Learn”. There will be a modal where we will translate the word that we recorded for us with Ask Me, and if it is correct, the score of the word will increase. There will be a skip button under it and if we press this button, the score will decrease. There will be a search input under the header so that we can search for words. Then there will be a button that we position as absolute at the bottom right, when we press this button, the section where we can save the word will become visible. Finally, our words will be listed in the body section. Before we forget, let’s create a TextInput of our own. So first go to the components folder

Askme.js
Learn.js
SendComp.js(the component we will save the word)
ListComp.js(component to list words )
MyTextInput.js

We create this pages.

Finally, let’s create our state management without going back to ListScreen.

I created a file named state.js in our state folder. Yes, let’s start using Zustand, which is one of the main topics. Here we can say that we create our state and actions. But it was much easier to use than redux :). Let’s first share the codes in state.js and then try to explain.

import create from 'zustand'

export const useStore = create(set => ({
  wordState:false,
  popupState:false,
  askmeState:false,
  learnState:false,
  selectedWordState:{},
  search:"",

  setWordState:(data)=>set((state)=>({...state,wordState:data})),
  setPopupState:(data)=>set((state)=>({...state,popupState:data})),
  setAskmeState:(data)=>set((state)=>({...state,askmeState:data})),
  setLearnState:(data)=>set((state)=>({...state,learnState:data})),
  setSelectedWordState:(data)=>set((state)=>({...state,selectedWordState:data})),
  setSearch:(data)=>set((state)=>({...state,search:data})),
  
}))

Firstly,

First, we call the create function from zustand, assign this function to a variable named useStore, export it and create an array function with the set parameter in our create function. and we define our variables such as wordState, learnState, search as variables. We value it as necessary, such as object, string, int, boolean.. We can say that our variables that start with the set prefix are our actions, we will use them to update the states we have defined above. For more, you can dive into zustand’s documentation :).

but to read state basicly

    const loading = useStore(state => state.wordState)

for update the state

    const setLoading = useStore(state => state.setWordState)

we can use this.

Yes, now we are finishing ListScreen.js and we are writing it like this.

import React from 'react'
import { StyleSheet, Text, SafeAreaView, View, Pressable, ImageBackground } from 'react-native'
import Icon from 'react-native-vector-icons/FontAwesome';
import AskMe from '../components/AskMe';
import Learn from '../components/Learn';
import ListComp from '../components/ListComp'
import SendComp from '../components/SendComp'
import MyTextInput from '../components/MyTextInput'
import { useStore } from '../state/atom';
import MyBlur from '../components/MyBlur';

const bg= require('../common/bg.jpg')
Icon.loadFont()

  
const ListScreen = () => {
    const setAskVisible = useStore(state => state.setAskmeState)
    const setLearnVisible = useStore(state => state.setLearnState)
    const setSearch = useStore(state => state.setSearch)
    const search=(data)=>{
       setSearch(data)
    }
    return (
        
             
             
                    
                        
                            Fabian English |
                            setAskVisible(true)}>
                                
                                ask me
                            
                            setLearnVisible()}>
                                
                                learn
                            
                        
                    
            
            
            
            
                
                    search(data)} padding={20}/>
                
                

               
            
                    
           
        


    )
}

export default ListScreen

const styles = StyleSheet.create({
    container:{
        height:'100%',
        
    },
    head:{
        flexDirection:'row',
        justifyContent:'space-around',
        marginBottom:10,
        alignItems:'center',
        paddingVertical:10,
    },
    head1:{
        marginBottom:10,
        backgroundColor:'#ffffff50',
        shadowColor:'black',
        shadowOpacity:0.,
        shadowRadius:1,
        shadowOffset:{width: -1, height: 3},
    },
    
    title:{
        color:'white',
        fontSize:20,
        fontWeight:'700',
        textShadowColor:'black',
        textShadowRadius:3,
        textShadowOffset:{width: -1, height: 1},
    },
   
    headtext:{
        color:'white',
        fontSize:14,
        fontWeight:'600',
        textShadowColor:'black',
        textShadowRadius:6,
        textShadowOffset:{width: -1, height: 1},
        paddingLeft:3
    },
    pressable:{
        flexDirection:'row',
        alignItems:'center'
    },
    pressableicon:{
        shadowColor:'black',
        shadowOpacity:0.2,
        shadowRadius:1,
        shadowOffset:{width: -1, height: 3},
    },
})

useStore ile zustand a nasıl veri gönderebileceğimizi görmüşsündür, bu kadar kYou have seen how we can send data to a zustand with useStore, it’s that easy 🙂

Let’s share the other components in turn.

//MyTextInput.js
import React from 'react'
import { StyleSheet, View, TextInput, Dimensions } from 'react-native'

const MyTextInput = ({onChange,placeholder,value,autoFocus=false,padding=70}) => {

    return (
        
            {onChange(a)}}>
            
        
    )
}

export default MyTextInput

const styles = StyleSheet.create({
    container:{
        backgroundColor:'#f2f2f270',
        padding:5,
        margin:3,
        alignSelf:'center',
        borderRadius:5,
    }
})

Let’s take a look at the important issue, Realm, which intervenes here.

import Realm from 'realm'

To use it, we need to import it as above. And we need to use a schema. Since we will use this scheme in a different way, let’s put it in a separate file for a cleaner look and ease of use. Let’s create a Shema.js file in our public folder.

export const WordShema = {
    name: 'Words',
    properties: {
        id:'int',
        name:  'string',
        description: 'string',
        pronunciation: 'string',
        translate: 'string',
        date: 'date',
        score: 'int'
    }
  };

We don’t have much to tell in this. First “name” is our shema’s name . Other keys are our datas veriable in the properties.

id => identical id
name => our word what we want to learn
description => if we want to add a description at our word
pronunciation => pronuncitation
translate => translated word
date => data’s created date
score => the word’s score

let’s go to usage

import { WordShema } from '../common/Shema';

we import our shema

öncelikleFirst of all, we tell which scheme we will open using the realmi function opening function, and after opening it, we write what we do.

Realm.open({schema:[WordShema]}).then(realm=>{
   //we are always use this area .
})

For example we want to get all datas

Realm.open({schema:[WordShema]}).then(realm=>{
   let obj = realm.objects('Words');
})

İf we want to write a data to our database

 Realm.open({schema:[WordShema]}).then(realm=>{
                realm.write(()=>{
                    const myData=realm.create('Words',{
                        id:'benzersiz id',
                        name:'kelime',
                        description:'açıklama',
                        pronunciation:'telafuz',
                        translate:'çeviri',
                        date:new Date(),
                        score:0
                    })
                })
            })

we can use this.

or update a data in realm,

Realm.open({schema:[WordShema]}).then(realm=>{
                let obj = realm.objects('Words').filtered("id='"+data.id+"'")[0];
                realm.write(() => {
                obj.name='güncellenen kelime'
                })
            })

we can use this.

Now that we see the use of realm as a basis, we can return to our codes. Let’s continue with the components and even though I share them all one after the other, there is no part you can’t understand :). I don’t need any further explanation 🙂

//SendComp.js
import React, {useState, useEffect} from 'react'
import { StyleSheet, Text, View, TouchableOpacity, Dimensions, Alert, SafeAreaView } from 'react-native'
import MyTextInput from './MyTextInput'
import Realm from 'realm';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {  useStore } from '../state/state';
import { WordShema } from '../common/Shema';
const width=Dimensions.get('screen').width;

Icon.loadFont()
const SendComp = ({isSend=true}) => {
    const data = useStore(state => state.selectedWordState)
    const [name, setName] = useState('')
    const [description, setDescription] = useState('')
    const [pronunciation, setPronunciation] = useState('')
    const [translate, setTranslate] = useState('')
    const [opened, setOpened] = useState(isSend?false:true)
    const setLoading = useStore(state => state.setWordState)
    const setModalVisible = useStore(state => state.setPopupState)

    useEffect(() => {
        if(!isSend&&data){
            setName(data.name)
            setDescription(data.description)
            setPronunciation(data.pronunciation)
            setTranslate(data.translate)

        }
    }, [data])
    
    const sendData=()=>{
        if(name.length>0&&translate.length>0){
            Realm.open({schema:[WordShema]}).then(realm=>{
                realm.write(()=>{
                    const myData=realm.create('Words',{
                        id:parseInt(new Date().getTime()+''+Math.floor(Math.random()*10000)),
                        name:name,
                        description:description,
                        pronunciation:pronunciation,
                        translate:translate,
                        date:new Date(),
                        score:0
                    })
                })
            }).then(()=>{
                setLoading(true)
                setName('')
                setDescription('')
                setPronunciation('')
                setTranslate('')
                setModalVisible(false)
            })
        }else{
            Alert.alert('You must be fill Word and Translate')
        }
        
    }
    const updateData = ()=>{
        if(name.length>0&&translate.length>0){

            Realm.open({schema:[WordShema]}).then(realm=>{
                let obj = realm.objects('Words').filtered("id='"+data.id+"'")[0];
                realm.write(() => {
                obj.name=name
                obj.description=description
                obj.pronunciation=pronunciation
                obj.translate=translate
                })
            }).then(()=>{
                setLoading(true)
                setModalVisible(false)
            })
        }else{
            Alert.alert('You must be fill Word and Translate')
        }
    }
    return (
        
            {opened&&
               
                {setName(data)}}>
                {setTranslate(data)}}>
                {setPronunciation(data)}}>
                {setDescription(data)}}>
            }
            
                {opened?
                
                isSend?sendData():updateData()}>
                    
                
                {isSend&&setOpened(false)}>
                    
                }
                
                :
                

                setOpened(true)}>
                    
                
                
                }
            

        
    )
}

export default SendComp

const styles = StyleSheet.create({
    container:{
        flexDirection:'row',
        paddingHorizontal:10,
        
    },
    buttonplus:{
        backgroundColor:'#fff5',
        padding:10,
        borderRadius:50,
        borderWidth:1,
        borderColor:'white',
        shadowColor:'black',
        shadowOpacity:0.5,
        shadowRadius:1,
        shadowOffset:{width: -1, height: 3},
    },
    buttonminus:{
        position:'absolute',
        bottom:-10
    },
    buttonsend:{
        justifyContent:'center',
        flex:1,
    },
    plusicon:{
        shadowColor:'black',
        shadowOpacity:0.5,
        shadowRadius:1,
        shadowOffset:{width: -1, height: 3},
    },
    inputs:{
        backgroundColor:'#111',
        borderRadius:5
    }
})

//Askme.js
import React, { useEffect, useState } from 'react'
import { StyleSheet, Dimensions, View,Modal, TouchableOpacity, Text } from 'react-native'
import Realm from 'realm'
import { useStore } from '../state/atom';
import { WordShema } from '../common/Shema';
import MyTextInput from './MyTextInput';
import MyBlur from './MyBlur';
const AskMe = () => {
    const visible = useStore(state => state.askmeState)
    const setVisible = useStore(state => state.setAskmeState)
    const [data, setData] = useState([])
    const [word, setWord] = useState('')
    const [index, setIndex] = useState(0)
    useEffect(() => {
        Realm.open({schema:[WordShema]}).then(realm=>{
            setData(realm.objects('Words').sorted('score',true))
        })
    }, [])
    useEffect(() => {
        if(data.length>0&&word.toLowerCase()==data[index].translate.toLowerCase()){
            //realmda kelimenin scorunu yükselt
            Realm.open({schema:[WordShema]}).then(realm=>{
                let obj = realm.objects('Words').filtered("id='"+data[index].id+"'")[0];
                realm.write(() => {
                    obj.score++
                })
            }).then(()=>{
                setIndex(data.length!=index+1?index+1:0)
                setWord('')
            })
        }
    }, [word])
    const skip =()=>{
        //realmda kelimenin scorunu düşür
        if(data.length>0){
            Realm.open({schema:[WordShema]}).then(realm=>{
                let obj = realm.objects('Words').filtered("id='"+data[index].id+"'")[0];
                realm.write(() => {
                    obj.score--
                })
                console.log(obj)
            }).then(()=>{
                setIndex(data.length!=index+1?index+1:0)
                setWord('')
            })
        }
    }
    return (
        
            
            setVisible(false)}>
                {data.length>0&&data[index].name}
                {data.length>0&&'( '+data[index].pronunciation+' )'}
                {data.length>0&&data[index].description}
                {setWord(data)}}
                >
                skip()}>
                    {'skip >>'}
                
                
                if you skip this word, the word's score to less
                if you learned this word, you must delete this word
                
            
        
    )
}

export default AskMe

const styles = StyleSheet.create({
    view:{
        width:'100%',
        height:'100%',
        alignItems:'center',
        justifyContent:'center',
        alignSelf:'center',
        borderRadius:10
    },
    skiptext:{
        color:'white',
        fontWeight:'900'
    },
      skip:{
          padding:10,
          marginTop:20,
          backgroundColor:'#f005',
          alignItems:'flex-end',
          width:Dimensions.get('screen').width-70,
          borderRadius:5
      },
      title:{
        color:'white',
        fontSize:25,
        fontWeight:'900',
        textShadowColor:'#f00',
        textShadowRadius:5,
        textShadowOffset:{width: 0, height: 0},
        marginBottom:20
    },
    bottom:{
        color:'white',
        fontSize:12
    },
    text:{
        color:'white'
    }
})

//Learn.js
import React, { useEffect, useState } from 'react'
import { StyleSheet, Dimensions, View,Modal, TouchableOpacity, Text } from 'react-native'
import Realm from 'realm'
import { useStore } from '../state/atom';
import { WordShema } from '../common/Shema';
import MyBlur from './MyBlur';
const Learn = () => {
    const visible = useStore(state => state.learnState)
    const setVisible = useStore(state => state.setLearnState)
    const [data, setData] = useState([])
    const [index, setIndex] = useState(0)
    useEffect(() => {
        Realm.open({schema:[WordShema]}).then(realm=>{
            setData(realm.objects('Words').sorted('score',true))
        })
    }, [])
    
    const skip =()=>{
            setIndex(data.length!=index+1?index+1:0)
    }
    return (
        
            
            setVisible(false)}>
                {data.length>0&&data[index].name}
                {data.length>0&&'( '+data[index].pronunciation+' )'}
                {data.length>0&&data[index].translate}
                {data.length>0&&data[index].description}
               
                skip()}>
                    {'next >>'}
                
                
                
            
        
    )
}

export default Learn

const styles = StyleSheet.create({
    view:{
        width:'100%',
        height:'100%',
        alignItems:'center',
        justifyContent:'center',
        alignSelf:'center',
        borderRadius:10
    },
    skiptext:{
        color:'white',
        fontWeight:'900'
    },
      skip:{
          padding:10,
          marginTop:20,
          backgroundColor:'#f005',
          alignItems:'center',
          width:Dimensions.get('screen').width-70,
          borderRadius:5
      },
      title:{
        color:'white',
        fontSize:25,
        fontWeight:'900',
        textShadowColor:'#f00',
        textShadowRadius:5,
        textShadowOffset:{width: 0, height: 0},
        marginBottom:20
    },
    text:{
        color:'white'
    }
})

//ListComp.js
import React, {useState, useEffect} from 'react'
import { View, Dimensions, ScrollView } from 'react-native'
import Realm from 'realm';
import MyRow from './MyRow';
import { useStore } from '../state/state';
import { WordShema } from '../common/Shema';

const height=Dimensions.get('screen').height;
const ListComp = () => {
    
    const [data, setData] = useState([])

    const loading = useStore(state => state.wordState)
    const search = useStore(state => state.search)
    const setLoading = useStore(state => state.setWordState)
    const setModalVisible = useStore(state => state.setPopupState)

    useEffect(() => {
        Realm.open({schema:[WordShema]}).then(realm=>{
            setData(realm.objects('Words').sorted('date',true))
        }).then(()=>{setLoading(false)
            setModalVisible(false)})
    }, [loading])
    useEffect(() => {
        Realm.open({schema:[WordShema]}).then(realm=>{
            setData(realm.objects('Words').sorted('date',true))
        }).then(()=>{
            setModalVisible(false)
        })
    }, [])
    useEffect(() => {
        Realm.open({schema:[WordShema]}).then(realm=>{
            setData(realm.objects('Words').filtered(
                'translate CONTAINS[c] "'+search+'" OR name CONTAINS[c] "'+search+'"'
            ))
        }).then(()=>{setLoading(false)
            })
    }, [search])
    return (
        
            
        
           
            
                {data.length>0&&
                
                data.map((data,ind)=>{
                    return(
                        
                    )
                })
            }

            
            
        
    )
}

export default ListComp

Bu komponentler içerisinde kullandığımız diğer komponentleri de burada paylaşabilirim.

//MyModal.js
import React from 'react'
import { StyleSheet, Modal, TouchableOpacity } from 'react-native'
import { useStore } from '../state/atom';
import SendComp from './SendComp';
import MyBlur from './MyBlur';
const MyModal = () => {

    const visible = useStore(state => state.popupState)
    const setVisible = useStore(state => state.setPopupState)
    const setSelectedData = useStore(state => state.setSelectedWordState)

    return (
        
            
            {
                setVisible(false)
                setSelectedData({})}}>
                
            
        
    )
}

export default MyModal

const styles = StyleSheet.create({
    view:{
        width:'100%',
        height:'100%',
        alignItems:'center',
        justifyContent:'center',
        alignSelf:'center',
        borderRadius:10
    }
})

//MyRow.js
import React, {useEffect} from 'react'
import { Dimensions, StyleSheet, Text, View, TouchableOpacity } from 'react-native'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { WordShema } from '../common/Shema';
import {  useStore } from '../state/atom';
import MyModal from './MyModal';

const width=Dimensions.get('screen').width;
const padding=20

Icon.loadFont()
const MyRow = ({data,ind}) => {
    const setModalVisible = useStore(state => state.setPopupState)

    const setLoading = useStore(state => state.setWordState)

    const selectedData = useStore(state => state.selectedWordState)
    const setSelectedData =useStore(state => state.setSelectedWordState)

    const deleter = ()=>{
        Realm.open({schema:[WordShema]}).then(realm=>{
            realm.write(() => {
            let obj = realm.objects('Words').filtered("id='"+data.id+"'");
            realm.delete(obj)
            setLoading(true)

        })
        })
    }

    useEffect(() => {
        if(selectedData.name!=undefined){
            setModalVisible(true)
        }
    }, [selectedData])
    return (
        setSelectedData(data)} >
            
            
                
                    
                        {data.name}({data.pronunciation})
                    
                    
                        {data.translate}
                    
                
                
                    {data.description}
                
            
            deleter()} style={styles.icon}>
                
            
        
    )
}

export default MyRow

const styles = StyleSheet.create({
    container:{
        
        padding:padding/2,
        width:width-padding,
        alignSelf:'center',
        margin:4,
        borderRadius:5,
        backgroundColor:'#ffffff60',
        flexDirection:'row',
        shadowColor:'black',
        shadowOpacity:0.2,
        shadowRadius:1,
        shadowOffset:{width: -1, height: 3},
    },
    info:{
        flex:1,
        justifyContent:'space-between'
    },
    data:{
        flexDirection:'row',
        justifyContent:'space-between'
        
    },
    text:{
        textAlign:'center',
        padding:2,
        color:'white',
        fontSize:20,
        fontWeight:'900',
        textShadowColor:'black',
        textShadowRadius:5,
        textShadowOffset:{width: 0, height: 0},
    },
    icon:{
        alignItems:'center',
        justifyContent:'center'
    },
    description:{
        color:'white',
        fontSize:14,
        fontWeight:'900',
        textShadowColor:'black',
        textShadowRadius:5,
        textShadowOffset:{width: 0, height: 0},
    }
})

yes, we can use

npx react-native run-ios

npx react-native run-android

Tada it’s working now. Congratulations 🙂

Forgive me if I made any mistakes as this is my first blog post 🙂

I will continue to add more such application development articles on mobile application development with React native, stay tuned 🙂 Stay healthy..