If statement with props react native

For a project for my study I am working on a React Native project, but I am stuck. I want to give the prop 'Score' to Card.js and based on that score a color has to be defined; 'transparancyColor'. Currently, the props are passed from Home.js to Card.js and the transparencyColor is defined there. Is this a smart way, or do I have to do this at Home.js? And how?

The code of Card.js looks as follows:

import * as React from 'react';
import { StyleSheet, Text, View, Image, Platform, TouchableOpacity } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native'

const Card = (props) => {
    const navigation = useNavigation();
    Score = props.Score
    
    return(
        <TouchableOpacity onPress={() => navigation.navigate('Brand', {BrandName: props.BrandName, Score:props.Score })}>
            <View style={style.cardStyle}>
                <View style=>
                    <Image 
                    source={require('../assets/adidas.png')}
                    style={style.imageStyle}
                    />
                    <View style=>
                        <Text style={style.BrandName}>{props.BrandName}</Text>
                        <Text>transparancy:</Text>
                    </View>
                </View>
                <View style={style.transparancyScore}>
                    <View style={style.transparancyBox}>
                        <Text style={style.transparancyText}>{props.Score}%</Text>
                    </View>
                    <MaterialCommunityIcons style={style.arrowStyle}name="chevron-right" size={25}/>
                </View>
            </View>
        </TouchableOpacity>
    );
}
//If statement I was talking about
if (Score <= 100 && Score >= 70) {
    var transparancyColor = '#52D858'
} else if(Score < 70 &&  Score >= 50) {
    var transparancyColor = '#F2B05C'
} else {
    var transparancyColor = '#FAA09E'
} 

export default Card

const style = StyleSheet.create ({
    cardStyle: {
        paddingLeft: '5%',
        paddingTop: '5%',   
        justifyContent: 'space-between',
        flexDirection: 'row'
    },
    imageStyle: {
        resizeMode: 'contain',
        ...Platform.select({
            ios: {                      
                width: 55,
                height: 55,
            },
            android: {
                width: 70,
                height: 70
            }
        })
    },
    BrandName: {
        fontSize: 20,
        paddingBottom: '3%'
    },
    transparancyScore: {
        paddingTop: '7%',
        textAlign: 'center',
        flexDirection: 'row'
    },
    transparancyBox: {
        backgroundColor: '#ffffff',
        height: 20,
        borderRadius: 100,
        width: 50,
        shadowColor: transparancyColor,
        shadowOffset: {
            width: 0,
            height: 12,
        },
        shadowOpacity: 0.58 ,
        shadowRadius: 16,
        elevation: 24,
    },
    transparancyText: {
        color: transparancyColor,
        textAlign: 'center',
        fontSize: 12,
        paddingTop: '3%'
    },
    arrowStyle: {
        paddingLeft: '5%',
        marginRight: '1%'
    }
})

If anyone has a solution or possible fix for this, let me know!