Skip to content

Commit 7c45dce

Browse files
committed
update readme example
1 parent d49c22f commit 7c45dce

File tree

1 file changed

+30
-5
lines changed

1 file changed

+30
-5
lines changed

README.md

Lines changed: 30 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -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
4040
import React, { useEffect, useState } from 'react';
41-
import { View, Text, Button } from 'react-native';
41+
import { View, Text, Button, StyleSheet } from 'react-native';
4242
import { sendMessage, watchEvents } from 'react-native-wear-connectivity';
4343

44+
function App() {
45+
return <CounterScreen />;
46+
}
47+
4448
function 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
99125
You 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

Comments
 (0)