15 | Here is a basic starter to show you how you can navigate from one
16 | screen to another. This screen uses the same code on Next.js and React
17 | Native.
18 |
34 |
35 |
36 |
37 |
43 | Regular Link
44 |
45 |
46 | {
49 | 'worklet'
50 |
51 | return {
52 | scale: pressed ? 0.95 : hovered ? 1.1 : 1,
53 | rotateZ: pressed ? '0deg' : hovered ? '-3deg' : '0deg',
54 | }
55 | }}
56 | transition={{
57 | type: 'timing',
58 | duration: 150,
59 | }}
60 | >
61 |
65 | Moti Link
66 |
67 |
68 |
69 |
70 | )
71 | }
72 |
--------------------------------------------------------------------------------
/packages/app/features/auth/LoginScreen.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { StyleSheet, TouchableOpacity, Text, View, Platform } from 'react-native'
3 | import { Button, Colors, TextInput } from 'react-native-paper'
4 | import { useRouter } from 'solito/router'
5 | import { useAuthentication } from './AuthContext'
6 |
7 | export const LoginScreen = () => {
8 | const [email, setEmail] = useState('')
9 | const [password, setPassword] = useState('')
10 | const [isVisble, setIsVisible] = useState(true)
11 |
12 | const { push } = useRouter()
13 |
14 | const navigateToTerms = () => {
15 | push('/terms/')
16 | }
17 |
18 | const { setUser } = useAuthentication()
19 | function handleLogin() {
20 | setUser(true)
21 | if(Platform.OS ==='web'){
22 | push('/home')
23 | }
24 | }
25 |
26 | function toggleSecureIcon() {
27 | setIsVisible(!isVisble)
28 | }
29 |
30 | return (
31 |
32 |
33 | setEmail(value)}
37 | />
38 | setPassword(value)}
43 | right={
44 |
48 | }
49 | />
50 |
57 |
58 |
59 | by login you accept the Terms and Conditions.
60 |
61 |
62 |
63 |
64 | )
65 | }
66 |
67 | const styles = StyleSheet.create({
68 | content: {
69 | padding: 16,
70 | },
71 | submitButton: {
72 | marginVertical: 32,
73 | marginHorizontal: 16,
74 | backgroundColor: Colors.purple500,
75 | },
76 | tocText: {
77 | textAlign: 'center',
78 | fontSize: 14,
79 | color: Colors.grey500,
80 | },
81 | })
82 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # React Native Next.js Monorepo
2 |
3 | > Exploring universal apps (_native and web_) —[bootstrapped with solito](https://solito.dev/)
4 |
5 | 👾 [View the website](https://example.solito.dev)
6 |
7 | - Select the folder `apps/next` as the root of your Next.js app on the Vercel setup.
8 |
9 | ## 📦 Included packages
10 |
11 | - `solito` for cross-platform navigation ([Talk at Next.js Conf](https://www.youtube.com/watch?v=0lnbdRweJtA))
12 | - `moti` for animations
13 | - `dripsy` for theming/design (you can bring your own, too)
14 | - Expo SDK
15 | - Next.js
16 | - React Navigation
17 |
18 | ## 🗂 Folder layout
19 |
20 | - `apps` entry points for each app
21 | - `expo`
22 | - `next`
23 |
24 | - `packages` shared packages across apps
25 | - `app` you'll be importing most files from `app/`
26 | - `features` (don't use a `screens` folder. organize by feature.)
27 | - `provider` (all the providers that wrap the app, and some no-ops for Web.)
28 | - `navigation` Next.js has a `pages/` folder. React Native doesn't. This folder contains navigation-related code for RN. You may use it for any navigation code, such as custom links.
29 |
30 | You can add other folders inside of `packages/` if you know what you're doing and have a good reason to.
31 |
32 | ## 🏁 Getting started
33 |
34 | ```
35 | yarn
36 | yarn web
37 | yarn native
38 | ```
39 |
40 | ## 🆕 Add new dependencies
41 |
42 |
43 | Pure JS dependencies
44 |
45 | If you're installing a JavaScript-only dependency that will be used across platforms, install it in `packages/app`:
46 |
47 | ```sh
48 | cd packages/app
49 | yarn add date-fns
50 | cd ../..
51 | yarn
52 | ```
53 |
54 |
55 |
56 | Native dependencies
57 |
58 | If you're installing a library with any native code, you must install it in `apps/expo`:
59 |
60 | ```sh
61 | cd apps/expo
62 | yarn add react-native-reanimated
63 |
64 | cd ../..
65 | yarn
66 | ```
67 |
68 | You can also install the native library inside of `packages/app` if you want to get autoimport for that package inside of the `app` folder. However, you need to be careful and install the _exact_ same version in both packages. If the versions mismatch at all, you'll potentially get terrible bugs. This is a classic monorepo issue. I use `lerna-update-wizard` to help with this (you don't need to use Lerna to use that lib).
69 |
70 |
71 | ## 👏 Kudos
72 |
73 | - Fernando Rojo on Twitter: [@FernandoTheRojo](https://twitter.com/intent/follow?screen_name=fernandotherojo)
74 |
--------------------------------------------------------------------------------
/packages/app/features/auth/TermsScreen.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { View, Text, Image, ScrollView } from "react-native";
3 | import { Appbar, Colors, Title } from "react-native-paper";
4 | import { useRouter } from "solito/router";
5 |
6 | export function TermsScreen() {
7 | const { back } = useRouter()
8 |
9 | function goBack() {
10 | back()
11 | }
12 |
13 | return (
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | This Terms of Service, including all supplemental terms as amended
22 | from time to time, governs your use of the online game, service, or
23 | web site known as Star Wars: The Old Republic ("TOR" and the "TOR
24 | Services") operated by BioWare Austin LLC, its subsidiaries and
25 | affiliates (collectively, "BioWare"). Please read the Supplemental
26 | Terms which are contained in links to this Terms of Service or at the
27 | bottom of this document. Supplemental Terms and TOR Privacy Policy and
28 | other Terms are an integral part of this Terms of Service and
29 | incorporated in this document by reference. You can find the Terms of
30 | Service at the "Terms of Service" link at the bottom of the TOR
31 | website from which you may also print a copy for your records.
32 |
33 | 1. Account
34 |
35 | A TOR Account ("Account") may be required to access and use TOR
36 | Services. If you have questions about Account registration, please
37 | contact us by visiting http://www.swtor.com/support. To create a TOR
38 | Account, you must have an email address, and provide truthful and
39 | accurate information. TOR Accounts are available only to adults, or in
40 | their discretion, their minor child. If you are a minor, your parent
41 | or guardian must complete the registration process, in which case he
42 | or she takes full responsibility for all obligations under this Terms
43 | of Service. TOR Accounts will not be allowed for minors under thirteen
44 | (13) years of age, regardless of permission and/or registration by
45 | such minor's parent or guardian. You must be eligible to use the TOR
46 | Service for which you are registering. Some TOR Services may require
47 | creation of a ["User Name" or "Persona"]. [User names or Personas] are
48 | tied to your Account. You may not use a ["User Name" or "Persona"]
49 | that is used by someone else, is vulgar or offensive, or otherwise
50 | violates the Terms of Service. You are solely responsible for all
51 | activity on your Account. Your Account may be terminated if someone
52 | else uses it to engage in activity that violates the Terms of Service
53 | or is otherwise improper or illegal. You should not reveal your
54 | Account password to others. BioWare and LucasArts will not ask you to
55 | reveal your password, or ever initiate any contact with you asking for
56 | your password reminder words.
57 |
58 | 2. Service
59 |
60 | Some TOR Services require payment of a fee. You must have an Account
61 | and pay the subscription or other fees to participate in these
62 | activities. Information about subscription and other fees for TOR
63 | Services is published in the relevant pages at
64 | http://www.swtor.com/support.
65 |
66 | 3. Privacy
67 |
68 | Your privacy is important to us. Please read the TOR Privacy Policy
69 | carefully for information relating to TOR collection and use of
70 | personal information. You may access the TOR Privacy Policy by
71 | visiting “Privacy Policy” at
72 | http://www.swtor.com/legalnotices/privacypolicy. When you connect to
73 | TOR Service, we may retrieve information from the computer used to log
74 | onto the TOR Service. The information we collect may include
75 | information about the computer's hardware system and any data related
76 | to the computer's operation of the TOR Software or use of TOR
77 | Services. We will not collect any personal information about you,
78 | however, without your knowledge and consent as stated in our Privacy
79 | Policy at http://www.swtor.com/legalnotices/privacypolicy.
80 |
81 | 4. Content
82 |
83 | "Content" on TOR Services may include software, technology, text,
84 | artwork, music, sound, and other audio visual material, and the design
85 | and appearance of our websites. Content may be provided by third
86 | parties, including other users of TOR Services. BioWare and LucasArts
87 | do not pre-screen all Content and does not endorse, approve, or
88 | prescreen any Content that you and other users may contribute to TOR
89 | Services. You bear the entire risk of the completeness, accuracy or
90 | usefulness of Content found on TOR Services. BioWare and LucasArts
91 | reserves the right to remove Content that is objectionable to us for
92 | any reason. The decision to remove Content is in BioWare's and
93 | LucasArts' sole and final discretion. To the maximum extent permitted
94 | by applicable law, BioWare and LucasArts does not assume any
95 | responsibility or liability for Content that is generated by third
96 | parties or for the failure or delay in removing any such Content.
97 |
98 |
104 |
105 | May the force be with you
106 |
107 |
108 | );
109 | }
110 |
--------------------------------------------------------------------------------