diff --git a/.gitignore b/.gitignore index 98645798..46ec6948 100644 --- a/.gitignore +++ b/.gitignore @@ -42,4 +42,4 @@ scripts/doppler_variables.sh .env env.json -.vercel \ No newline at end of file +.vercel diff --git a/.vscode/settings.json b/.vscode/settings.json index 4a67ca0f..e2c76588 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,5 +1,5 @@ { - "cSpell.words": ["icomoon", "notificated", "postsecondary", "Touchables"], + "cSpell.words": ["Binar", "diawi", "icomoon", "mobileprovision", "notificated", "postsecondary", "Touchables"], "todohighlight.keywords": [ { "text": "CONFIG:", diff --git a/README.md b/README.md index 94fadbe3..43e7d9a0 100644 --- a/README.md +++ b/README.md @@ -20,18 +20,18 @@ This is a template to be used with react native and expo. It includes all the ne Check out our [documentation page](https://baca-rn-docs.vercel.app/docs/bootstrap/intro), it contains: -- Bootstraping project - tutorial how to easy setup from scrath +- Bootstrapping project - tutorial how to easy setup from scratch - Deploying app -- Tutorials - - How to manage environment variables - - Use jotai as state management tool +- Tutorials how to: + - manage environment variables + - use jotai as state management tool ## Why to use? We know there are a lot of project starters for react native, but we have some good features: - Fully works with **EXPO GO** - - Good for start the project and later you can switch to expo-dev-client + - Good for start of the project, later you can switch to expo-dev-client - Fully works on **WEB** - If you want to develop apps both on web and mobile this starter is good choice for you - **Code generators** (create new screen / create new component) @@ -54,7 +54,7 @@ It's great for production project, but if you want to just test it, you can foll - `npx create-expo-app --template=@binarapps/expo-ts-template name_of_your_app` - `cd name_of_your_app` -- `yarn bootstrap` - the cli will ask you some questinos about your app (you can fill all this data later) +- `yarn bootstrap` - the cli will ask you some questions about your app (you can fill all this data later) ## What's inside? @@ -118,15 +118,15 @@ It's great for production project, but if you want to just test it, you can foll - write docs (app deployment, app setup and more) - in progress - tutorial on how to use features - navigation - - deeplinking + - deepLinking - auth flows - components - react query - api calls - state management tool -- Add desings (figma) and redesing whole app +- Add designs (figma) and redesign whole app - Updating expo versions (in future) -- Deploy app to appstore and playstore +- Deploy app to App Store and Play Store - Create sample app and document the process of deployment - Improve mock server logic - add commit lint @@ -176,7 +176,7 @@ Environment variables instruction: 1. Create empty file `scripts/doppler_variables.sh` and add this script to new created file. -- run `yarn prepare:env_file` - this will copy template and plase it in `scripts/doppler_variables.sh` +- run `yarn prepare:env_file` - this will copy template and place it in `scripts/doppler_variables.sh` 2. Add correct values to variables (ask one of the developers for that), example: @@ -221,7 +221,7 @@ If you have any feedback, please reach out to me at mateusz.rostkowsky995@gmail. ### Outdated (not maintained anymore) -- https://github.com/kacgrzes/expo-typescript-template (our repo is fork of this one - we keep maintaing this) +- https://github.com/kacgrzes/expo-typescript-template (our repo is fork of this one - we keep maintaining this) - https://github.com/codingki/react-native-expo-template - https://github.com/flatlogic/react-native-starter - https://github.com/mcnamee/react-native-expo-starter-kit diff --git a/docs/docs/bootstrap/BOOTSTRAP_INTRO.md b/docs/docs/bootstrap/BOOTSTRAP_INTRO.mdx similarity index 61% rename from docs/docs/bootstrap/BOOTSTRAP_INTRO.md rename to docs/docs/bootstrap/BOOTSTRAP_INTRO.mdx index 9218ad02..29546e0d 100644 --- a/docs/docs/bootstrap/BOOTSTRAP_INTRO.md +++ b/docs/docs/bootstrap/BOOTSTRAP_INTRO.mdx @@ -10,45 +10,49 @@ tags: description: Bootstrap project structure, that is needed to start development your new project --- +import Details from '@site/src/components/Details' + # BOOTSTRAP - start development 🕐 Bootstrap project structure, that is needed to start development -### **What you need to do to start development?** - -#### 1. Clone this repository +## **What you need to do to start development?** -There are three types that you can clone the repo: +--- -1. Init using this command (beaware that sometimes this template can't be updated on npm, in that case, clone this repository and reinitialize repozitory for yourself - check third type of setup) +### 1. Setup repository ```bash -npx create-expo-app --template=@binarapps/expo-ts-template name_of_your_app +git clone git@github.com:binarapps/baca-react-native-template.git name_of_your_app +cd name_of_your_app ``` -2. Use this as template repo on GitHub - ![Github Repository Template](../../static/img/github-repository-template.png) +> Removing git history **(not recommended)** +> +> - do it only if you don't want to keep history of commits - maybe client doesn't want this +> - when you will get rid of git history it could be hard to apply changes made in the starter file +> +> ```bash +> rm -r .git +> git init +> git commit -m "chore: initialize project" +> ``` -3. Clone repository - - This usage is usefull when you want to keep git history, thanks to this you can sync incomming changes in this template +
+1. Init using this command (be aware that sometimes this template can't be updated on npm, in that case, clone this repository and reinitialize repository for yourself - check third type of setup) ```bash -git clone git@github.com:binarapps/expo-ts-template.git -cd expo-ts-template -yarn -yarn start +npx create-expo-app --template=@binarapps/baca-react-native-template name_of_your_app ``` -- in that case you can also reinitialize repozitory if you don't want to keep history of commits +2. Use this as template repo on GitHub + ![Github Repository Template](../../static/img/github-repository-template.png) -```bash -rm -r .git -git init -git commit -m "chore: initialize project" -``` +
+ +--- -#### 2. Login / register to expo +### 2. Login / register to expo If you have expo account → go login with it @@ -76,7 +80,9 @@ eas login eas whoami ``` -#### 3. Create project on expo.dev +--- + +### 3. Create project on expo.dev a. Sign in to the expo dev console (account created in the first step of repo configuration). @@ -102,24 +108,26 @@ Display name is a name that will be visible in the Expo Dev Console. Slug is the name that will link your Expo application with your code. -![Project create](../../static/img/expo_create.png) +## ![Project create](../../static/img/expo_create.png) -#### 4.Sync project with code. +### 4.Sync project with code. Synchronize the newly created Expo Project to your app. -In app.json file please insert the following: +In `app.json` file please insert the following: -a. **slug name** - created in 1-st point. -b. **owner** - organization picked from the list in 1-st point - - +1. **slug name** - created in 1-st point. +2. **owner** - organization picked from the list in 1-st point ```json { "expo": { "owner": "your_organization_name", - "slug": "example-app-name" + "slug": "your_app_name" } } ``` + +--- + +### 5. Make environment setup - [tutorial](/docs/doppler-config) diff --git a/docs/docs/deploy/DEPLOY_INTRO.md b/docs/docs/deploy/DEPLOY_INTRO.md index fd93fed0..d841faf3 100644 --- a/docs/docs/deploy/DEPLOY_INTRO.md +++ b/docs/docs/deploy/DEPLOY_INTRO.md @@ -141,7 +141,7 @@ description: Intro to app deployment diff --git a/docs/docs/tutorials/BACKEND-CONNECTION.md b/docs/docs/tutorials/BACKEND-CONNECTION.md index 37225c4d..229bf532 100644 --- a/docs/docs/tutorials/BACKEND-CONNECTION.md +++ b/docs/docs/tutorials/BACKEND-CONNECTION.md @@ -16,9 +16,9 @@ description: Backend connection - check how to fetch data from backend and displ This template uses this packages to keep connection with backend: -- (axios)[https://axios-http.com/docs/intro] - direct calls to backend -- (react-query)[https://tanstack.com/query/latest/docs/framework/react/overview] - use hooks that helps displaying data on UI -- (orval)[https://orval.dev/overview] - generating query hooks based on swagger (provided by backend) +- [axios](https://axios-http.com/docs/intro) - direct calls to backend +- [react-query](https://tanstack.com/query/latest/docs/framework/react/overview) - use hooks that helps displaying data on UI +- [orval](https://orval.dev/overview) - generating query hooks based on swagger (provided by backend) ## Generate new query @@ -38,7 +38,7 @@ This template uses this packages to keep connection with backend: - override-header - additionally turning off `no-explicit-any` eslint rule - mutator - where is api instance placed - afterAllFilesWrite - what should happened when the script will run - we are running liter with fix flag -- Orval is very flexible and you can do a lot modifications, please check (their docs)[https://orval.dev/overview] for reference +- Orval is very flexible and you can do a lot modifications, please check [their docs](https://orval.dev/overview) for reference 2. How to do changes to axios instance diff --git a/docs/docs/tutorials/DOPPLER_CONFIG.mdx b/docs/docs/tutorials/DOPPLER_CONFIG.mdx index 46975ec8..e14b5714 100644 --- a/docs/docs/tutorials/DOPPLER_CONFIG.mdx +++ b/docs/docs/tutorials/DOPPLER_CONFIG.mdx @@ -16,7 +16,13 @@ import Details from '@site/src/components/Details' # Doppler configuration 🌈 -Thanks to doppler you will be able to autoamtically mange your environment varialbes. +## Why you need it? + +Thanks to doppler you will be able to automatically mange your environment variables. + +This starter have fully integrated doppler configuration, you just need to do few easy steps + +## Configuration
@@ -63,7 +69,7 @@ a. Enter the projects tab, and select a newly created project b. Each project consist of three predefined environments - dev, stg and prd. \*\* Click each of them to enter environment variable page. -![Select environment](../../static/img/doppler_envirnoments.png) +![Select environment](../../static/img/doppler_environments.png) c. To add a new environment variable click on Add first secret ![Add first secret](../../static/img/doppler_secret_add.png) @@ -82,14 +88,7 @@ g. Make sure that you have consistent data in each environment. In these step, y
-
- -Use gist to go through the implementation of Doppler tool in the app. \*\* -In doppler_variables.sh file, please use generated Access Tokens from the above. - -
- -
+
a. Enter Access tab: @@ -116,19 +115,47 @@ f. To be able to use environment variables for different environments (qa/stagin
+
+ +1. Create empty file `scripts/doppler_variables.sh` and add this script to new created file. + +- run this command (this will copy template and place it in `scripts/doppler_variables.sh`) + +```bash +yarn prepare:env_file +``` + +2. Add correct values to variables (ask one of the developers for that), example: + +```bash +export DOPPLER_TOKEN_DEVELOPMENT=dp.st.alpha.XXXXxxxxXXXXxxxxXXXXxxxx +``` + +
+
In project dir terminal run: ```bash -yarn prepare:(qa/staging/production) +yarn generate:env:(qa/staging/production) ``` Choose the proper app version depending on the environment for which you want to generate env file. -.env file should be generated and consist of variables passed to Doppler, and some extra doppler +`.env` file should be generated and consist of variables passed to Doppler, and some extra doppler variables as DOPPLER_CONFIG. CONGRATULATION !! 🥳🥳 You have configured the Doppler tool for your project! +--- + +Additionally you can start the expo server: + +- this will start server and generate env variables + +```bash + yarn start +``` +
diff --git a/docs/docs/tutorials/ICONS.md b/docs/docs/tutorials/ICONS.md index 6cb871b8..1b1e326f 100644 --- a/docs/docs/tutorials/ICONS.md +++ b/docs/docs/tutorials/ICONS.md @@ -35,8 +35,8 @@ It is added to the app as a font generated by [icomoon app](https://icomoon.io/a 7. Download font - icomoon app 8. Replace old files with downloaded ones - - ./selection.json => assets/icomoon/selection.json - - ./fonts/icomoon.ttf => assets/icomoon/icomoon.ttf + - `./selection.json` => `assets/icomoon/selection.json` + - `./fonts/icomoon.ttf` => `assets/icomoon/icomoon.ttf` 9. Generate new types for icons diff --git a/docs/docs/tutorials/JOTAI.md b/docs/docs/tutorials/JOTAI.md index f0944a73..8b78078c 100644 --- a/docs/docs/tutorials/JOTAI.md +++ b/docs/docs/tutorials/JOTAI.md @@ -13,27 +13,6 @@ description: Doppler - automatically manage environment variables ## Jotai -Jotai is great state management library - after cloning this repository it don't come with any state management tool, so if you want to have a quick start with something you can follow instructions bellow. +This starter comes with jotai state management tool. Please check documentation on how it work in details: -> **Warning**: Only works when git cloning repository (not working for rest methods of cloning repository), so follow the instruction bellow: - -1. Clone repository: - -``` -git clone git@github.com:binarapps/expo-ts-template.git -cd expo-ts-template -yarn -yarn start -``` - -2. Checkout to jotai branch - -``` -git checkout feat/add_jotai_store -``` - -or merge to main - -``` -git merge origin/feat/add_jotai_store -``` +- https://jotai.org/docs/introduction diff --git a/docs/docs/tutorials/NOTIFICATIONS_SETUP.md b/docs/docs/tutorials/NOTIFICATIONS_SETUP.md index db152d7f..12f5e73d 100644 --- a/docs/docs/tutorials/NOTIFICATIONS_SETUP.md +++ b/docs/docs/tutorials/NOTIFICATIONS_SETUP.md @@ -1,6 +1,6 @@ --- id: expo-notifications -slug: /expo-notofications +slug: /expo-notifications title: Expo notifications sidebar_position: 4 tags: @@ -49,11 +49,11 @@ Expo notifications are already preconfigured in this template. However, you stil { "expo": { ..., - "owner": "@binarapps", - "slug": "expo-typescript-template", + "owner": "your_owner_name", + "slug": "your_app_slug", ..., "extra": { - "experienceid": "@binarapps/expo-typescript-template" + "experienceId": "your_owner_name/your_app_slug" } } } diff --git a/docs/package.json b/docs/package.json index 441a9ac2..b3e78fe0 100644 --- a/docs/package.json +++ b/docs/package.json @@ -12,6 +12,7 @@ "serve": "docusaurus serve", "write-translations": "docusaurus write-translations", "write-heading-ids": "docusaurus write-heading-ids", + "deploy:prod": "vercel --prod -y", "typecheck": "tsc" }, "dependencies": { diff --git a/docs/static/img/doppler_envirnoments.png b/docs/static/img/doppler_environments.png similarity index 100% rename from docs/static/img/doppler_envirnoments.png rename to docs/static/img/doppler_environments.png diff --git a/src/components/LandingHeader.tsx b/src/components/LandingHeader.tsx index 0395ed21..f001e4ea 100644 --- a/src/components/LandingHeader.tsx +++ b/src/components/LandingHeader.tsx @@ -8,6 +8,7 @@ import { useRouter } from 'expo-router' import { useAtomValue } from 'jotai' import { Image, StyleSheet, Platform, View } from 'react-native' import { useSafeAreaInsets } from 'react-native-safe-area-context' + export function LandingHeader() { const { colorScheme } = useColorScheme() const { top } = useSafeAreaInsets() @@ -20,6 +21,7 @@ export function LandingHeader() { const navigateToSignUp = useCallback(() => push('/sign-up'), [push]) const height = 60 + top + return ( )} diff --git a/src/screens/LandingScreen.tsx b/src/screens/LandingScreen.tsx index dcfe8b8c..627bbacd 100644 --- a/src/screens/LandingScreen.tsx +++ b/src/screens/LandingScreen.tsx @@ -1,3 +1,4 @@ +import { KeyboardAwareScrollView } from '@baca/components' import { LandingHeader } from '@baca/components/LandingHeader' import { darkLogo, lightLogo } from '@baca/constants' import { useColorScheme } from '@baca/contexts' @@ -24,7 +25,7 @@ export const LandingScreen = () => { }, []) return ( - <> +
{ {t('landing_screen.go_to_blog')}
- + ) }