using custom fonts to style Text

I am building a component. I am quite new to styling.
I want to use a font (its already been setup for use) so i want to use that font inside my react native program.

The font is Lora Semibold. And using it inside a view, its supposed to be White and Bold up to size 36. Its just black and does not show the Expanded font, it just shows the black font and its default, real small.

My code is looking thus :

    import {Image, StyleSheet, Text, View} from 'react-native';
    import React from 'react';
    import {TouchableOpacity} from 'react-native';
    
    const NavigateNextPage = () => {
        navigation.navigate('WalkThruPage3');
      };
    
    const WalkthruBottom1 = () => {
      return (
        <View style={styles.container}>
        <View style={{flex:1}}>
        <Text styles={{fontFamily:'Lora-SemiBold', fontSize:24, color:'#FFF'}}>Lets get Started</Text>
        </View>
          <TouchableOpacity
            onPress={() => {
              NavigateNextPage();
            }}
            style={{
              position: 'absolute',
              backgroundColor: '#DF2A54',
              borderRadius: 150,
              height: 100,
              width: 100,
              bottom: 50,
              right: 30,
              zIndex: 1,
            }}>
            <Image
              source={require('../../assets/images/LoginArrow.png')}
              style={styles.arrowImage}
            />
          </TouchableOpacity>
        </View>
      );
    };

export default WalkthruBottom1;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#320F3B',
  },
  homeText: {
    fontFamily:"Lora-SemiBold",
    fontSize: 50,
    color: '#FFF'
  },
  arrowImage:{
    height:50,
    width:50,
    top:25,
    alignSelf: 'center'
  }
});

I want the Code on the Walk thru bottom "Lets get started" to use the font, how do I go about this?

From what I can tell, maybe you made a mistake in your code when you are applying styles to the '<Text>' component. The proper way for styling is 'style', not 'styles'.

• From:
  <Text styles={{fontFamily:'Lora-SemiBold', fontSize:24, color:'#FFF'}}>Lets get Started</Text>
• To: <Text style={{ fontFamily: 'Lora-SemiBold', fontSize: 24, color: '#FFF' }}>Lets get Started</Text>

If applying the correct styling directly to the <Text> component doesn't seem to change the font, there might be a few reasons for it. Here are some troubleshooting steps you can try:

Check Font Availability: Make sure that the 'Lora-SemiBold' font is correctly installed and available for use in your React Native project. You can double-check the font name and whether it's properly linked.

Font File Format: Verify that the font file format is supported by React Native. Common font formats like .ttf (TrueType Font) are generally supported.

Clear Cache: Clear the Metro bundler cache by running the following command in your project directory: npm start -- --reset-cache

Test with Other Fonts: Try using a different font in your app temporarily to see if the issue is specific to the 'Lora-SemiBold' font or if it's a more general problem.

If none of these steps resolve the issue, you might need to provide more specific details about your project setup.