Purpose

We often have to be able to switch from an input to another one when pressing the return key of the keyboard. It would be great to use what we have already done to make some utils

DON'T

• contexts
  • AuthProvider.tsx
• service
  • account.ts
  • auth.ts
• screens
  • Profile.tsx
  • Login.tsx

Instead DO

• account
  • ProfileScreen.tsx
  • account.service.ts
• auth
  • AuthProvider.tsx
  • auth.service.ts
  • LoginScreen.tsx

Description

For easier development on the project and to allow to test the application on the store, it will be a good thing to mock the API into the application.

For that we can use Miraje JS https://miragejs.com/quickstarts/react-native/development/

For more consistency with Start UI [web] (and NextJS) can we use yarn dev instead of yarn start to start the development server?

Purpose

When deploying mobile apps to production, we need to have logs in case there's an error for a user. console.log are not enough to see what happens when it comes to mobile apps, this is why we developed a firebase logger that will be open sources soon. The purpose of this issue is to use it in the starter

The scripts/android-bundle.sh and scripts/android-build.sh are both doing this command: react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res

This command is no longer mandatory to be able to bundle or build an android app (see the yellow note here: https://reactnative.dev/docs/signed-apk-android#generating-the-release-aab)

Basically the gradle scripts will handle that for us (through the assembleRelease and bundleRelease tasks)

Description

We need to add the FieldInput in the storybook

BearStudio/formiz#215

Purpose

In every app, we need a loading screen while we're checking if the user is authenticated or not. Let's add this screen

Description

In the storybook, it could be great to have the list of available colors for the app.
However we should just add the main colors and not every single colors from tailwind / NativeBase to prevent developers to use all the colors in the app (for consistency)

Be able to only have to update .env files when we need one-signal support (ios and android lib whould be already available

Things to consider

• Be able to handle in-app routing when touching the notification
• Create a tool to pre-generate ios push certificates ?
• If not, update the doc to show how to do it (a link to one-signal doc should be enough)

Add a datepicker component

• Add iOS variant
• Add Android variant
• Add storybook examples

Purpose

When using ReactNative on a physical device, we need to be connected to the same network than the computer, and succeed to reach the JHipster backend which is always a pain. It could be great to have a helper to troubleshot this (in dev mode only ?)

• Am I on the right network?
• What's the backend URL in the configuration?
• Do I succeed to reach the back?

Description

It can be discussed, but it could be great to have loaders that are using skeletons. However, Skeletons were available in MagnusUI but no more in NativeBase

Description

React Native has been updated to version 0.66. We need to update the project to this version :

Changes to apply :

https://react-native-community.github.io/upgrade-helper/?from=0.65.1&to=0.66.0

Description

Implement an input that makes it easy to fill a phone number

Description

At the moment the app is in French. We need to implement an internationalization system

Add Storybook to Start UI Native

Description

We should integrate Storybook into our Start UI Native project. Storybook will help us build and organize the UI components in isolation, making it easier to develop and test UI components without needing to navigate through the entire app.

Integrating Storybook will enhance our development workflow and provide a visual testbed for our UI components.

Storybook Documentation

Describe the bug
Android: The application crash when we switch to debug mode

To Reproduce

• Install start ui native
• Run start ui native on android
• When the app is started -> Open debug menu and clic on debug
• App will get crashed even if you try to reopen it, it will crash again So we cant see logs

Expected behavior
The app have to work fine on debug mode

Solution
Upgrade the latest version react-native-reanimated

Description

We need to update the project to React Native 0.69

At the moment, we are using Async Storage for storing user's token. The documentation do not recommend to store tokens in AsyncStorage. We need to provide a way to store tokens securely on iOS 🍎 and Android 🤖

https://github.com/DylanVann/react-native-fast-image

Description

I'm not sure if it's a good UX practice, but there are some apps that have a few onboarding screens, that can be swiped to switch from one to the other, or skiped to skip all of them.
Such a component could be great to have

Purpose

It could be great to have a demo app to be able to quickly show how it looks like and all the features inside

Solutions

• We could provide an apk for Android but how to do it for iOS?
• We could try to publish an app on the store (I'm not sure if it would be accepted)

Description

Implement a component that displays a given number of dots with one of them active and the other inactives, to be used in forms with steps or even in onboarding screens

Config used in this repo should follow the same rules defined in https://github.com/BearStudio/start-ui

List of config files to check:

• .eslintrc.js
• .prettierrc.js
• package.json
  • config lint-staged
  • husky scripts

Description:
I wanted to start start-ui native and i follow all the instructions in the readme. I succeeded starting the application but i couldn't connect it the JHIPSTER API.

Objective:
Add How to connect to jhipster section and how to access the network helper so new newcomers won't get confused.

Screenshots

Additional observation
We need to use yarn set:env:local each time we change the environment/local/config.js file but that is not mentioned in the readme. ( What we understand from the readme is that we only need to set the command yarn set:env:local only one time ). Need to specify that information in the readme.

I think something is wrong / missing in the expo PR plugin, because I can't open PR associated app in my Expo android app by scanning the generated QR Code

Description

We need to update the screens layout and style as designed by the designer team : https://www.figma.com/file/3197t2t2OyARyDIlRrwYXf/%F0%9F%9A%80-Start-UI-%5Bfigma%5D?node-id=363%3A1989

Todo

• Update Login Screen
• Update Register Screen
• Update Home Screen
• Update Profile Screen
• Create Update Profile screen
• Create Change Password Screen

Update all files to .ts or .tsx and add types.

Description

It should be good to have a generator for Start UI Native to generate an empty app with pre-filled :

• The given app name
• Android icons
• iOS icons
• Theme colors?
• Some screens in options? (login / register)

Description

We need to update React Native to 0.67.2 version

Description

Native base 3 is very close to ChakraUI which is used on StartUI web and the reason why we choosed Magnus initially
Native base has more available components and now integrates theming, let's use this

We want imports to be sorted like they are in start-ui-web; cf. prettier config: https://github.com/BearStudio/start-ui-web/blob/v2-going-full-stack/.prettierrc.js

Currently they are like this:

import { Formiz, useForm } from '@formiz/core';
import { FieldInput } from '@/components/FieldInput';
import { TextInput } from 'react-native';
import { useRouter } from 'expo-router';
import { useRef } from 'react';
import { Button, Stack } from 'react-native-ficus-ui';
import { focus } from '@/utils/formUtils';
import { isEmail } from '@formiz/validations';
import { useLogin } from '@/modules/auth/auth.service';

We want them something like this:

import { useRef } from 'react';
import { TextInput } from 'react-native';
import { Button, Stack } from 'react-native-ficus-ui';

import { useRouter } from 'expo-router';
import { isEmail } from '@formiz/validations';
import { Formiz, useForm } from '@formiz/core';

import { focus } from '@/utils/formUtils';
import { useLogin } from '@/modules/auth/auth.service';
import { FieldInput } from '@/components/FieldInput';

Description

It should be good to have a maintenance screen into the app in the case there is an issue on the app servers, activable with a custom hook.
Like this, each developer can implement his own logic to activate this maintenance screen display.

Overview

We are currently experiencing an issue in our start-ui-native project where the login page appears twice upon disconnection. This issue is similar to the one reported in expo/router#838. The root cause seems to be linked to our current use of [email protected].

Problem Description

• Current Behavior: On disconnection, the login page is presented twice to the user.
• Expected Behavior: The login page should appear only once upon disconnection.

Proposed Solution

The solution appears to be an upgrade of expo-router to @2.0.4 or later, as this version includes a fix for this issue. However, this upgrade requires a complete update of Expo in our project.

Current package.json Dependencies

{
  "dependencies": {
    "expo": "48.0.19",
    "expo-router": "1.5.3",
    ...
  }
}

When I run the command npx create-start-ui --native start-up-proj, I get this:

✖ An error occured while unziping template.
Maybe this folder already exists: /home/obi/src/react-native/tmp/start-up-proj
If this is the case, try removing it.

Description

Once React Native 0.70 version will come out (reactwg/react-native-releases#26), we'll need to update the project to this version

Description

There's an issue with the splash screen in the Start UI Native. I am creating this issue and will submit a PR to address it.

Problem

During the startup phase, particularly when data is being retrieved from storage, the splash screen remains blank instead of displaying the Start UI logo.

Expected Behavior

The splash screen should properly display the Start UI logo during data retrieval, rather than showing a blank screen.

Steps to Reproduce

1. Open the app.
2. Observe the splash screen during the data retrieval phase.

Purpose

At BearStudio, we created a checklist of items that every React Native project should contain, with standards to prevent having bugs and libraries that are required.
This issue aims at ensuring that this checklist is followed

Purpose

We need to create a UserContext that would store the user authentication context

Solution

Use the one we're used to developed.
Take benefit to add automatic logout when the token expired

Make sur that npx use the latest version to generate a new app.

Current version

npx create-start-ui --native myApp

Fixed version

npx create-start-ui@latest --native myApp

Description

Currently, when I edit the local config and run a yarn set:env:local, it breaks (using Android at least), saying that:

error: Error: Unable to resolve module ../../../environment/config from /home/qlerebours/Projects/StartUI/start-ui-native/src/screens/Dev/About/index.js: 

None of these files exist:
  * src/environment/config(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  * src/environment/config/index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
> 1 | import React from 'react';
  2 | 
  3 | import { useNavigation } from '@react-navigation/core';
  4 | import {]

Then another bug occurs if I change the API_URL in the src/environement/config.js file:
Cannot read property baseUrl of undefined.

Steps to reproduce (the second bug)

• First fill the API_URL with an invalid URL
• Validate it's invalid using the Network helper
• Change the API_URL in the src/environement/config.js to make it valid
• It breaks with the error message mentionned above

Purpose

We know that when the keyboard is opened on a mobile, we can't see the button to submit the form as soon as the form has more than 3 fields. How to help with this ? Maybe use HideWithKeyboard component?

Description

// Instead of doing
import { myFunc } from './myFile';

// We want
import { myFunc } from '@/myFunc';

Some things to know

• Ideally, the import config should detect config files in the current folder. We don't want to be able to manually import config from dev, staging, et...