.tsx to .js

 /**

https://reactnative.dev/docs/environment-setup?guide=native

 * Sample React Native App

 * https://github.com/facebook/react-native

 * npm i -g npx

 * npx react-native run-android

 * @format

 */

import * as React from 'react';

import {

  SafeAreaView,

  ScrollView,

  StatusBar,

  StyleSheet,

  Text,

  View,

  TextInput,Button, Alert

} from 'react-native';

import {

  Colors,

  DebugInstructions,

  Header,

  LearnMoreLinks,

  ReloadInstructions,

} from 'react-native';    

 //const App: () => Node = () => {

  const App=() => {  

 const [bil1, setBil1] = React.useState(null);

  const [bil2, setBil2] = React.useState(null);

  const [hasil, setHasil] = React.useState(null);

  const [hasil2, setHasil2] = React.useState(null);

  const TAMBAH = () => {

    let val = (Number(bil1) + Number(bil2)).toFixed(1);

    let val2='Proses Tambah Antara '+bil1+' dengan '+bil2 +' menghasilkan bilangan '+val;

    Alert.alert(val2);

    setHasil(val);

    setHasil2(val2);

  };

  const KURANG = () => {

    let val = (Number(bil1) - Number(bil2)).toFixed(1);

    let val2='Proses Kurang Antara '+bil1+' dengan '+bil2 +' menghasilkan bilangan '+val;

    Alert.alert(val2);

    setHasil(val);

    setHasil2(val2);

  };

  const KALI = () => {

    let val = (Number(bil1) * Number(bil2)).toFixed(1);

    let val2='Proses Kali Antara '+bil1+' dengan '+bil2 +' menghasilkan bilangan '+val;

    Alert.alert(val2);

    setHasil(val);

    setHasil2(val2);

  };

  const BAGI = () => {

    let val = (Number(bil1) / Number(bil2)).toFixed(1);

    let val2='Proses Bagi Antara '+bil1+' dengan '+bil2 +' menghasilkan bilangan '+val;

    Alert.alert(val2);

    setHasil(val);

    setHasil2(val2);

  };

  const PANGKAT = () => {

    let val = (Math.pow(Number(bil1), Number(bil2))).toFixed(1);

    let val2='Proses Pangkat Antara '+bil1+' dengan '+bil2 +' menghasilkan bilangan '+val;

    Alert.alert(val2);

    setHasil(val);

    setHasil2(val2);

  };

  const MOD = () => {

    let val = (Number(bil1) % Number(bil2)).toFixed(1);

    let val2='Proses MOD Antara '+bil1+' dengan '+bil2 +' menghasilkan bilangan '+val;

    Alert.alert(val2);

    setHasil(val);

    setHasil2(val2);

  };

  const SIN = () => {

    let deg= (Number(bil1) + Number(bil2));

    //let bil = rad * 180 / Math.PI;

    let bil = (deg * Math.PI) / 180.0;

    let val = (Math.sin(bil)).toFixed(1);

    let val2='Proses SINUS '+deg+' menghasilkan bilangan '+val;

    Alert.alert(val2);

    setHasil(val);

    setHasil2(val2);

  };

  const CLEAR = () => {

    setBil1("");

    setBil2("");

    setHasil("");

  };

 return (

 <View>  

      <TextInput

          style={styles.input}

          onChangeText={setBil1}

          value={bil1}

          placeholder="Bilangan 1"

          keyboardType="decimal-pad"

        />

    <TextInput

          style={styles.input}

          onChangeText={setBil2}

          value={bil2}

          placeholder="Bilangan 2"

          keyboardType="decimal-pad"

        />

         <View style={styles.buttonContainer}>  

          <Button  title="+" onPress={TAMBAH} containerStyle={styles.button}/>

          <Button  title="-" onPress={KURANG} containerStyle={styles.button}/>

          <Button  title="x" onPress={KALI} containerStyle={styles.button}/>

          <Button  title=":" onPress={BAGI} containerStyle={styles.button}/>

          <Button  title="^" onPress={PANGKAT} containerStyle={styles.button}/>

          <Button  title="%" onPress={MOD} containerStyle={styles.button}/>

          <Button  title="$" onPress={SIN} containerStyle={styles.button}/>

      </View>  

          <Text style={styles.title}>

             {hasil2}

          </Text>

    <TextInput

          style={styles.input}

          value={hasil}

          placeholder="Hasil"

        />

     

    <Button title="C L E A R" onPress={CLEAR}></Button>

   

 </View>

  );

}

const styles = StyleSheet.create({

  buttonContainer: {

    height: 60,

    flexDirection: 'row',

    justifyContent: 'center',

    alignItems: 'center',

    backgroundColor: 'red'

  },

  input: {

    height: 40,

    margin: 12,

    borderWidth: 1,

    padding: 10,

  },

  title: {

    textAlign: 'center',

    marginVertical: 8,

  },

  button: {

    flex: 2,

    padding: 12,

    backgroundColor: 'steelblue',

    alignSelf: 'stretch',

    justifyContent: 'center',

  },

});

export default App;