From a1070fd93e1d7fdb9d314a480cdeed7ae1167d47 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20Schwarzm=C3=BCller?= <28806196+maxschwarzmueller@users.noreply.github.com> Date: Tue, 8 Mar 2022 07:42:34 +0100 Subject: [PATCH 1/5] fixed branch selecting image --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f3240019..8f27c2ed 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ For example, the branch [02-basics](https://github.com/academind/react-native-pr You can switch branches via the dropdown in the top left corner of this repository page: -[Selecting a branch](./selecting-branches.png) +![Selecting a branch](./selecting-branches.png) # Provided Resources From a84ae054e06404816b13af6735aa5b6711e8a213 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20Schwarzm=C3=BCller?= <28806196+maxschwarzmueller@users.noreply.github.com> Date: Tue, 8 Mar 2022 09:36:35 +0100 Subject: [PATCH 2/5] added code & slides --- code/01-working-with-core-components/App.js | 22 +++++ code/01-working-with-core-components/app.json | 32 ++++++ .../assets/adaptive-icon.png | Bin 0 -> 17547 bytes .../assets/favicon.png | Bin 0 -> 1466 bytes .../assets/icon.png | Bin 0 -> 22380 bytes .../assets/splash.png | Bin 0 -> 47346 bytes .../babel.config.js | 6 ++ .../package.json | 24 +++++ code/02-styling-react-native-apps/App.js | 36 +++++++ code/02-styling-react-native-apps/app.json | 32 ++++++ .../assets/adaptive-icon.png | Bin 0 -> 17547 bytes .../assets/favicon.png | Bin 0 -> 1466 bytes .../assets/icon.png | Bin 0 -> 22380 bytes .../assets/splash.png | Bin 0 -> 47346 bytes .../babel.config.js | 6 ++ .../02-styling-react-native-apps/package.json | 24 +++++ code/03-improving-the-layout/App.js | 42 ++++++++ code/03-improving-the-layout/app.json | 32 ++++++ .../assets/adaptive-icon.png | Bin 0 -> 17547 bytes .../assets/favicon.png | Bin 0 -> 1466 bytes code/03-improving-the-layout/assets/icon.png | Bin 0 -> 22380 bytes .../03-improving-the-layout/assets/splash.png | Bin 0 -> 47346 bytes code/03-improving-the-layout/babel.config.js | 6 ++ code/03-improving-the-layout/package.json | 24 +++++ code/04-handling-events/App.js | 57 +++++++++++ code/04-handling-events/app.json | 32 ++++++ .../assets/adaptive-icon.png | Bin 0 -> 17547 bytes code/04-handling-events/assets/favicon.png | Bin 0 -> 1466 bytes code/04-handling-events/assets/icon.png | Bin 0 -> 22380 bytes code/04-handling-events/assets/splash.png | Bin 0 -> 47346 bytes code/04-handling-events/babel.config.js | 6 ++ code/04-handling-events/package.json | 24 +++++ .../05-managing-a-list-of-course-goals/App.js | 61 ++++++++++++ .../app.json | 32 ++++++ .../assets/adaptive-icon.png | Bin 0 -> 17547 bytes .../assets/favicon.png | Bin 0 -> 1466 bytes .../assets/icon.png | Bin 0 -> 22380 bytes .../assets/splash.png | Bin 0 -> 47346 bytes .../babel.config.js | 6 ++ .../package.json | 24 +++++ .../06-ios-android-styling-differences/App.js | 74 ++++++++++++++ .../app.json | 32 ++++++ .../assets/adaptive-icon.png | Bin 0 -> 17547 bytes .../assets/favicon.png | Bin 0 -> 1466 bytes .../assets/icon.png | Bin 0 -> 22380 bytes .../assets/splash.png | Bin 0 -> 47346 bytes .../babel.config.js | 6 ++ .../package.json | 24 +++++ code/07-optimizing-lists-with-flatlist/App.js | 91 ++++++++++++++++++ .../app.json | 32 ++++++ .../assets/adaptive-icon.png | Bin 0 -> 17547 bytes .../assets/favicon.png | Bin 0 -> 1466 bytes .../assets/icon.png | Bin 0 -> 22380 bytes .../assets/splash.png | Bin 0 -> 47346 bytes .../babel.config.js | 6 ++ .../package.json | 24 +++++ code/08-splitting-components/App.js | 78 +++++++++++++++ code/08-splitting-components/app.json | 32 ++++++ .../assets/adaptive-icon.png | Bin 0 -> 17547 bytes .../assets/favicon.png | Bin 0 -> 1466 bytes code/08-splitting-components/assets/icon.png | Bin 0 -> 22380 bytes .../08-splitting-components/assets/splash.png | Bin 0 -> 47346 bytes code/08-splitting-components/babel.config.js | 6 ++ .../components/GoalInput.js | 0 .../components/GoalItem.js | 23 +++++ code/08-splitting-components/package.json | 24 +++++ code/09-utilizing-props/App.js | 45 +++++++++ code/09-utilizing-props/app.json | 32 ++++++ .../assets/adaptive-icon.png | Bin 0 -> 17547 bytes code/09-utilizing-props/assets/favicon.png | Bin 0 -> 1466 bytes code/09-utilizing-props/assets/icon.png | Bin 0 -> 22380 bytes code/09-utilizing-props/assets/splash.png | Bin 0 -> 47346 bytes code/09-utilizing-props/babel.config.js | 6 ++ .../components/GoalInput.js | 48 +++++++++ .../09-utilizing-props/components/GoalItem.js | 23 +++++ code/09-utilizing-props/package.json | 24 +++++ code/10-handling-taps-with-pressable/App.js | 57 +++++++++++ code/10-handling-taps-with-pressable/app.json | 32 ++++++ .../assets/adaptive-icon.png | Bin 0 -> 17547 bytes .../assets/favicon.png | Bin 0 -> 1466 bytes .../assets/icon.png | Bin 0 -> 22380 bytes .../assets/splash.png | Bin 0 -> 47346 bytes .../babel.config.js | 6 ++ .../components/GoalInput.js | 48 +++++++++ .../components/GoalItem.js | 25 +++++ .../package.json | 24 +++++ .../App.js | 57 +++++++++++ .../app.json | 32 ++++++ .../assets/adaptive-icon.png | Bin 0 -> 17547 bytes .../assets/favicon.png | Bin 0 -> 1466 bytes .../assets/icon.png | Bin 0 -> 22380 bytes .../assets/splash.png | Bin 0 -> 47346 bytes .../babel.config.js | 6 ++ .../components/GoalInput.js | 48 +++++++++ .../components/GoalItem.js | 32 ++++++ .../package.json | 24 +++++ code/12-styling-the-modal-overlay/App.js | 67 +++++++++++++ code/12-styling-the-modal-overlay/app.json | 32 ++++++ .../assets/adaptive-icon.png | Bin 0 -> 17547 bytes .../assets/favicon.png | Bin 0 -> 1466 bytes .../assets/icon.png | Bin 0 -> 22380 bytes .../assets/splash.png | Bin 0 -> 47346 bytes .../babel.config.js | 6 ++ .../components/GoalInput.js | 64 ++++++++++++ .../components/GoalItem.js | 32 ++++++ .../12-styling-the-modal-overlay/package.json | 24 +++++ code/13-opening-and-closing-the-modal/App.js | 76 +++++++++++++++ .../13-opening-and-closing-the-modal/app.json | 32 ++++++ .../assets/adaptive-icon.png | Bin 0 -> 17547 bytes .../assets/favicon.png | Bin 0 -> 1466 bytes .../assets/icon.png | Bin 0 -> 22380 bytes .../assets/splash.png | Bin 0 -> 47346 bytes .../babel.config.js | 6 ++ .../components/GoalInput.js | 64 ++++++++++++ .../components/GoalItem.js | 32 ++++++ .../package.json | 24 +++++ code/14-working-with-images/App.js | 76 +++++++++++++++ code/14-working-with-images/app.json | 32 ++++++ .../assets/adaptive-icon.png | Bin 0 -> 17547 bytes .../14-working-with-images/assets/favicon.png | Bin 0 -> 1466 bytes code/14-working-with-images/assets/icon.png | Bin 0 -> 22380 bytes .../assets/images/goal.png | Bin 0 -> 19124 bytes code/14-working-with-images/assets/splash.png | Bin 0 -> 47346 bytes code/14-working-with-images/babel.config.js | 6 ++ .../components/GoalInput.js | 81 ++++++++++++++++ .../components/GoalItem.js | 32 ++++++ code/14-working-with-images/package.json | 24 +++++ code/15-finished/App.js | 80 +++++++++++++++ code/15-finished/app.json | 33 +++++++ code/15-finished/assets/adaptive-icon.png | Bin 0 -> 17547 bytes code/15-finished/assets/favicon.png | Bin 0 -> 1466 bytes code/15-finished/assets/icon.png | Bin 0 -> 22380 bytes code/15-finished/assets/images/goal.png | Bin 0 -> 19124 bytes code/15-finished/assets/splash.png | Bin 0 -> 47346 bytes code/15-finished/babel.config.js | 6 ++ code/15-finished/components/GoalInput.js | 81 ++++++++++++++++ code/15-finished/components/GoalItem.js | 32 ++++++ code/15-finished/package.json | 24 +++++ slides/slides.pdf | Bin 0 -> 244089 bytes 139 files changed, 2515 insertions(+) create mode 100644 code/01-working-with-core-components/App.js create mode 100644 code/01-working-with-core-components/app.json create mode 100644 code/01-working-with-core-components/assets/adaptive-icon.png create mode 100644 code/01-working-with-core-components/assets/favicon.png create mode 100644 code/01-working-with-core-components/assets/icon.png create mode 100644 code/01-working-with-core-components/assets/splash.png create mode 100644 code/01-working-with-core-components/babel.config.js create mode 100644 code/01-working-with-core-components/package.json create mode 100644 code/02-styling-react-native-apps/App.js create mode 100644 code/02-styling-react-native-apps/app.json create mode 100644 code/02-styling-react-native-apps/assets/adaptive-icon.png create mode 100644 code/02-styling-react-native-apps/assets/favicon.png create mode 100644 code/02-styling-react-native-apps/assets/icon.png create mode 100644 code/02-styling-react-native-apps/assets/splash.png create mode 100644 code/02-styling-react-native-apps/babel.config.js create mode 100644 code/02-styling-react-native-apps/package.json create mode 100644 code/03-improving-the-layout/App.js create mode 100644 code/03-improving-the-layout/app.json create mode 100644 code/03-improving-the-layout/assets/adaptive-icon.png create mode 100644 code/03-improving-the-layout/assets/favicon.png create mode 100644 code/03-improving-the-layout/assets/icon.png create mode 100644 code/03-improving-the-layout/assets/splash.png create mode 100644 code/03-improving-the-layout/babel.config.js create mode 100644 code/03-improving-the-layout/package.json create mode 100644 code/04-handling-events/App.js create mode 100644 code/04-handling-events/app.json create mode 100644 code/04-handling-events/assets/adaptive-icon.png create mode 100644 code/04-handling-events/assets/favicon.png create mode 100644 code/04-handling-events/assets/icon.png create mode 100644 code/04-handling-events/assets/splash.png create mode 100644 code/04-handling-events/babel.config.js create mode 100644 code/04-handling-events/package.json create mode 100644 code/05-managing-a-list-of-course-goals/App.js create mode 100644 code/05-managing-a-list-of-course-goals/app.json create mode 100644 code/05-managing-a-list-of-course-goals/assets/adaptive-icon.png create mode 100644 code/05-managing-a-list-of-course-goals/assets/favicon.png create mode 100644 code/05-managing-a-list-of-course-goals/assets/icon.png create mode 100644 code/05-managing-a-list-of-course-goals/assets/splash.png create mode 100644 code/05-managing-a-list-of-course-goals/babel.config.js create mode 100644 code/05-managing-a-list-of-course-goals/package.json create mode 100644 code/06-ios-android-styling-differences/App.js create mode 100644 code/06-ios-android-styling-differences/app.json create mode 100644 code/06-ios-android-styling-differences/assets/adaptive-icon.png create mode 100644 code/06-ios-android-styling-differences/assets/favicon.png create mode 100644 code/06-ios-android-styling-differences/assets/icon.png create mode 100644 code/06-ios-android-styling-differences/assets/splash.png create mode 100644 code/06-ios-android-styling-differences/babel.config.js create mode 100644 code/06-ios-android-styling-differences/package.json create mode 100644 code/07-optimizing-lists-with-flatlist/App.js create mode 100644 code/07-optimizing-lists-with-flatlist/app.json create mode 100644 code/07-optimizing-lists-with-flatlist/assets/adaptive-icon.png create mode 100644 code/07-optimizing-lists-with-flatlist/assets/favicon.png create mode 100644 code/07-optimizing-lists-with-flatlist/assets/icon.png create mode 100644 code/07-optimizing-lists-with-flatlist/assets/splash.png create mode 100644 code/07-optimizing-lists-with-flatlist/babel.config.js create mode 100644 code/07-optimizing-lists-with-flatlist/package.json create mode 100644 code/08-splitting-components/App.js create mode 100644 code/08-splitting-components/app.json create mode 100644 code/08-splitting-components/assets/adaptive-icon.png create mode 100644 code/08-splitting-components/assets/favicon.png create mode 100644 code/08-splitting-components/assets/icon.png create mode 100644 code/08-splitting-components/assets/splash.png create mode 100644 code/08-splitting-components/babel.config.js create mode 100644 code/08-splitting-components/components/GoalInput.js create mode 100644 code/08-splitting-components/components/GoalItem.js create mode 100644 code/08-splitting-components/package.json create mode 100644 code/09-utilizing-props/App.js create mode 100644 code/09-utilizing-props/app.json create mode 100644 code/09-utilizing-props/assets/adaptive-icon.png create mode 100644 code/09-utilizing-props/assets/favicon.png create mode 100644 code/09-utilizing-props/assets/icon.png create mode 100644 code/09-utilizing-props/assets/splash.png create mode 100644 code/09-utilizing-props/babel.config.js create mode 100644 code/09-utilizing-props/components/GoalInput.js create mode 100644 code/09-utilizing-props/components/GoalItem.js create mode 100644 code/09-utilizing-props/package.json create mode 100644 code/10-handling-taps-with-pressable/App.js create mode 100644 code/10-handling-taps-with-pressable/app.json create mode 100644 code/10-handling-taps-with-pressable/assets/adaptive-icon.png create mode 100644 code/10-handling-taps-with-pressable/assets/favicon.png create mode 100644 code/10-handling-taps-with-pressable/assets/icon.png create mode 100644 code/10-handling-taps-with-pressable/assets/splash.png create mode 100644 code/10-handling-taps-with-pressable/babel.config.js create mode 100644 code/10-handling-taps-with-pressable/components/GoalInput.js create mode 100644 code/10-handling-taps-with-pressable/components/GoalItem.js create mode 100644 code/10-handling-taps-with-pressable/package.json create mode 100644 code/11-adding-android-ripple-and-ios-styling/App.js create mode 100644 code/11-adding-android-ripple-and-ios-styling/app.json create mode 100644 code/11-adding-android-ripple-and-ios-styling/assets/adaptive-icon.png create mode 100644 code/11-adding-android-ripple-and-ios-styling/assets/favicon.png create mode 100644 code/11-adding-android-ripple-and-ios-styling/assets/icon.png create mode 100644 code/11-adding-android-ripple-and-ios-styling/assets/splash.png create mode 100644 code/11-adding-android-ripple-and-ios-styling/babel.config.js create mode 100644 code/11-adding-android-ripple-and-ios-styling/components/GoalInput.js create mode 100644 code/11-adding-android-ripple-and-ios-styling/components/GoalItem.js create mode 100644 code/11-adding-android-ripple-and-ios-styling/package.json create mode 100644 code/12-styling-the-modal-overlay/App.js create mode 100644 code/12-styling-the-modal-overlay/app.json create mode 100644 code/12-styling-the-modal-overlay/assets/adaptive-icon.png create mode 100644 code/12-styling-the-modal-overlay/assets/favicon.png create mode 100644 code/12-styling-the-modal-overlay/assets/icon.png create mode 100644 code/12-styling-the-modal-overlay/assets/splash.png create mode 100644 code/12-styling-the-modal-overlay/babel.config.js create mode 100644 code/12-styling-the-modal-overlay/components/GoalInput.js create mode 100644 code/12-styling-the-modal-overlay/components/GoalItem.js create mode 100644 code/12-styling-the-modal-overlay/package.json create mode 100644 code/13-opening-and-closing-the-modal/App.js create mode 100644 code/13-opening-and-closing-the-modal/app.json create mode 100644 code/13-opening-and-closing-the-modal/assets/adaptive-icon.png create mode 100644 code/13-opening-and-closing-the-modal/assets/favicon.png create mode 100644 code/13-opening-and-closing-the-modal/assets/icon.png create mode 100644 code/13-opening-and-closing-the-modal/assets/splash.png create mode 100644 code/13-opening-and-closing-the-modal/babel.config.js create mode 100644 code/13-opening-and-closing-the-modal/components/GoalInput.js create mode 100644 code/13-opening-and-closing-the-modal/components/GoalItem.js create mode 100644 code/13-opening-and-closing-the-modal/package.json create mode 100644 code/14-working-with-images/App.js create mode 100644 code/14-working-with-images/app.json create mode 100644 code/14-working-with-images/assets/adaptive-icon.png create mode 100644 code/14-working-with-images/assets/favicon.png create mode 100644 code/14-working-with-images/assets/icon.png create mode 100644 code/14-working-with-images/assets/images/goal.png create mode 100644 code/14-working-with-images/assets/splash.png create mode 100644 code/14-working-with-images/babel.config.js create mode 100644 code/14-working-with-images/components/GoalInput.js create mode 100644 code/14-working-with-images/components/GoalItem.js create mode 100644 code/14-working-with-images/package.json create mode 100644 code/15-finished/App.js create mode 100644 code/15-finished/app.json create mode 100644 code/15-finished/assets/adaptive-icon.png create mode 100644 code/15-finished/assets/favicon.png create mode 100644 code/15-finished/assets/icon.png create mode 100644 code/15-finished/assets/images/goal.png create mode 100644 code/15-finished/assets/splash.png create mode 100644 code/15-finished/babel.config.js create mode 100644 code/15-finished/components/GoalInput.js create mode 100644 code/15-finished/components/GoalItem.js create mode 100644 code/15-finished/package.json create mode 100644 slides/slides.pdf diff --git a/code/01-working-with-core-components/App.js b/code/01-working-with-core-components/App.js new file mode 100644 index 00000000..a1755513 --- /dev/null +++ b/code/01-working-with-core-components/App.js @@ -0,0 +1,22 @@ +import { StyleSheet, Text, View, Button } from 'react-native'; + +export default function App() { + return ( + + + Another piece of text! + + Hello World! +