<file_sep>import {Text, View, StyleSheet, ImageBackground, Dimensions, TouchableOpacity, ScrollView, Image} from "react-native";
import React from "react";
import Card from "../Card";
import {Color, ColorSettings} from "../../utils/Colors";
import MenuIcon from "./MenuIcon";
import {LinearGradient} from "expo-linear-gradient";
import HeaderBar from "../HeaderBar";
import {MediaType} from "../../utils/EnumTypes";

function CustomizeScreen() {
    const themes = [
        {source: require('../../assets/images/SampleImage.jpg')},
        {source: require('../../assets/images/SampleImage.jpg')},
        {source: require('../../assets/images/SampleImage.jpg')}
    ]

    return (

        <LinearGradient style={styles.container} colors={Color.MAIN_BG_GRADIENT}>
            <HeaderBar title="Sahneler" size={100} />
            <MenuIcon navigateTo={"Main"}/>

            <ScrollView
                horizontal={true}
                contentContainerStyle={{
                    alignItems: "center",
                    justifyContent: "center"
                }}
            >
                { themes.map((theme, index) => {
                    console.log("ColorSettings.SelectedTheme: " + ColorSettings.SelectedTheme);
                    const cardStyles = index === ColorSettings.SelectedTheme ? [styles.cardContainer, styles.active] : styles.cardContainer;
                    return (
                        <View style={cardStyles} key={"theme_"+index}>
                            <Card lock={false} color={Color.MENU} source={theme.source} themeIndex={index} media={MediaType.THEME} />
                        </View>
                    )
                }) }
            </ScrollView>

        </LinearGradient>
    );
}
const windowHeight = Dimensions.get('window').height;
const windowWidth = Dimensions.get('window').width;
const radios = 15;
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
    },
    cardContainer: {
        margin: 10,
    },
    active: {
        borderWidth: 2,
        borderRadius: 15,
        borderColor: Color.LIGHT
    }
});
export default CustomizeScreen;
<file_sep>const ThemeColors = [
    {
        MAIN_BG_GRADIENT: ["rgb(100,63,39)", "rgb(11,0,0)"],
        HEADER_GRADIENT: ["rgb(118,83,65)", "rgb(65,40,28)"],
        MAIN_DARK: "rgb(11,0,0)",
        MAIN: "#01f0f5",
        LIGHT: "#e0b6a0",
        MENU: "rgb(11,0,0)",
        TITLE: "rgba(48,16,62, 0.4)",
        MOOD_BG: "rgba(0 ,0 ,0 , 0.5)",
        ACTIVE_TITLE: "rgba(248,116,162, 0.5)",
        DARK_TEXT_COLOR: "#000",
        LIGHT_TEXT_COLOR: "#fff"
    },
    {
        MAIN_BG_GRADIENT: ["rgb(109,71,43)", "rgb(47,23,16)"],
        HEADER_GRADIENT: ["rgb(213,239,119)", "rgb(103,179,87)"],
        MAIN_DARK: "rgb(255,0,0)",
        MAIN: "#7bf501",
        LIGHT: "#e0b6a0",
        MENU: "rgb(11,0,0)",
        TITLE: "rgba(48,16,62, 0.4)",
        MOOD_BG: "rgb(98,150,100)",
        ACTIVE_TITLE: "rgb(111,108,215)",
        DARK_TEXT_COLOR: "#000",
        LIGHT_TEXT_COLOR: "#a3f304"
    }
]

export const ColorSettings = {
    SelectedTheme : 0,
}

export const ChangeTheme = index => {
    ColorSettings.SelectedTheme = index;
    Color = ThemeColors[index];
}

export let Color = ThemeColors[ColorSettings.SelectedTheme];

