@@ -34,13 +34,17 @@ npm install react-native-wear-connectivity
3434
3535## Example of implementation
3636
37- Implementation of the above counter application.
37+ Example implementation of the above counter application for WearOS and Android Mobile .
3838
3939``` js
4040import React , { useEffect , useState } from ' react' ;
41- import { View , Text , Button } from ' react-native' ;
41+ import { View , Text , Button , StyleSheet } from ' react-native' ;
4242import { sendMessage , watchEvents } from ' react-native-wear-connectivity' ;
4343
44+ function App () {
45+ return < CounterScreen / > ;
46+ }
47+
4448function CounterScreen () {
4549 const [count , setCount ] = useState (0 );
4650
@@ -63,12 +67,34 @@ function CounterScreen() {
6367 };
6468
6569 return (
66- < View>
67- < Text > {count}< / Text >
70+ < View style= {styles .container }>
6871 < Button title= " increase counter" onPress= {sendMessageToWear} / >
72+ < Text style= {styles .count }> The count is {count}< / Text >
6973 < / View>
7074 );
7175}
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 ;
7298```
7399
74100## 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
99125You can find the instructions on how to build the example app for this project in the [ CONTRIBUTING] [ 43 ] section.
100126
101127[ 43 ] : https://github.com/fabOnReact/react-native-wear-connectivity/blob/main/CONTRIBUTING.md
102-
103128[ 20 ] : https://reactnative.dev/docs/next/signed-apk-android
104129[ 21 ] : https://developer.android.com/training/wearables/get-started/connect-phone
105130[ 22 ] : https://gist.github.com/assets/24992535/f6cb9f84-dc50-492b-963d-6d9e9396f451 ' wear os large round '
0 commit comments