-
Notifications
You must be signed in to change notification settings - Fork 2
/
App.tsx
141 lines (130 loc) · 3.63 KB
/
App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
*/
import React, { useEffect, useState } from 'react';
import type { PropsWithChildren } from 'react';
import './src/styles/global.css';
import tw from 'tailwind-react-native-classnames';
import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
useColorScheme,
View,
NativeEventEmitter,
NativeModules,
} from 'react-native';
import {
Colors,
DebugInstructions,
Header,
LearnMoreLinks,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
type SectionProps = PropsWithChildren<{
title: string;
}>;
function Section({ children, title }: SectionProps): React.JSX.Element {
const isDarkMode = useColorScheme() === 'dark';
return (
<View style={styles.sectionContainer}>
<Text style={tw`text-3xl font-black text-red-600`}>{title}</Text>
<Text
style={[
styles.sectionDescription,
{
color: isDarkMode ? Colors.light : Colors.dark,
},
]}>
{children}
</Text>
</View>
);
}
function App(): React.JSX.Element {
const isDarkMode = useColorScheme() === 'dark';
const [screenEvent, setScreenEvent] = useState('No Event');
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
useEffect(() => {
const { ScreenReceiver } = NativeModules;
const eventEmitter = new NativeEventEmitter(ScreenReceiver);
const subscription = eventEmitter.addListener('ScreenEvent', (event) => {
console.log(`Screen Event Received: ${event}`);
setScreenEvent(event); // Update state based on screen event
});
return () => {
subscription.remove();
};
}, []);
return (
<SafeAreaView style={backgroundStyle}>
<StatusBar
barStyle={isDarkMode ? 'light-content' : 'dark-content'}
backgroundColor={backgroundStyle.backgroundColor}
/>
<ScrollView contentInsetAdjustmentBehavior="automatic" style={backgroundStyle}>
<Header />
<View style={tw`flex-1 items-center justify-center`}>
{/* Dynamic UI based on screen state */}
{screenEvent === 'SCREEN_OFF' ? (
<Text style={tw`text-2xl font-bold text-red-500 mt-4`}>Screen is OFF</Text>
) : screenEvent === 'SCREEN_ON' ? (
<Text style={tw`text-2xl font-bold text-green-500 mt-4`}>Screen is ON</Text>
) : (
<Text style={tw`text-lg text-gray-600 mt-4`}>Waiting for Screen Event...</Text>
)}
</View>
<View
style={{
backgroundColor: isDarkMode ? Colors.black : Colors.white,
}}>
<Section title="Step One">
Edit{' '}
<Text
style={tw`
font-bold
text-blue-600
`}>
App.tsx, Ap
</Text>{' '}
to change this screen and then come back to see your edits.
</Section>
<Section title="See Your Changes">
<ReloadInstructions />
</Section>
<Section title="Debug">
<DebugInstructions />
</Section>
<Section title="Learn More">Read the docs to discover what to do next:</Section>
<LearnMoreLinks />
</View>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
},
highlight: {
fontWeight: '700',
},
});
export default App;