<file_sep>import React, { Component } from 'react';
import {Dimensions, StyleSheet, Text, View, TouchableWithoutFeedback} from 'react-native';
import {Color} from "../utils/Colors";
import {navigate} from "./RootNavigation";
import {useFonts, Lato_400Regular} from "@expo-google-fonts/lato";
import {AppLoading} from "expo";

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;
export default function MoodCard({mood, uri}){
    let [fontLoaded] = useFonts({ Lato_400Regular});

    console.log("MOOD CARD RENEDER: " + mood);

    if(!fontLoaded){
        return <AppLoading />;
    }else {
        return (
            <TouchableWithoutFeedback
                onPress={()=>{
                    navigate("Video", { uri });
                }}
            >
                <View style={styles.container}>
                    <Text style={styles.text}>{mood}</Text>
                </View>
            </TouchableWithoutFeedback>
        )
    }
};

const styles = StyleSheet.create({
    container:{
        backgroundColor: Color.MOOD_BG,
        borderRadius: 8,
        justifyContent: "center",
        alignItems: "center",
        width: windowWidth * 9 / 40,
        height: windowWidth * 9 / 40,
        marginBottom: 10,
        paddingHorizontal: 5
    },
    text: {
        color: Color.LIGHT_TEXT_COLOR,
        fontFamily: "Lato_400Regular",
        fontSize: 17,
        textAlign: 'center'

    }
});
<file_sep>import React, {Component} from "react";
import {Dimensions, View} from "react-native";
import EventEmitter from "react-native-eventemitter";
import CustomEvents from "../../models/CustomEvents";
import { Color } from "../../utils/Colors";
import { LinearGradient } from 'expo-linear-gradient';



const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;
export default class MainBG extends Component{

    state = {
        bgOpacity: 0
    };

    componentDidMount() {
        EventEmitter.on(CustomEvents.BG_RATIO_CHANGED,bgOpacity =>{
            this.setState({bgOpacity});
        });
    }

    componentWillUnmount() {

    }

    render() {

        return(
            <LinearGradient
                colors={Color.MAIN_BG_GRADIENT}
                style={{
                width: windowWidth,
                height: windowHeight,
                position: "absolute",
                top: 0,
                left: 0,
                opacity: this.state.bgOpacity
            }} />
        )
    }
}
<file_sep>import {Text, View, StyleSheet} from "react-native";
import React from "react";
import { createStackNavigator } from '@react-navigation/stack';
import ProfileScreen from "./ProfileScreen";
import SettingsScreen from "./SettingScreen";
import {Ionicons} from "@expo/vector-icons";
import {navigate } from "../RootNavigation";
import {Color} from "../../utils/Colors";
import Languages, {getLanguageText} from "../../utils/Language";
import {Lato_400Regular, useFonts} from "@expo-google-fonts/lato";


const ProfileStack = createStackNavigator();


export default function ProfileStackScreen() {
    let [fontLoaded] = useFonts({ Lato_400Regular});

    return (
        <ProfileStack.Navigator>
            <ProfileStack.Screen
                name="Profile"
                component={ProfileScreen}
                options={{
                    title: getLanguageText(Languages.PROFILE),
                    headerRight: SettingsButton,
                    headerTransparent: true,
                    headerTitle:"Profil",
                    headerTitleStyle : {
                        color: Color.LIGHT,
                        fontSize: 20,
                        fontFamily: "Lato_400Regular"
                    }
                }}
            />
            <ProfileStack.Screen
                name="Settings"
                component={SettingsScreen}
                options={{ title: getLanguageText(Languages.SETTINGS), headerBackTitleVisible: false }}
            />
        </ProfileStack.Navigator>
    );
}


function SettingsButton() {
    return (
        <View>
            <Ionicons
                name={'ios-settings'}
                size={12}
                color={Color.MAIN_DARK}
                style={style.settings}
                onPress={()=>{
                    navigate('Settings');
                }}
            />
        </View>
    )
}

const style = StyleSheet.create({
    settings: {
        color: "#fff",
        fontSize: 26,
        padding: 10
    }
});
<file_sep>import React, { Component, useState, useEffect } from 'react';
import { Dimensions, StyleSheet, Text, View, Image, ImageBackground, TouchableOpacity, ScrollView, Switch, Platform, TouchableWithoutFeedback, TextInput } from 'react-native';
import { Color } from "../utils/Colors";
import {Lato_400Regular, Lato_100Thin, useFonts} from "@expo-google-fonts/lato";

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;
export default function ProfileCard() {
    const [fontLoaded] = useFonts({ Lato_400Regular, Lato_100Thin});
    const [strike, setStrike] = useState(22);
    const [joinCount, setJoinCount] = useState(3);
    const [joinTime, setJoinTime] = useState(143);
    const [joinStrike, setJoinStrike] = useState(12);
    const [reminders, setReminders] = useState(false);
    const [remindHour, onChangeRemindHour] = useState(9);
    const [remindMinute, onChangeRemindMinute] = useState(40);
    const [appleHealth, setAppleHealth] = useState(false);
    const [remindDays, setRemindDays] = useState([
        {text: "P", open: false},
        {text: "S", open: false},
        {text: "Ç", open: true},
        {text: "P", open: false},
        {text: "C", open: false},
        {text: "C", open: false},
        {text: "P", open: true},
    ]);
    const [renderMe, setRenderMe] = useState(false);

    const InfoArea = ({ text, count }) => (
        <View style={{flex: 1}}>
            <Text style={styles.infoLabel}>{text}</Text>
            <Text style={styles.infoCount}>{count}</Text>
        </View>
    );

    const SocialIcon = ({source}) => (
        <TouchableOpacity
            onPress={()=>{

            }}
            style={{ paddingHorizontal: 15 }}
        >
            <Image style={styles.socialIcon} source={source} />

        </TouchableOpacity>
    )

    const SwitchArea = ({text, value, setValue}) => (
        <View style={{
            flexDirection: "row",
            justifyContent: "space-between",
            width : windowWidth * 9 / 10,
            marginBottom: 10
        }}>
            <Text style={styles.text}>{text}</Text>
            <Switch
                value={value}
                onValueChange={v => {
                    setValue(v);
                }}
            />
        </View>
    )

    const RemindersBar = ({days}) => (
        <View>
            <View style={{
                flexDirection: "row",
                justifyContent: "space-around",
                width : windowWidth * 9 / 10,
                marginTop: 10,
                marginBottom: 20,
            }}>
                {days.map((day, index) => (
                    <View style={styles.reminder} key={"reminder_day_"+index}>
                        <Text style={[styles.text, { paddingTop: 5, paddingBottom: 6 }]}>{day.text}</Text>
                        <TouchableWithoutFeedback
                            onPress={()=>{
                                days[index].open = !days[index].open;
                                setRenderMe(val => !val);
                            }}
                        >
                            <View style={[styles.reminderIcon, { backgroundColor: day.open ? "#32d74b" : "#000" }]}/>

                        </TouchableWithoutFeedback>
                    </View>
                ))}
            </View>
            <View style={{
                flexDirection: "row",
                marginTop: 10,
                marginBottom: 20,
                justifyContent: "center"
            }}>
                <Text style={[styles.text, { fontSize: 20 }]}>Saat </Text>
                <TextInput
                    style={[styles.text, { fontSize: 20 }]}
                    onChangeText={text => onChangeRemindHour(text)}
                    numeric={true}
                    keyboardType={'numeric'}
                    value={remindHour+""}
                />
                <Text style={[styles.text, { fontSize: 20 }]}> : </Text>
                <TextInput
                    style={[styles.text, { fontSize: 20 }]}
                    onChangeText={text => onChangeRemindMinute(text)}
                    value={remindMinute+""}
                    numeric={true}
                    keyboardType={'numeric'}
                />

            </View>
        </View>
    )

    return (
        <ScrollView contentContainerStyle={styles.container}>
           <View style={styles.profileArea}>
               <ImageBackground style={styles.strikeImage} source={require('../assets/images/rozet.png')}>
                   <Text style={styles.strikeText}>{strike}</Text>
               </ImageBackground>

               <View style={styles.infoArea}>
                   <InfoArea text="KATILDIĞI MEDiTASYONLAR" count={joinCount}/>
                   <InfoArea text="MEDiTASYONDAKi DAKiKALARIN" count={joinTime}/>
                   <InfoArea text="ART ARDA GÜNLERiN" count={joinStrike}/>
               </View>

               <View style={styles.shareArea}>
                   <Image  source={require("../assets/images/export.png")} />
                   <Text style={[styles.text, { paddingTop: 2, marginLeft: 5 }]}>İstatistiklerini Paylaş</Text>
               </View>
           </View>

            <View >
                <TouchableOpacity
                    style={{ marginVertical: 10 }}
                >
                    <Text style={styles.text}>Takvim ve Geçmiş > </Text>
                </TouchableOpacity>
                <SwitchArea text="Anımsatıcılar" value={reminders} setValue={setReminders}/>
                { reminders ? <RemindersBar days={remindDays} /> : null }

                { Platform.OS === "ios" ? <SwitchArea text="Apple Sağlık" value={appleHealth} setValue={setAppleHealth}/> : null }
                <TouchableOpacity
                    style={{ marginBottom: 10 }}
                >
                    <Text style={styles.text}>Sıkça Sorulan Sorular </Text>
                </TouchableOpacity>
                <TouchableOpacity
                    style={{ marginBottom: 10 }}
                >
                    <Text style={styles.text}>Bize Ulaşın </Text>
                </TouchableOpacity>
            </View>

            <View>
                <Text style={styles.socialLabel}>Bizi Tavsiye Edin</Text>
                <View style={styles.socialIcons}>
                    <SocialIcon source={require("../assets/images/fbIcon.png")}/>
                    <SocialIcon source={require("../assets/images/instagramIcon.png")}/>
                    <SocialIcon source={require("../assets/images/twitterIcon.png")}/>
                    <SocialIcon source={require("../assets/images/whatsappIcon.png")}/>
                </View>
            </View>

        </ScrollView>
    )


};



