export default class SampleApp extends Component {
  render() {
    return (
      <View style={styles.container}>
        <SurfaceView style={StyleSheet.absoluteFill}/>
        <PopupWindow />
      </View>
    )
  }
}

const styles = StyleSheet.create({
//   container: { //error style with flexbox
//     flex: 1,
//     backgroundColor: 'red'
//   },
//   container: { //error style with shadow + absolute
//       ...StyleSheet.absoluteFillObject,
//       shadowColor: 'black',
//   }
  container: StyleSheet.absoluteFillObject
})

export default class PopupWindow extends Component {
  state = {
    show: false
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({
        show: true
      })
    }, 3000)
  }
  render() {
    console.log('render ' + this.state.show)
    return this.state.show ? (
      <View style={StyleSheet.absoluteFill}>
        <View style={styles.container}>
          <TouchableWithoutFeedback onPress={() => {
              console.log('on click')
              this.setState({
                show: false
                }, () => setTimeout(() => this.setState({show: true}), 3000)
              )}
            }>
            <View>
              <Text style={styles.text}>
              "Hi a Text"
              </Text>
            </View>
          </TouchableWithoutFeedback>
        </View>
      </View>
    ) : null
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'transparent',
  },
  text: {
    color: 'white',
    width: 300,
    height: 240,
    textAlign: 'center',
    backgroundColor: 'orange',
    borderRadius: 10,
  }
})