When importing page to App.js it shows up blank

I am fairly new to React Native and am struggling to get this page to show up when importing it to App.js. It was working by itself, but once I tried to clean things up and put the code into its own file and just call upon it, things went south.

To break things down;

• Welcome.js contains the code of a "welcome page" I am trying to create
• App.js is the default file created that basically just calls Welcome
• and GetStartedButton is just the code of a button that is imported into Welcome but I dont think its necessary to provide.

When running App.js I am not receiving any errors, my screen is just white!

Thank you for any help, I appreciate it more than you know. I apologize for my ignorance! It wouldnt surprise me if it was just another typo.

I am sure my code is horrible btw! Assuming my styles were an interesting way to do things! Learning...

Welcome.js

import React, { Component } from 'react';
import { StyleSheet, Text, View, Button} from 'react-native';
import GetStarted from './src/components/GetStartedButton';


export default class Welcome extends Component {
    render() {
    return (
        <View style={styles.containerMain}>
        <View style={styles.containerClub}>
        <Text style={styles.title}>Word</Text>
        </View>
        
      <View style={styles.containerCaption}>   
        <Text style={styles.caption}> Words Words Words  </Text> 
      </View>
          
      <View style={styles.containerBottom}>   
      <GetStarted text='Get Started' color='#E50061' /> 
      </View>
      
     
    
    </View>

    );
    }
}

const styles = StyleSheet.create({
    containerMain: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'black',
    },

containerClub: {
    position: 'absolute',
    bottom: 288
  },

  containerCaption: {
    position: 'absolute',
    bottom: 250

  },
  /* To style the button and positioning*/
  containerBottom: {
    
    position: 'absolute',
    bottom: 100
  },
  /* To style "Word"*/
  title: {
    
    fontSize: 35,
    fontWeight: "bold",

  },
  /* To style "Words Words Words"*/
  caption:
  {
   
    fontSize: 16
  }
}
)

App.js

import React, { Component } from 'react';
import { StyleSheet, Text, View, Button} from 'react-native';
import Welcome from './src/pages/Welcome';


export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
       <Welcome/>
      </View>
    
   
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
   
  }
}
);

GetStartedButton.js

import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity  } from 'react-native';

const GetStarted = props => {
    const content = (
        <View style={[styles.button, {backgroundColor: props.color}]}>
            <Text style={styles.text}>{props.text}</Text>
        </View>
    )
    return <TouchableOpacity onPress={props.onPress}>{content}</TouchableOpacity>
}

const styles = StyleSheet.create({
    button: {
        padding: 20,
        width: 340,
        borderRadius: 8,
        alignItems: 'center',
    },
    text: {
        color: 'white',
        fontSize: 20,
        justifyContent: 'center',
    alignItems: 'center',
    }
});

export default GetStarted;