Custom styles aren't loading on expo

I'm trying to build an app with Expo using custom styling inside react components, but for some reason they don't load and the app loads with default styles.

I have followed many documentations on how to do it because I thought I wasn't doing it the right way, but nothing has worked.

Here is my code:

App.js

import React from 'react';
import { View } from 'react-native';
import Signup from './components/signup/Signup'

export default class App extends React.Component {
  render() {
    return (
      <View>
        <Signup />
      </View>
    );
  }
}

Signup.js

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import Svg, { Defs, G, Path, LinearGradient, Stop } from 'react-native-svg';

export default class Signup extends React.Component {
    render() {
        return (
            <View styles={styles.container}>
                <Svg width="60" height="60" viewBox="0 0 60 60">
                    <Defs>
                        <LinearGradient id="a" x1="50%" x2="50%" y1="99.9%" y2="-.1%">
                            <Stop offset="0%" stop-color="#AA8436" />
                            <Stop offset="100%" stop-color="#EFE296" />
                        </LinearGradient>
                    </Defs>
                    <G fill="none" fill-rule="evenodd">
                        <Path fill="#FFF" d="M40.126 2.038C28.607-2.512 15.51.716 7.34 10.118c-8.169 9.403-9.667 22.975-3.75 33.973a9.802 9.802 0 0 0 3.387 3.63c8.982 5.76 20.705 4.44 28.22-3.177a13.29 13.29 0 0 0 3.531-6.505.907.907 0 0 0-.134-.796.882.882 0 0 0-.712-.363.798.798 0 0 0-.647.302 11.758 11.758 0 0 1-16.773 0 18.272 18.272 0 0 1-5.226-12.709 18.484 18.484 0 0 1 5.774-13.312 27.742 27.742 0 0 1 8.461-5.552A26.625 26.625 0 0 1 39.778 3.6h.05a.798.798 0 0 0 .803-.652.807.807 0 0 0-.505-.909z" />
                        <Path fill="url(#a)" d="M55.76 16.014a9.646 9.646 0 0 0-3.322-3.578c-8.817-5.677-20.324-4.376-27.7 3.132a12.88 12.88 0 0 0-3.467 6.461.886.886 0 0 0 .44.956.855.855 0 0 0 1.026-.16c.135-.145.282-.278.44-.398a11.535 11.535 0 0 1 16.072.398c3.307 3.333 5.14 7.889 5.081 12.624-.05 4.949-2.099 9.658-5.668 13.022-4.981 4.775-11.573 7.425-18.418 7.405h-.049a.841.841 0 0 0-.803.699c-.071.397.142.79.51.942C31.22 62 44.085 58.809 52.104 49.529c8.02-9.28 9.482-22.669 3.662-33.514h-.006z" />
                    </G>
                </Svg>

                <Text styles={styles.slogan}>Créer, organiser vos
                formations et évenements.
                </Text>

                <TouchableOpacity styles={styles.button}>
                    <Text styles={styles.buttonText}>S’inscrire</Text>
                </TouchableOpacity>

                <Text styles={styles.loginAskText}>Vous êtes dèjà membre ?</Text>
                <Text styles={styles.loginText}>Se connecter</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#00ffff'
    },
    slogan: {
        width: 285,
        height: 64,
        fontFamily: "HelveticaNeue",
        fontSize: 24,
        fontWeight: "normal",
        fontStyle: "normal",
        lineHeight: 32,
        letterSpacing: 0,
        textAlign: "center",
        color: "#ffffff"
    },
    button: {
        width: 294,
        height: 58,
        borderRadius: 4,
        backgroundColor: "#ffffff",
        marginVertical: 10,
        paddingVertical: 12
    },
    buttonText: {
        fontFamily: "HelveticaNeue",
        fontSize: 16,
        fontWeight: "normal",
        fontStyle: "normal",
        letterSpacing: 0,
        textAlign: "center",
        color: "#22386c"
    },
    loginAskText: {
        width: 360,
        height: 640
    },
    loginText: {
        width: 102,
        height: 19,
        fontFamily: "HelveticaNeue",
        fontSize: 16,
        fontWeight: "bold",
        fontStyle: "normal",
        letterSpacing: 0,
        textAlign: "center",
        color: "#ffffff"
    }
});

I was expecting the custom styling to be applied, but no changes on default styles were made when I tried running the App on Web or on an Android phone. What has to be fixed, for the custom styling to be applied?

You are using styles instead of style.

Just change the props on the components and it should work.

For example:

<Component style={styles.customStyle}/>