nasi_boost_reactive_state_counter_with_hooks_react_native.ts

1import React from 'react';
2import { Text, View, Button } from 'react-native';
3import { useLocalService, Service } from '@nasi/boost';
4
5/**
6 * Define a service that manages local state logic.
7 */
8class CounterService extends Service {
9  public readonly state = {
10    count: 0,
11  };
12
13  public increment = () => {
14    this.setState({ count: this.state.count + 1 });
15  };
16
17  public decrement = () => {
18    this.setState({ count: this.state.count - 1 });
19  };
20}
21
22/**
23 * Quickstart Component demonstrating the use of the service.
24 */
25export const QuickstartExample: React.FC = () => {
26  const { state, increment, decrement } = useLocalService(CounterService);
27
28  return (
29    <View style={{ padding: 20, alignItems: 'center' }}>
30      <Text style={{ fontSize: 24 }}>Count: {state.count}</Text>
31      <View style={{ flexDirection: 'row', marginTop: 10 }}>
32        <Button title="+" onPress={increment} />
33        <Button title="-" onPress={decrement} />
34      </View>
35    </View>
36  );
37};
38
39export default QuickstartExample;