const styles = StyleSheet.create({
    container: {
        justifyContent: "space-between",
        alignItems: "center",
        flexGrow: 1
    },
    profileArea: {
        alignItems: "center",
        marginTop: 60
    },
    shareArea: {
        borderColor: "#7A51B9",
        borderRadius: 25,
        borderWidth: 3,
        flexDirection: "row",
        justifyContent: "center",
        paddingVertical: 10,
        paddingHorizontal: 20,
        marginVertical: 10
    },
    socialIcons: {
        flexDirection: "row",
        marginBottom: 10
    },
    text: {
        color: Color.LIGHT_TEXT_COLOR,
        fontSize: 18,
        fontFamily: "Lato_400Regular"
    },
    backGround:{
        backgroundColor: '#280d52'
    },
    strikeImage: {
        width: 200,
        height: 100,
        marginBottom: 10
    },
    strikeText: {
        color: Color.LIGHT_TEXT_COLOR,
        fontFamily: "Lato_400Regular",
        fontSize: 24,
        textAlign: "center",
        paddingTop: 18
    },
    infoArea :{
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center",
        width: windowWidth
    },
    infoLabel: {
        fontFamily: "Lato_400Regular",
        color: Color.LIGHT_TEXT_COLOR,
        opacity: 0.4,
        textAlign: "center",
        fontSize: 13
    },
    infoCount: {
        fontFamily: "Lato_400Regular",
        color: Color.LIGHT_TEXT_COLOR,
        textAlign: "center"
    },
    socialLabel: {
        fontFamily: "Lato_400Regular",
        color: Color.LIGHT_TEXT_COLOR,
        textAlign: "center",
        paddingVertical: 10
    },
    socialIcon: {
        width: 50,
        height: 50
    },
    reminder : {
        borderRadius: 12,
        backgroundColor: "#9E9E9E",
        width: 34,
        height: 54,
        alignItems: "center"
    },
    reminderIcon: {
        borderRadius: 50,
        width: 28,
        height: 28,
        marginTop: 0,
        borderColor: "#707070",
        borderWidth: 2
    }
});
<file_sep>export const BASE_API_URL = "http://127.0.0.1:5000/";
export const LOGIN_URL = BASE_API_URL + "user/login";
export const UPDATE_URL = BASE_API_URL + "user/content";
export const CONTENT_URL = "https://sahajayoga-assets.s3-eu-west-1.amazonaws.com/";
<file_sep>import {Text, View, Dimensions, StyleSheet} from "react-native";
import React from "react";
import Card from "../Card";
import ProfileCard from "../ProfileCard";
import {Color} from "../../utils/Colors";
import {LinearGradient} from "expo-linear-gradient";
import {useFonts, Lato_400Regular} from "@expo-google-fonts/lato";

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

