@@ -34,13 +34,17 @@ npm install react-native-wear-connectivity
34
34
35
35
## Example of implementation
36
36
37
- Implementation of the above counter application.
37
+ Example implementation of the above counter application for WearOS and Android Mobile .
38
38
39
39
``` js
40
40
import React , { useEffect , useState } from ' react' ;
41
- import { View , Text , Button } from ' react-native' ;
41
+ import { View , Text , Button , StyleSheet } from ' react-native' ;
42
42
import { sendMessage , watchEvents } from ' react-native-wear-connectivity' ;
43
43
44
+ function App () {
45
+ return < CounterScreen / > ;
46
+ }
47
+
44
48
function CounterScreen () {
45
49
const [count , setCount ] = useState (0 );
46
50
@@ -63,12 +67,34 @@ function CounterScreen() {
63
67
};
64
68
65
69
return (
66
- < View>
67
- < Text > {count}< / Text >
70
+ < View style= {styles .container }>
68
71
< Button title= " increase counter" onPress= {sendMessageToWear} / >
72
+ < Text style= {styles .count }> The count is {count}< / Text >
69
73
< / View>
70
74
);
71
75
}
76
+
77
+ const styles = StyleSheet .create ({
78
+ container: {
79
+ flex: 1 ,
80
+ alignItems: ' center' ,
81
+ justifyContent: ' center' ,
82
+ backgroundColor: ' #FDFDFD' ,
83
+ },
84
+ count: {
85
+ borderRadius: 3 ,
86
+ padding: 5 ,
87
+ backgroundColor: ' #9C9A9D' ,
88
+ textAlign: ' center' ,
89
+ textAlignVertical: ' center' ,
90
+ marginTop: 20 ,
91
+ color: ' white' ,
92
+ fontSize: 20 ,
93
+ fontWeight: ' 500' ,
94
+ },
95
+ });
96
+
97
+ export default App ;
72
98
```
73
99
74
100
## How to create a WearOS app using react-native
@@ -99,7 +125,6 @@ You can now build the app with `yarn android`. JS fast-refresh and the other met
99
125
You can find the instructions on how to build the example app for this project in the [ CONTRIBUTING] [ 43 ] section.
100
126
101
127
[ 43 ] : https://github.com/fabOnReact/react-native-wear-connectivity/blob/main/CONTRIBUTING.md
102
-
103
128
[ 20 ] : https://reactnative.dev/docs/next/signed-apk-android
104
129
[ 21 ] : https://developer.android.com/training/wearables/get-started/connect-phone
105
130
[ 22 ] : https://gist.github.com/assets/24992535/f6cb9f84-dc50-492b-963d-6d9e9396f451 ' wear os large round '
0 commit comments