Skip to content

Instantly share code, notes, and snippets.

@sainthkh
Created May 22, 2019 07:28
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save sainthkh/4a2f2c32ec8d5e5bce6ff7c1c8af7d9d to your computer and use it in GitHub Desktop.
import React, {useReducer} from 'react';
import {StyleSheet, Text, Button, View} from 'react-native';
export default function App() {
let [state, dispatch] = useReducer(function (state, action) {
switch(action.type) {
case 'increment': return { count: state.count + 1 };
case 'decrement': return { count: state.count - 1 };
default: throw new Error();
}
}, { count: 0 });
return (
<View style={styles.container}>
<Text style={styles.welcome}>Simple Counter</Text>
<Text style={styles.instructions}>{state.count}</Text>
<View style={styles.buttonsWrap}>
<View style={styles.buttons}>
<Button onPress={() => dispatch({ type: 'increment'})} title="Inc" />
<Button onPress={() => dispatch({ type: 'decrement'})} title="Dec" />
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
buttonsWrap: {
height: 35,
},
buttons: {
flex: 1,
flexDirection: 'row',
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment