Skip to content

Instantly share code, notes, and snippets.

@alejandropaciotti
Created January 25, 2019 12:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alejandropaciotti/79306ae2615e0e71a6d67d207ddbe6ee to your computer and use it in GitHub Desktop.
Save alejandropaciotti/79306ae2615e0e71a6d67d207ddbe6ee to your computer and use it in GitHub Desktop.
Fixed a = in line 73
// @flow
import * as React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { NavigationScreenProps, NavigationEventSubscription } from 'react-navigation';
type Props = {
onNewTotal: (total: number) => void,
};
type State = {
entries: number[],
};
class HomeScreen extends React.PureComponent<Props & NavigationScreenProps<{}>, State> {
focusSubscription: NavigationEventSubscription | null = null;
state: State = {
isVisible: false,
entries: null,
};
componentDidMount() {
this.focusSubscription = this.props.navigation.addListener('willFocus', this.onFocus);
}
onFocus() {
this.setState({ isVisible: true });
this.fetch();
}
async fetch() {
const entries = this.loadData();
this.setState({ entries });
this.notify();
}
loadData() {
return new Promise((resolve) => window.setTimeout(() => resolve([1, 2, 3]), 1500));
}
notify() {
let total = 0;
for (let i = 0; i < this.state.entries.length; i++) {
total += this.state.entries[i];
}
this.props.onNewTotal(total);
}
render() {
const entries = this.state.entries;
const isVisible = this.state.isVisible;
const containerStyles = {
...styles.container,
...(isVisible ? styles.containerVisible : {}),
};
if (!isVisible) return <View styles={ containerStyles } />;
return (
<View styles={ containerStyles }>
My pretty view:
<Text styles={ [styles.title] }>
Entries:
<View>
{
entries.forEach((entry) => <Text>{ entry }</Text>)
}
</View>
</Text>
</View>
);
}
}
interface Styles {
container: ViewStyle,
title: TextStyle,
};
const styles = StyleSheet.create<Styles>({
container: {
borderRadius: 4,
borderWidth: 0.5,
borderColor: 'red',
backgroundColor: 'silver',
color: 'pink',
opacity: 0.5,
},
containerVisible: {
opacity: 1,
},
title: {
fontSize: '19rem',
fontWeight: 'bold',
margin: '10 0 10 15',
},
});
export default HomeScreen;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment