diff --git a/src/assets/app-icon-white.png b/src/assets/app-icon-white.png new file mode 100644 index 0000000..8ec83c0 Binary files /dev/null and b/src/assets/app-icon-white.png differ diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index 4c9ea32..2acc43b 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -11,6 +11,8 @@ const Background = styled.View` const Container = styled.View` border-radius: 20px; flex: 1; + justify-content: center; + align-items: center; `; const Modal: React.FC = ({ children }) => { diff --git a/src/screens/Onboarding/index.tsx b/src/screens/Onboarding/index.tsx new file mode 100644 index 0000000..f5fb485 --- /dev/null +++ b/src/screens/Onboarding/index.tsx @@ -0,0 +1,76 @@ +import React, { useCallback, useEffect } from 'react'; +import styled from 'styled-components/native'; +import { THEME_COLOR } from 'CONSTANTS'; +import { Button } from 'react-native'; +import { useNavigation } from '@react-navigation/native'; +import { NavigationProp } from 'screens'; +import { useTypedSelector } from 'store'; +import { useDispatch } from 'react-redux'; +import { setOnboardingStatus } from 'store/settings/actions'; + +const Container = styled.SafeAreaView` + background-color: ${THEME_COLOR}; + flex: 1; + justify-content: center; +`; + +const TextContainer = styled.ScrollView` + padding: 25px; +`; + +const Text = styled.Text` + text-align: center; + color: white; + margin-bottom: 10px; +`; + +const ButtonContainer = styled.View` + margin-top: 50px; +`; + +const Logo = styled.Image` + width: 150px; + height: 150px; + margin: 0 auto 50px auto; +`; + +function Onboarding() { + // Get account from Redux and dispatcher + const account = useTypedSelector(state => state.settings.jellyfin); + const dispatch = useDispatch(); + + // Also retrieve the navigation handler so that we can open the modal in + // which the Jellyfin server is set + const navigation = useNavigation(); + const handleClick = useCallback(() => navigation.navigate('SetJellyfinServer'), [navigation]); + + // We'll also respond to any change in the account, setting the onboarding + // status to true, so that the app becomes available. + useEffect(() => { + if (account) { + dispatch(setOnboardingStatus(true)); + } + }, [account, dispatch]); + + return ( + + + + + Welcome! + + + Jellyfin Audio Player will allow you to stream your music library from anywhere, with full support for background audio and casting. + + + In order to get started, you need a Jellyfin server. Click the button below to enter your Jellyfin server address and login to it. + + +