From a41d3368691a36270be65011d8f6bee35c708f88 Mon Sep 17 00:00:00 2001 From: Khatta Sallaman Date: Fri, 5 May 2023 23:03:41 +0300 Subject: [PATCH 1/2] added onboarding screens --- .gitignore | 17 + README.md | 26 + app.json | 9 + app/_layout.tsx | 11 + app/components/Slides/SharedSlide.tsx | 54 + app/components/Slides/SlideFour.tsx | 45 + app/components/Slides/SlideOne.tsx | 21 + app/components/Slides/SlideThree.tsx | 17 + app/components/Slides/SlideTwo.tsx | 17 + app/components/common/Button.tsx | 34 + app/home/home.tsx | 25 + app/index.tsx | 49 + app/onboarding/game-selection.tsx | 33 + app/onboarding/signup.tsx | 35 + app/utils/constants.ts | 1 + app/utils/types.ts | 21 + assets/adaptive-icon.png | Bin 0 -> 17547 bytes assets/favicon.png | Bin 0 -> 1466 bytes assets/icon.png | Bin 0 -> 22380 bytes assets/slide-four.webp | Bin 0 -> 75637 bytes assets/slide-one.webp | Bin 0 -> 35486 bytes assets/slide-three.jpeg | Bin 0 -> 258398 bytes assets/slide-two.jpg | Bin 0 -> 156762 bytes assets/splash.png | Bin 0 -> 47346 bytes babel.config.js | 7 + index.ts | 1 + package.json | 38 + tsconfig.json | 4 + yarn.lock | 7302 +++++++++++++++++++++++++ 29 files changed, 7767 insertions(+) create mode 100644 .gitignore create mode 100644 README.md create mode 100644 app.json create mode 100644 app/_layout.tsx create mode 100644 app/components/Slides/SharedSlide.tsx create mode 100644 app/components/Slides/SlideFour.tsx create mode 100644 app/components/Slides/SlideOne.tsx create mode 100644 app/components/Slides/SlideThree.tsx create mode 100644 app/components/Slides/SlideTwo.tsx create mode 100644 app/components/common/Button.tsx create mode 100644 app/home/home.tsx create mode 100644 app/index.tsx create mode 100644 app/onboarding/game-selection.tsx create mode 100644 app/onboarding/signup.tsx create mode 100644 app/utils/constants.ts create mode 100644 app/utils/types.ts create mode 100644 assets/adaptive-icon.png create mode 100644 assets/favicon.png create mode 100644 assets/icon.png create mode 100755 assets/slide-four.webp create mode 100644 assets/slide-one.webp create mode 100644 assets/slide-three.jpeg create mode 100755 assets/slide-two.jpg create mode 100644 assets/splash.png create mode 100644 babel.config.js create mode 100644 index.ts create mode 100644 package.json create mode 100644 tsconfig.json create mode 100644 yarn.lock diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..772ef29 --- /dev/null +++ b/.gitignore @@ -0,0 +1,17 @@ +node_modules/ +.expo/ +dist/ +npm-debug.* +*.jks +*.p8 +*.p12 +*.key +*.mobileprovision +*.orig.* +web-build/ + +# macOS +.DS_Store + +# Temporary files created by Metro to check the health of the file watcher +.metro-health-check* diff --git a/README.md b/README.md new file mode 100644 index 0000000..697e793 --- /dev/null +++ b/README.md @@ -0,0 +1,26 @@ +# Onboarding Screen Exercise + +Welcome to the onboarding screen exercise for our React Native developer position! In this exercise, you will be implementing the logic and UI for an onboarding screen in our existing React Native project. + + +This will open up the Expo Developer Tools in your default web browser. From here, you can run the project on your iOS or Android device using the Expo Client app or an emulator. + +## Task description + +Your task is to implement the logic and UI for an onboarding screen in our React Native project using Expo Router. The onboarding screen should consist of: + +- A welcome message or heading +- 2-4 screens that users can swipe through, each with a short message or tip about the app's features or how to use it +- A call-to-action button that takes the user to the app's main screen + +You can find the code for the onboarding screen in the `app/onboarding/signup.tsx` file. Your task is to implement the missing functionality and UI components to make the onboarding screen work as described above. + +Feel free to use any third-party libraries or tools you feel comfortable with to complete the task. (like, react-hook-form or zod, or even react-native-paper for the UI) + +## Submission + +Once you have completed the task, please submit your solution as a pull request to this repository. In your pull request, please include a brief description of the changes you made and any notes or comments you want to share about your implementation. + +We will review your submission and get back to you as soon as possible. + +Good luck, and happy coding! diff --git a/app.json b/app.json new file mode 100644 index 0000000..96c4e62 --- /dev/null +++ b/app.json @@ -0,0 +1,9 @@ +{ + "expo": { + "scheme": "myapp", + + "web": { + "bundler": "metro" + } + } +} \ No newline at end of file diff --git a/app/_layout.tsx b/app/_layout.tsx new file mode 100644 index 0000000..ff2bddf --- /dev/null +++ b/app/_layout.tsx @@ -0,0 +1,11 @@ +import { Stack } from "expo-router"; + +import { SafeAreaProvider } from "react-native-safe-area-context"; + +export default function RootLayout() { + return ( + + + + ); +} diff --git a/app/components/Slides/SharedSlide.tsx b/app/components/Slides/SharedSlide.tsx new file mode 100644 index 0000000..923ad3c --- /dev/null +++ b/app/components/Slides/SharedSlide.tsx @@ -0,0 +1,54 @@ +import { + View, + Text, + ImageBackground, + StyleSheet, + Dimensions, +} from "react-native"; +import React from "react"; +import { SharedSlideProps } from "../../utils/types"; + +const SharedSlide = ({ + image, + text, + textWrapperStyle, + textStyle, + children, +}: SharedSlideProps) => { + return ( + + + + + {text} + {children} + + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: "#9DD6EB", + }, + image: { + flex: 1, + }, + textWrapper: { + flex: 1, + justifyContent: "flex-end", + alignItems: "center", + marginBottom: Dimensions.get("screen").width / 6, + width: "80%", + }, + text: { + color: "#fff", + textAlign: "center", + lineHeight: 25, + }, +}); + +export default SharedSlide; diff --git a/app/components/Slides/SlideFour.tsx b/app/components/Slides/SlideFour.tsx new file mode 100644 index 0000000..03019ba --- /dev/null +++ b/app/components/Slides/SlideFour.tsx @@ -0,0 +1,45 @@ +import { Dimensions } from "react-native"; +import React from "react"; +import Button from "../common/Button"; +import SharedSlide from "./SharedSlide"; +import AsyncStorage from "@react-native-async-storage/async-storage"; +import { useNavigation } from "expo-router"; +import { IS_APP_LAUNCHED } from "../../utils/constants"; + +const SlideFour = () => { + const navigation = useNavigation(); + + const onPress = async () => { + try { + await AsyncStorage.setItem(IS_APP_LAUNCHED, "true"); + navigation.reset({ + routes: [ + { + name: "onboarding/game-selection", + }, + ], + }); + } catch (e) { + console.log("Cannot set IS_NEW_USER to false", e); + } + }; + + + return ( + +