/
App.js
105 lines (96 loc) · 2.39 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import React from 'react'
import {
StyleSheet,
Text,
View,
Image,
KeyboardAvoidingView,
ScrollView
} from 'react-native'
import { Speech, Constants } from 'expo'
import { TextInputMod } from './components/TextInputMod.js'
import { ImageMod } from './components/ImageMod.js'
import { Button } from './components/Button.js'
import { speechOptions } from './config/config'
export default class App extends React.Component {
/**
* "the right place to initialize state"
* @state-param {string} isTalking: flag, true if Expo.Speech is speaking, otherwise
* false.
**/
constructor() {
super()
this.state = { text: '' }
this.handleTalk = this.handleTalk.bind(this)
this.onChangeText = this.onChangeText.bind(this)
}
/**
* Function that invokes the text to speech api from expo sdk
* @param {string} text: a message to speech
**/
handleTalk() {
const { text } = this.state
text.length > 0 && Speech.speak(text, speechOptions)
}
/**
* Function that sets the text to speech
* @param {string} message: new value for text (state variable)
**/
onChangeText(message) {
this.setState({
text: message
})
}
render() {
return (
<KeyboardAvoidingView behavior="padding" style={styles.fullWidth}>
<View style={[styles.fullWidth, colors.background]}>
<View style={[styles.containerTitle]}>
<Text style={styles.title}>Text To Speech</Text>
</View>
<ScrollView contentContainerStyle={styles.scroll}>
<View style={styles.containerBody}>
<ImageMod />
<TextInputMod onChangeText={this.onChangeText} />
<Button onPress={this.handleTalk} />
</View>
</ScrollView>
</View>
</KeyboardAvoidingView>
)
}
}
const styles = StyleSheet.create({
fullWidth: {
flex: 1
},
horizontalCenter: {
alignItems: 'center'
},
containerBody: {
flex: 1,
marginTop: '15%',
marginBottom: '15%',
flexDirection: 'column',
justifyContent: 'space-between',
alignItems: 'center'
},
containerTitle: {
alignItems: 'center'
},
title: {
color: 'white',
fontSize: 40,
fontWeight: 'bold',
marginTop: Constants.statusBarHeight + 10
},
scroll: {
flexGrow: 1,
justifyContent: 'center'
}
})
const colors = StyleSheet.create({
background: {
backgroundColor: '#21A0A0'
}
})