Install Expo Go on your smart-phone, configure
developer options on
Android devices, in particular, enable USB debugging, and connect your device
via USB to your machine. Run make up to start services and make shell to
enter shell within running container. There, run make usb to list devices
connected via USB and start Android Debug Bridge server in background. Then,
run yarn run android to open app on Android device. You can view the expo
developer tools in your browser by navigating to
http://${HOST_IP_ADDRESS}:19002. You can print your IP address by running
make ip on your machine.
In case adb does not list the device, debug the issue as detailed in
How do I get my device detected by ADB on Linux?
If we ever should need to make queries, using React Query may be a good idea.
To update packages first run make expo, secondly copy the list of packages
whose versions are not fixed by expo, remove the commata, set PACKAGE_LIST to
the list and run yarn upgrade --latest --caret ${PACKAGE_LIST}.
To update packages within the range specified in package.json, first run
make upgrade and, if after doing so Expo complains about some package
version, run make expo to have Expo choose a compatible version and tell
which packages it does not manage. For the latter packages you may update the
version in package.json, for example to the latest version reported by make outdated, and repeat this process.
Yoga Insights App www.yoga-insights.de
Die Yoga Insights Programme sind Audio-Yoga-Programme für alle, also auch für nicht oder eingeschränkt sehende Menschen. Die App soll den Kundenkreis erweitern und die Programme mobil und barrierefrei zugänglich machen. Wir erstellen die Audiotracks/Hintergrundbilder/ Hintergrundmusik Die App soll:
1.Fertige Sessions abspielen 2. Wahlmöglichkeiten bieten „erstelle eine 20minütige Session zum Thema Rückenstärkung“ (Baukastenprinzip) 3. In App Käufe ermöglichen Problemlos mit Voiceover (Screenreader iOS) bedienbar sein / auch als Android laufen (TalkBack) 4. Einzelne Übungen abspielen können 5. evtl die Wahl einer Hintergrundsmusik zulassen 6. optisch schön, aber schlicht sein (keine Videos/Animationen o.ä.) 7. Die Inhalte sollen Downloadbar sein, um Yoga unabhängig vom Internet zu betreiben Bisher gibt es ein CD 1 : 30min Programm, ein 75min Programm am Stück und eine 20 Minütige Einführung , dazu 4 Musikstücke und 3 akustische Hintergrundszenen (Wald/Meer/Berg)
CD: Weitere Sessions sind in Arbeit. Alle Audiofiles können wir als qualitativ hochwertige MP3s anlegen.
This is the boilerplate that Infinite Red uses as a way to test bleeding-edge changes to our React Native stack.
Currently includes:
- React Native
- React Navigation
- MobX State Tree
- TypeScript
- And more!
The Ignite boilerplate project's structure will look similar to this:
ignite-project
├── app
│ ├── components
│ ├── i18n
│ ├── utils
│ ├── models
│ ├── navigators
│ ├── screens
│ ├── services
│ ├── theme
│ ├── app.tsx
├── storybook
│ ├── views
│ ├── index.ts
│ ├── storybook-registry.ts
│ ├── storybook.ts
│ ├── toggle-storybook.tsx
├── test
│ ├── __snapshots__
│ ├── storyshots.test.ts.snap
│ ├── mock-i18n.ts
│ ├── mock-reactotron.ts
│ ├── setup.ts
│ ├── storyshots.test.ts
├── README.md
├── android
│ ├── app
│ ├── build.gradle
│ ├── gradle
│ ├── gradle.properties
│ ├── gradlew
│ ├── gradlew.bat
│ ├── keystores
│ └── settings.gradle
├── ignite
│ ├── ignite.json
│ └── plugins
├── index.js
├── ios
│ ├── IgniteProject
│ ├── IgniteProject-tvOS
│ ├── IgniteProject-tvOSTests
│ ├── IgniteProject.xcodeproj
│ └── IgniteProjectTests
├── .env
└── package.json
Included in an Ignite boilerplate project is the app directory. This is a directory you would normally have to create when using vanilla React Native.
The inside of the src directory looks similar to the following:
app
│── components
│── i18n
├── models
├── navigators
├── screens
├── services
├── theme
├── utils
└── app.tsx
components
This is where your React components will live. Each component will have a directory containing the .tsx file, along with a story file, and optionally .presets, and .props files for larger components. The app will come with some commonly used components like Button.
i18n
This is where your translations will live if you are using react-native-i18n.
models
This is where your app's models will live. Each model has a directory which will contain the mobx-state-tree model file, test file, and any other supporting files like actions, types, etc.
navigators
This is where your react-navigation navigators will live.
screens
This is where your screen components will live. A screen is a React component which will take up the entire screen and be part of the navigation hierarchy. Each screen will have a directory containing the .tsx file, along with any assets or other helper files.
services Any services that interface with the outside world will live here (think REST APIs, Push Notifications, etc.).
theme Here lives the theme for your application, including spacing, colors, and typography.
utils This is a great place to put miscellaneous helpers and utilities. Things like date helpers, formatters, etc. are often found here. However, it should only be used for things that are truely shared across your application. If a helper or utility is only used by a specific component or model, consider co-locating your helper with that component or model.
app.tsx This is the entry point to your app. This is where you will find the main App component which renders the rest of the application.
The ignite directory stores all things Ignite, including CLI and boilerplate items. Here you will find generators, plugins and examples to help you get started with React Native.
This is where your stories will be registered and where the Storybook configs will live.
This directory will hold your Jest configs and mocks, as well as your storyshots test file. This is a file that contains the snapshots of all your component storybooks.
From the command line in your generated app's root directory, enter yarn run storybook
This starts up the storybook server and opens a story navigator in your browser. With your app
running, choose Toggle Storybook from the developer menu to switch to Storybook; you can then
use the story navigator in your browser to change stories.
For Visual Studio Code users, there is a handy extension that makes it easy to load Storybook use cases into a running emulator via tapping on items in the editor sidebar. Install the React Native Storybook extension by Orta, hit cmd + shift + P and select "Reconnect Storybook to VSCode". Expand the STORYBOOK section in the sidebar to see all use cases for components that have .story.tsx files in their directories.
Read e2e setup instructions.