What is Styling

// {} is a JS Function, () is a JSX Object

const App = () => {
    // ES6 syntax
    const { textStyle, abd } = styles;
    const a1 = styles.textStyle;
    const a2 = styles['abd'];
    const {textStyle:{sub}} = styles;
    const {textStyle:{a:{b}}} = styles;

    // Text is primitive component, style accept Json Object
    return (
        <Text style={abd}>Albums!</Text>
        // <Text style={a1}>Albums!</Text>
        // <Text style={a2}>Albums!</Text>
        // <Text style={sub}>Albums!</Text>
        // <Text style={b}>Albums!</Text>
    ) 
};

const styles = {
    //  return JSON Object, used to define the CSS Style
    textStyle:{ // textStyle is the properties 
        fontSize:20,
        sub:{
            fontSize:50
        }, 
        a:{
            b:{
                fontSize:60
            }
        }
    },
    abd:{
        fontSize:30
    }
};