Skip to content
Snippets Groups Projects
Commit 2c1f27ed authored by Roy Grönroos's avatar Roy Grönroos
Browse files

Exercise 4.1

parent 64f49bab
No related branches found
No related tags found
No related merge requests found
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import * as React from 'react';
import { Text, View, Button, ActivityIndicator, TextInput, ScrollView } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
export default function App() {
class NoteList extends React.Component {
state = {
notes: [
{
"id": 1,
"content": "Note 1"
},
{
"id": 2,
"content": "Note 2"
},
{
"id": 3,
"content": "Note 3"
}
]
}
render() {
return (
<ScrollView>
{this.state.notes.map(note =>
<Note
key={note.id}
content={note.content}
/>)}
<TextInput
placeholder={"Write the note here"}
/>
<Button title={"Add note"}/>
</ScrollView>
)
}
}
const Note = (props) => {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
</View>
<Text>{props.content}</Text>
)
}
const Stack = createStackNavigator();
const App = () => {
return(
<NavigationContainer>
<Stack.Navigator initialRouteName="Notes">
<Stack.Screen name="Notes" component={NoteList} />
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default App;
This diff is collapsed.
This diff is collapsed.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment