Why isn't onPress calling the function?

Question

Entirely new to React Native. The problem isn't with the actual logic of the code. Tested it and it worked in a browser. Could it be with where code logic is placed inside render()? App doesn't render at all with it outside render(). Or is it because of where this.setState is?

[More Details. A lot more details. More Details. A lot more details. More Details. A lot more details. More Details. A lot more details. More Details. A lot more details. More Details. A lot more details. More Details. A lot more details. More Details. A lot more details. More Details. A lot more details.]

import React from 'react';
import type {Node} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  Button,
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';




class App extends React.Component{


constructor(props) {
super(props);
this.state= {text: 'Lorem Ipsum admoniso'}
}



render() {


  // dataset for username 


const alpha= ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];

const num= ['1','2','3','4','5','6','7','8','9','0'];


var counter = 0;
var Username;

// determine random length of the username

function UNlength() {
var UNlength = Math.random() *10;
UNlength = UNlength.toFixed(0);
if (UNlength == 0){UNlength = 1}
else {UNlength = UNlength};
return UNlength;}

var varUNlength = UNlength();
// function GenUsernameFn(){

// JS LOGICCCCCC

function UsernameFn(){


// 

  if (arguments.length == 0) {

// generate random nums as pickers

var PickerN = Math.random() * 10;
PickerN = PickerN.toFixed(0);


var PickerA = Math.random() * 26;
PickerA = PickerA.toFixed(0);

var PickerG = Math.random() * 10;
PickerG = PickerG.toFixed(0);



// Pickers for the first character in "Username"

var PickerUN = Math.random() * 10;
PickerUN = PickerUN.toFixed(0);

var PickerUA = Math.random() * 26;
PickerUA = PickerUA.toFixed(0);

var PickerUG = Math.random() * 10;
PickerUG = PickerUG.toFixed(0);


// choose randomly btw num and alpha. If Math.random 
// is an even num, option = alpha. If odd num, option = num

if (PickerG % 2 == 0) {var Chosen = num[PickerN];} else {var Chosen = alpha[PickerA];}

if (PickerUG % 2 == 0) { Username = num[PickerUN];} else { Username = alpha[PickerUA];}



//append each new choice to a string of previous choices
//when string = UNlength <= 10 chosen ranbdomly above, stop recursion.

// 'Username' declaration outside scope to allow loop access

Username = String(Username) + String(Chosen);
while (Username.length < varUNlength){UsernameFn(Username);}
}

else {
// algo for if Username is pre-defined 
// Pickers too

var PickerPN = Math.random() * 10;
PickerPN = PickerPN.toFixed(0);

var PickerPA = Math.random() * 26;
PickerPA = PickerPA.toFixed(0);

var PickerPG = Math.random() * 10;
PickerPG = PickerPG.toFixed(0);


if (PickerPG % 2 == 0) {var PickedNA =num[PickerPN];} else {var PickedNA = alpha[PickerPA];}

Username = String(Username) + String(PickedNA);
}

 while (Username.length < varUNlength){UsernameFn(Username);}
function Output(){
this.setState({text: {Username} });

}

} 


// actual react native

return (

    <View>

    <Text style={styles.TextCSS}>
{this.state.text}
    </Text>

<Button
  onPress={()=> UsernameFn() } 
  title="Click"
  color="#841584"
  accessibilityLabel="Learn more about this purple button"
/>  



    </View>
)
}  

}