46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import { NewAppScreen } from '@react-native/new-app-screen'
|
|
import { useEffect, useState } from 'react'
|
|
import { StatusBar, Text, StyleSheet, useColorScheme, View } from 'react-native'
|
|
import { NativeEventEmitter, NativeModules } from 'react-native'
|
|
|
|
const { Emitter } = NativeModules
|
|
|
|
import { requireNativeComponent } from 'react-native'
|
|
import type { StyleProp, ViewStyle } from 'react-native'
|
|
type CustomButtonProps = {
|
|
style?: StyleProp<ViewStyle>
|
|
}
|
|
const CustomButton = requireNativeComponent<CustomButtonProps>('CustomButton')
|
|
|
|
export default function App() {
|
|
const isDarkMode = useColorScheme() === 'dark'
|
|
const [message, setMessage] = useState(null)
|
|
|
|
useEffect(() => {
|
|
const emitter = new NativeEventEmitter(Emitter);
|
|
const subscription = emitter.addListener('onMessage', (event) => {
|
|
if (event?.message) {
|
|
setMessage(event.message)
|
|
}
|
|
})
|
|
|
|
return () => {
|
|
subscription.remove()
|
|
};
|
|
}, [])
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
|
|
<Text>{message ?? 'Waiting for message...'}</Text>
|
|
<CustomButton style={{ width: 200, height: 200 }} />
|
|
<NewAppScreen templateFileName="App.tsx" />
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
})
|