Last active
March 29, 2020 19:42
-
-
Save cmnstmntmn/1ea85f3f47288d3e607002fc5d049e74 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* @format | |
*/ | |
import {AppRegistry} from 'react-native'; | |
import React from 'react'; | |
import Root from './Root'; | |
import {name as appName} from './app.json'; | |
import meiosis from 'meiosis-setup'; | |
import merge from 'mergerino'; | |
const {states, update, actions} = meiosis.mergerino.setup({ | |
stream: meiosis.simpleStream, | |
merge: merge, | |
app: { | |
initial: {counter: 0}, | |
Actions: update => ({ | |
increment: () => | |
update(state => ({...state, counter: state.counter + 1})), | |
}), | |
services: [], | |
}, | |
}); | |
const App = meiosis.react.setup({React, Root}); | |
const app = () => <App states={states} update={update} actions={actions} />; | |
AppRegistry.registerComponent(appName, () => app); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { | |
Button, | |
SafeAreaView, | |
ScrollView, | |
StatusBar, | |
StyleSheet, | |
Text, | |
View, | |
} from 'react-native'; | |
import { | |
Colors, | |
DebugInstructions, | |
Header, | |
LearnMoreLinks, | |
ReloadInstructions, | |
} from 'react-native/Libraries/NewAppScreen'; | |
import React from 'react'; | |
/** | |
* Sample React Native App | |
* https://github.com/facebook/react-native | |
* | |
* @format | |
* @flow strict-local | |
*/ | |
const Root = ({state, actions, update}) => { | |
return ( | |
<> | |
<StatusBar barStyle="dark-content" /> | |
<SafeAreaView> | |
<ScrollView | |
contentInsetAdjustmentBehavior="automatic" | |
style={styles.scrollView}> | |
<Header /> | |
{global.HermesInternal == null ? null : ( | |
<View style={styles.engine}> | |
<Text style={styles.footer}>Engine: Hermes</Text> | |
</View> | |
)} | |
<View style={styles.body}> | |
<View style={styles.sectionContainer}> | |
<Text style={styles.sectionTitle}>{state.counter}</Text> | |
<Button title="Increment" onPress={actions.increment} /> | |
</View> | |
</View> | |
</ScrollView> | |
</SafeAreaView> | |
</> | |
); | |
}; | |
const styles = StyleSheet.create({ | |
scrollView: { | |
backgroundColor: Colors.lighter, | |
}, | |
engine: { | |
position: 'absolute', | |
right: 0, | |
}, | |
body: { | |
backgroundColor: Colors.white, | |
}, | |
sectionContainer: { | |
marginTop: 32, | |
paddingHorizontal: 24, | |
}, | |
sectionTitle: { | |
fontSize: 24, | |
fontWeight: '600', | |
color: Colors.black, | |
}, | |
sectionDescription: { | |
marginTop: 8, | |
fontSize: 18, | |
fontWeight: '400', | |
color: Colors.dark, | |
}, | |
highlight: { | |
fontWeight: '700', | |
}, | |
footer: { | |
color: Colors.dark, | |
fontSize: 12, | |
fontWeight: '600', | |
padding: 4, | |
paddingRight: 12, | |
textAlign: 'right', | |
}, | |
}); | |
export default Root; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment