import React, {useState} from 'react';
import {StyleSheet, Text, View, Button, Linking} from 'react-native';
import PlayScreen from './PlayScreen';

export default function App() {
const [playMode, setPlayMode] = useState(false);
return playMode ? (
<PlayScreen />
) : (
<View style={styles.container}>
<Text style={styles.header}>Rock Paper Scissors</Text>
<Text style={styles.emoji}></Text>
<View style={styles.btnContainer}>
<Button
onPress={() => {
setPlayMode(true);
}
title="Play"
/>
</View>
<Text
style={styles.srcCode}
onPress={() =>
Linking.openURL(
'https://github.com/ShivamJoker/RN-Rock-Paper-Scissors',
)
}>
Source Code
</Text>
</View>
);
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
header: {
fontSize: 28,
margin: 10,
},
emoji: {
fontSize: 60,
},
btnContainer: {
marginTop: 60,
width: 240,
},
srcCode: {
position: 'absolute',
bottom: 20,
color: '#0069c0',
textDecorationLine: 'underline',
},
});
import React, {useState, useEffect} from 'react';
import {StyleSheet, Text, View, Button, Image} from 'react-native';

const scissors = require('./signs/scissors.png');
const paper = require('./signs/paper.png');
const rock = require('./signs/rock.png');

const bgColors = ['#1abc9c', '#3498db', '#9b59b6'];

//get a random emoji
const randomRPSEmo = () => {
//rock paper scissors emoji
const emojis = [scissors, rock, paper];
const random = Math.floor(Math.random() * 3);
return emojis[random];
};

export default function PlayScreen() {
const [counter, setCounter] = useState(1);

useEffect(() => {
//check for greator then stop the loop
if (counter > 3) return;

const timer = setTimeout(() => {
setCounter(previous => previous + 1);
}, 500);

return () => clearTimeout(timer);
}, [counter]);

return (
<View style={styles.container}>
{counter > 3 ? (
<>
<Image style={styles.sign} source={randomRPSEmo()} />
<View style={styles.btnContainer}>
<Button
onPress={() => {
setCounter(1);
}
title="Play Again"
/>
</View>
</>
) : (
<View
style={StyleSheet.compose(
styles.counterContainer,
{backgroundColor: bgColors[counter - 1]},
)}>
<Text style={styles.counter}>{counter}</Text>
</View>
)}
</View>
);
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
counter: {
fontSize: 150,
color: '#fff',
},
sign: {
width: 200,
height: 200,
},
btnContainer: {
marginTop: 60,
width: 240,
position: 'absolute',
bottom: 20,
},
counterContainer: {
flex: 1,
width: '100%',
alignItems: 'center',
justifyContent: 'center',
},
});
import React from 'react';
import { AppLoading } from 'expo';
import * as Font from 'expo-font';
import { Ionicons } from '@expo/vector-icons';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from './screens/HomeScreen';
import ReminderScreen from './screens/ReminderScreen';

const AppNavigator = createStackNavigator(
{
Home: {
screen: HomeScreen,
},
Reminder: {
screen: ReminderScreen,
},
},
{
initialRouteName: 'Home',
}
);

const AppContainer = createAppContainer(AppNavigator);

export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isReady: false,
};
}

async componentDidMount() {
await Font.loadAsync({
Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
...Ionicons.font,
});
this.setState({ isReady: true });
}

render() {
if (!this.state.isReady) {
return <AppLoading />;
}

return <AppContainer />;
}
}
import React from 'react';
import { Image, Dimensions, StyleSheet } from 'react-native';
import { Container, Button, Text, Header, Content, List, ListItem } from 'native-base';

const { width } = Dimensions.get('screen');

const reminders = [
{
title: 'Погладить кота',
date: Date.now() + 1000 * 5,
description: 'очень надо',
},
{
title: 'Почистить зубы',
date: Date.now() + 1000 * 5,
description: 'очень надо',
},
{
title: 'Выпить воды',
date: Date.now() + 1000 * 5,
description: 'очень надо',
},
{
title: 'Провести стрим',
date: Date.now() + 1000 * 5,
description: 'очень надо',
},
];

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
// alignItems: 'center',
// justifyContent: 'center',
},
});

export default class HomeScreen extends React.Component {
render() {
return (
<Container style={styles.container}>
<Header />
<Content>
<Image
style={width, height: width * 9 / 16}
source={require('../assets/logo.jpg')}
/>
<Button block onPress={() => alert('привет')}>
<Text>Click Me!</Text>
</Button>
<List>
{reminders.map((reminder, i) => (
<ListItem
key={i}
onPress={() => this.props.navigation.navigate('Reminder', reminder)}>
<Text>{reminder.title}</Text>
</ListItem>
))}
</List>
</Content>
</Container>
);
}
}
import React from 'react';
import { Image, Dimensions, StyleSheet } from 'react-native';
import { Container, Button, Text, Header, Content, List, ListItem } from 'native-base';
import { Col, Row, Grid } from 'react-native-easy-grid';

export default class ReminderScreen extends React.Component {
render() {
const date = this.props.navigation.getParam('date', '');
const year = new Date(date).getFullYear();
const month = new Date(date).getMonth() + 1;
const day = new Date(date).getDate();

return (
<Container>
<Grid>
<Row style={ height: 50 }>
<Col>
<Text>{this.props.navigation.getParam('title', 'Напоминалка')}</Text>
</Col>
<Col style={ textAlign: 'right' }>
<Text style={ textAlign: 'right' }>{`${day}.${month}.${year}`}</Text>
</Col>
</Row>
<Row>
<Text>{this.props.navigation.getParam('description', 'Дщкуь шзыгь')}</Text>
</Row>
</Grid>
</Container>
);
}
}