function ProfileScreen() {
    return (
        <LinearGradient style={styles.container} colors={Color.MAIN_BG_GRADIENT}>
            <ProfileCard />
        </LinearGradient>
    );
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: "center",
        backgroundColor: '#280d52'

    }
});
export default ProfileScreen;
<file_sep>const lang = "tr";
const Languages = {
    TODAY:{ en: "Today", tr: "Bugün"},
    DISCOVER:{ en: "Discover", tr: "Keşfet"},
    MUSIC:{ en: "Music", tr: "Müzik"},
    BLOG:{ en: "Blog", tr: "Blog"},
    PROFILE:{ en: "Profile", tr: "Profil"},
    SETTINGS:{ en: "Settings", tr: "Ayarlar"},
    HOW_ARE_YOU_FEELING:{ en: "How are you feeling?", tr: "Nasıl Hissediyorsun?"},
    WORD_OF_THE_DAY:{ en: "Word of the day", tr: "Günün Sözü"},
    POPULAR:{ en: "Popular", tr: "Popüler"},
    SELF_REALISATON:{ en: "Self Realisation", tr: "Aydınlanma Meditasyonu"},
    QUICK_START:{en: "Quick Start", tr: "Hızlı Başla"},
    ELEMENTS:{en: "Elements", tr: "Elementler"},
    SEVEN_STEPS:{en: "Seven Steps", tr: "Yedi Adım"},
    MEDITATION_WITH_MANTRA:{ en: "Meditation with Mantra", tr: "Mantralı Meditasyon" },
    THREE_CHANNEL_BALANCING:{ en: "Three Channel Balancing", tr: "Üç Kanal Dengeleme" },
    MEDITATION_WITH_AFFIRMATIONS:{ en: "Meditation With Affirmations", tr: "Olumlamalı Meditasyon" },
    BREATH_EXERCISES:{ en: "Breath Exercises", tr: "Nefes Egzersizleri" },
    STRESS_MANAGAMENT:{ en: "Stress Management", tr: "Stres Yönetimi" },
    ATTENTION_MEDITATION:{ en: "Attention Meditation", tr:  "Dikkat Meditasyonu" },
    MEDITATION_WITH_MUSIC:{ en: "Meditation With Music", tr:  "Müzikli Meditasyon" },
    OMKAR_TECHNIQUE:{ en: "Omkar Technique", tr:  "Omkar Tekniği" },
    GRADITUDE_AND_THANK:{ en: "Graditude and Thank", tr:  "Şükran ve Teşekkür" },
    MEDITATION_MUSICS:{ en: "Meditation Musics", tr:  "Meditasyon Müzikleri" },
    FREQUENCY_MUSICS:{ en: "Frequency Musics", tr:  "Frekans Müzikleri" },
    NATURE_SOUNDS:{ en: "Nature Sounds", tr:  "Doğa Sesleri" },
    SLEEP_MUSICS:{ en: "Sleep Sounds", tr:  "Uyku Sesleri" },
    CHILL_AMBIENT_MUSICS:{ en: "Chill & Ambient Musics", tr:  "Chill & Ambiyans Müzikleri" },
    CLASSIC_MUSICS:{ en: "Classic Musics", tr:  "Klasik Müzikler" },


};

export const MoodLanguages = {
    STRESSED: { en: "Stressed", tr: "Stresli" },
    HAPPY: { en: "Happy", tr: "Mutlu" },
    TIRED: { en: "Tired", tr: "Yorgun" },
    DEMOTIVATED: { en: "Demotive", tr: "Demotive" },
    INCAPABLE: { en: "Incapable", tr: "Yetersiz" },
    LONELY: { en: "LONELY", tr: "Yalnız" },
    IN_PAIN: { en: "In Pain", tr: "Ağrılı" },
    SAD: { en: "Sad", tr: "Üzgün" },
    GRATEFUL: { en: "Grateful", tr: "Minettar" },
    UNEASY: { en: "Uneasy", tr: "Rahatsız" },
    DEPRESSED: { en: "Depressed", tr: "Depresif" },
    DISTRACTED: { en: "Distracted", tr: "Dikkati Dağılmış" },
    NEED_SPACE: { en: "Need Space", tr: "Alana İhtiyacım Var" },
    COMPASSIONED: { en: "Compassioned", tr: "Şefkatli" },
    SLEEPLESS: { en: "Sleepless", tr: "Uykusuz" },
    ANXIOUS: { en: "Anxious", tr: "Endişeli" }
};


export function getLanguageText(obj) {
    try {
        return obj[lang];
    } catch (error) {
        console.error(error);
       return ''; 
    }
    
}

export default Languages;
<file_sep>import React, { Component } from "react";
import { Dimensions, ScrollView, StyleSheet, View, FlatList } from 'react-native';
import { MusicList } from "../../utils/Data";
import Languages, { getLanguageText } from '../../utils/Language';
import Card from '../Card';
import Title from "../Title";
import HeaderBar from "../HeaderBar";
import {LinearGradient} from "expo-linear-gradient";
import {Color} from "../../utils/Colors";
import {getMeditationGroups} from "../../utils/Utils";
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;
class MusicScreen extends Component {

    flatListRef;
    headerListRef;
    headerLocked;
    activeIndex = 0;
    state = {
        titles: [],
        musicList : [],
    }

    constructor(props){
        super(props);
        let activeID;
        if(this.props.route.params){
            activeID = this.props.route.params.id;
        }

        MusicList.forEach((item, index) => {
            item.groups = getMeditationGroups(item.musics);
            if(activeID){
                item.groups.forEach(group => {
                    group.forEach(music => {
                        if(music.id === activeID){
                            this.activeIndex = index;
                        }
                    });
                });
            }
        })

        MusicList[this.activeIndex].active = true;

        this.flatListRef = React.createRef();
        this.headerListRef = React.createRef();
    }

    componentDidMount(){
        console.log("activeIndex: " + this.activeIndex );
        this.setState({
            musicList : MusicList
        }, ()=>{
            if(this.activeIndex > 0){
                setTimeout(()=>{
                    this.changeActiveList(this.activeIndex);
                }, 500);
            }
        })


    }

    changeActiveList = index => {
        console.log("changeActiveList with: " + index);
        MusicList.forEach((item, ind) =>{
            item.active = index === ind;
        });

        this.setState({
            musicList : MusicList
        });

       try {
           this.flatListRef.current.scrollToIndex({index});

           this.headerListRef.current.scrollToIndex({index});
           this.headerLocked = true;

           setTimeout(()=>{
               this.headerLocked = false;
           }, 250);

       }catch (e){

       }
    };

    renderHeaderItem = ({item, index}) => (
        <Title
            title={getLanguageText(item.title)}
            active={item.active}
            key={"musicTitle_" + index}
            onPress={() => {
                this.changeActiveList(index);
            }}
        />
    )

    renderScreen = ({item: { groups }, index}) => (
        <ScrollView
            style={styles.musicContainer}
            showsVerticalScrollIndicator={false}
            key={"music_screen_"+index}
        >
            {
                groups.map((group, index) => (addMeditationCards(group, index)))
            }

            <View style={{height: windowHeight / 10}}/>
        </ScrollView>
    )

    onViewableItemsChanged = ({ viewableItems, changed }) => {
       // console.log("Visible items are", viewableItems);
       // console.log("Changed in this iteration", changed);

        if(!viewableItems || viewableItems.length == 0) return;

        const index = viewableItems[0].index;

        if(this.headerListRef != null){


            MusicList.forEach((item, ind) =>{
                item.active = index === ind;
            });

            this.setState({
                musicList : MusicList
            });

            if(!this.headerLocked){
                this.headerListRef.current.scrollToIndex({index});
            }

        }


    }

    render() {
        //let { id } = this.props.route.params;

        const { musicList } = this.state;
        return (

            <LinearGradient colors={Color.MAIN_BG_GRADIENT}>
                <HeaderBar title={getLanguageText(Languages.MUSIC)} />
                <FlatList
                    style={styles.container}
                    horizontal={true}
                    showsHorizontalScrollIndicator={false}
                    ref={this.headerListRef}
                    data={musicList}
                    keyExtractor={item => "header_"+ item.title.en}
                    renderItem={this.renderHeaderItem}
                />

                <FlatList
                    data={musicList}
                    renderItem={this.renderScreen}
                    keyExtractor={item => item.title.en}
                    horizontal={true}
                    pagingEnabled={true}
                    ref={this.flatListRef}
                    onViewableItemsChanged={this.onViewableItemsChanged }
                />


            </LinearGradient>
        )
    }

}

function addMeditationCards(group, groupIndex){
    const groupSize = group.length;

    if(groupSize === 1 && groupIndex === 0){
        const card = group[0];
        return (
            getCard(card, 0, 96)
        )
    }

    return (
        <View style={styles.cardContainer} key={"music_card_container_" + groupIndex}>
            {
                group.map((card, index)=>( getCard(card, index, 47) ))
            }
        </View>
    )
}

function getCard(card, index, size){
    const { lock, color, title, desc } = card;
    return (
        <Card
            key={"music_card_" + index}
            lock={lock}
            color={color}
            size={size}
            title={getLanguageText(title)}
            desc={getLanguageText(desc)}
            source={require('../../assets/images/SampleImage.jpg')}
        />
    )
}



const styles = StyleSheet.create({
    container: {
        paddingHorizontal: windowWidth / 50,
        marginBottom: 5

    },
    musicContainer: {
        padding: windowWidth / 50,
        width: windowWidth,
        flex : 1
    },
    cardContainer: {
        flexDirection: "row",
        justifyContent: "space-between"
    },
    backGround:{
        backgroundColor: '#280d52'
    }
});


export default MusicScreen;
<file_sep>import { View, StyleSheet, Image, Dimensions } from "react-native";
import React from "react";
import Logo from "../Logo";
import MainContent from "../MainContent";
import MainBG from "./MainBG";
import { Video } from "expo-av";
import MenuIcon from "./MenuIcon";

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

export default function HomeScreen() {


    return (
        <View style={{ flex: 1 }}>

            <Video source={require('../../assets/videos/rain_loop.mp4')}  // Can be a URL or a local file.
                rate={1.0}                                     // Store reference
                volume={1.0}
                isMuted={true}
                resizeMode={Video.RESIZE_MODE_COVER}
                style={styles.backgroundVideo}
                shouldPlay={true}
                isLooping={true}
                orientation="portrait"
                useNativeControls={false}
                onLoadStart={() => {
                    console.log("bg video started!");
                }}
                onLoad={status => {
                    console.log("bg video loaded with status: ", status);
                }}
            />

            <MenuIcon navigateTo={"Customize"}/>

            <View style={styles.logoContainer}>
                <Logo />
            </View>


            <MainBG />

            <MainContent />

        </View>
    );
}

const styles = StyleSheet.create({
    backgroundVideo: {
        position: 'absolute',
        top: 0,
        left: 0,
        width: windowWidth,
        height: windowHeight
    },
    logoContainer: {
        paddingTop: 20,
        alignItems: "center",
    }
});
