1- import React , { useEffect } from 'react' ;
2- import { StyleSheet , Text , View , Button } from 'react-native' ;
1+ import { useEffect } from 'react' ;
2+ import { StyleSheet , Text , View , Button , TextInput } from 'react-native' ;
3+ import { useStore } from '@callstack/brownie' ;
34import {
45 createNativeStackNavigator ,
56 type NativeStackScreenProps ,
67} from '@react-navigation/native-stack' ;
78import ReactNativeBrownfield from '@callstack/react-native-brownfield' ;
89import { NavigationContainer } from '@react-navigation/native' ;
10+ import './BrownfieldStore.brownie' ;
911
1012const getRandomValue = ( ) => Math . round ( Math . random ( ) * 255 ) ;
1113const getRandomTheme = ( ) => {
@@ -26,6 +28,8 @@ type Props = NativeStackScreenProps<RootStackParamList, 'Home'>;
2628
2729function HomeScreen ( { navigation, route } : Props ) {
2830 const colors = route . params ?. theme || getRandomTheme ( ) ;
31+ const [ counter , setState ] = useStore ( 'BrownfieldStore' , ( s ) => s . counter ) ;
32+ const [ user ] = useStore ( 'BrownfieldStore' , ( s ) => s . user ) ;
2933
3034 useEffect ( ( ) => {
3135 const unsubscribe = navigation . addListener ( 'focus' , ( ) => {
@@ -37,10 +41,29 @@ function HomeScreen({ navigation, route }: Props) {
3741
3842 return (
3943 < View style = { [ styles . container , { backgroundColor : colors . primary } ] } >
40- < Text style = { [ styles . text , { color : colors . secondary } ] } >
44+ < Text style = { [ styles . title , { color : colors . secondary } ] } >
4145 React Native Screen
4246 </ Text >
4347
48+ < Text style = { [ styles . text , { color : colors . secondary } ] } >
49+ Count: { counter }
50+ </ Text >
51+
52+ < TextInput
53+ style = { styles . input }
54+ value = { user . name }
55+ onChangeText = { ( text ) =>
56+ setState ( ( prev ) => ( { user : { ...prev . user , name : text } } ) )
57+ }
58+ placeholder = "User name"
59+ />
60+
61+ < Button
62+ onPress = { ( ) => setState ( ( prev ) => ( { counter : prev . counter + 1 } ) ) }
63+ color = { colors . secondary }
64+ title = "Increment"
65+ />
66+
4467 < Button
4568 onPress = { ( ) => {
4669 navigation . push ( 'Home' , {
@@ -87,9 +110,22 @@ const styles = StyleSheet.create({
87110 justifyContent : 'center' ,
88111 alignItems : 'center' ,
89112 } ,
90- text : {
113+ title : {
91114 fontSize : 30 ,
92115 fontWeight : 'bold' ,
93116 margin : 10 ,
94117 } ,
118+ text : {
119+ fontSize : 16 ,
120+ margin : 5 ,
121+ } ,
122+ input : {
123+ borderWidth : 1 ,
124+ borderColor : '#ccc' ,
125+ borderRadius : 8 ,
126+ padding : 10 ,
127+ width : 200 ,
128+ marginVertical : 10 ,
129+ backgroundColor : '#fff' ,
130+ } ,
95131} ) ;
0 commit comments