Scribd
Upload
1 views8 pages

React Experiments

Uploaded by

chaya02
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
1 views8 pages

React Experiments

Uploaded by

chaya02
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

Experiment No-01 Basic Concepts of React

import React, { Component } from 'react';


import { AppRegistry, Text, View, StyleSheet, Image,
TouchableHighlight, ImageBackground } from 'react-native';
import Constants from 'expo-constants';

export default class App extends Component {

state = {
backgroundToDisplay: ['',
'http://papers.co/wallpaper/papers.co-me72-dusk-red-new-york-skyline-
city-34-iphone6-plus-wallpaper.jpg',
'https://spliffmobile.com/download/new-york-5896.jpg',
'https://images.fineartamerica.com/images/artworkimages/mediumlarge/1/
new-york-city-empire-state-building-sunset-christopher-arndt.jpg'],
message: ['', 'Good morning!', 'Good afternoon!', 'Good
evening!'],
index: 0,
}

morningChosen = () => {
this.setState({
index: 1
})
}

afternoonChosen = () => {
this.setState({
index: 2,
})
}

eveningChosen = () => {
this.setState({
index: 3,
})
}

render() {
return (
<View style={styles.container}>
<ImageBackground
style={styles.background}

source={this.state.backgroundToDisplay[this.state.index]}
>
<TouchableHighlight
onPress={this.morningChosen}
>
<View style={styles.buttonView}>
<Text style={styles.buttonText}>
Good morning!
</Text>
</View>
</TouchableHighlight>

<TouchableHighlight
onPress={this.afternoonChosen}
>
<View style={styles.buttonView}>
<Text style={styles.buttonText}>
Good afternoon!
</Text>
</View>
</TouchableHighlight>

<TouchableHighlight
onPress={this.eveningChosen}
>
<View style={styles.buttonView}>
<Text style={styles.buttonText}>
Good evening!
</Text>
</View>
</TouchableHighlight>

<View>
<Text style={styles.messageText}>
{this.state.message[this.state.index]}
</Text>
</View>
</ImageBackground>
</View>
);
}
}

const styles = StyleSheet.create({


container: {
flex: 1,
},
background: {
flex: 1,
},
buttonView: {
height: 30,
width: 100,
backgroundColor: 'black',
justifyContent: 'center',
marginBottom: 3,
},
buttonText: {
fontSize: 10,
color: 'white',
textAlign: 'center',
},
messageText: {
fontSize: 30,
color: 'white',
textAlign: 'center'
}
});

Experiment No-02 Calculator App

import * as React from 'react';


import {
Text,
View,
StyleSheet,
Button,
TextInput,
TouchableOpacity,
Image,ExpoFont
} from 'react-native';
import * as Speech from 'expo-speech';
import { Header } from 'react-native-elements';
import logo from './assets/icon.png'

export default class App extends React.Component {


constructor() {
super();
this.state = {
name: '',
};
}
speak = () => {
var thingToSay = this.state.name;
this.state.name === ''
? alert('Please Enter a Word 😐')
: Speech.speak(thingToSay);
};

render() {
return (
<View style={styles.textContainer1}>
<Header
backgroundColor={"#9CE47C"}
centerComponent={{
text: "Text To Speech Converter",
style: { color: "black", fontSize: 15, fontWeight: 700 },
}}
/>

<Image style={styles.imageIcon} source={logo} />

<Text style={styles.text2}> Enter The Word </Text>


<TextInput
style={styles.inputBox}
onChangeText={(text) => {
this.setState({ name: text });
}}
value={this.state.text}
/>

<View>
<TouchableOpacity style={styles.button} onPress={this.speak}>
<Text style={styles.text2}> Tap To Hear Speech 🗣 </Text>
</TouchableOpacity>
</View>
</View>
);
}
}

const styles = StyleSheet.create({


inputBox: {
marginTop: 20,
width: "80%",
alignSelf: "center",
height: 40,
textAlign: "center",
borderWidth: 4,
},
textContainer1: {
backgroundColor: "#FFFFFF",
justifyContent: "center",
},

text2: {
color: "black",
fontSize: 20,
marginTop: 5,
textAlign: "center",
alignSelf: "center",
fontWeight: "bold",
},

button: {
padding: 20,
fontSize: 20,
textAlign: "center",
backgroundColor: "#9CE47C",
marginTop: 80,
borderRadius: 50,
width: "80%",
alignSelf: "center",
height: 80,
},
imageIcon: {
width: 150,
height: 150,
marginTop: 20,
marginLeft: "25%",
},
});
Experiment No-03 Text to Speech App

import * as React from 'react';


import {
Text,
View,
StyleSheet,
Button,
TextInput,
TouchableOpacity,
Image,ExpoFont
} from 'react-native';
import * as Speech from 'expo-speech';
import { Header } from 'react-native-elements';
import logo from './assets/icon.png'

export default class App extends React.Component {


constructor() {
super();
this.state = {
name: '',
};
}

speak = () => {
var thingToSay = this.state.name;
this.state.name === ''
? alert('Please Enter a Word 😐')
: Speech.speak(thingToSay);
};

render() {
return (
<View style={styles.textContainer1}>
<Header
backgroundColor={"#9CE47C"}
centerComponent={{
text: "Text To Speech Converter",
style: { color: "black", fontSize: 15, fontWeight: 700 },
}}
/>
<Image style={styles.imageIcon} source={logo} />

<Text style={styles.text2}> Enter The Word </Text>


<TextInput
style={styles.inputBox}
onChangeText={(text) => {
this.setState({ name: text });
}}
value={this.state.text}
/>

<View>
<TouchableOpacity style={styles.button} onPress={this.speak}>
<Text style={styles.text2}> Tap To Hear Speech 🗣 </Text>
</TouchableOpacity>
</View>
</View>
);
}
}

const styles = StyleSheet.create({


inputBox: {
marginTop: 20,
width: "80%",
alignSelf: "center",
height: 40,
textAlign: "center",
borderWidth: 4,
},

textContainer1: {
backgroundColor: "#FFFFFF",
justifyContent: "center",
},

text2: {
color: "black",
fontSize: 20,
marginTop: 5,
textAlign: "center",
alignSelf: "center",
fontWeight: "bold",
},

button: {
padding: 20,
fontSize: 20,
textAlign: "center",
backgroundColor: "#9CE47C",
marginTop: 80,
borderRadius: 50,
width: "80%",
alignSelf: "center",
height: 80,
},
imageIcon: {
width: 150,
height: 150,
marginTop: 20,
marginLeft: "25%",
},
});

You might also like