NOTE
This project uses Yarn 1. How to set up yarn can be found here
You can:
- add new functionality
- fix bugs
- add / fix tests by following the instructions below.
- Set up your environment
- Linting the code
- i18n internationalization
- AccessibilityID's
- Running tests on a local machine when you are developing your app
- Building the app for the Sauce Labs Real Device Cloud (RDC)x
-
Make sure that you've set up your environment, please check Set Up Your Environment
-
Clone the project to your local machine with
git clone https://github.com/saucelabs/my-demo-app-rn.git
-
Go to the
my-demo-app-rn
-folder and install all dependencies with the commandyarn
NOTE:
When you build the app you might get warnings or errors like thiserror React Native CLI uses autolinking for native dependencies, but the following modules are linked manually: - ...... This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink <dependency>" and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers. Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
Then you have nothing to worry about. This is normal ;-)
-
Open a new terminal to run the metro builder with this command
yarn start
. This will keep track of all JS changes which you make in the app -
Run the app with
yarn android.dev
oryarn ios.dev
to build the app for or Android or iOS
Happy hacking!
The linting rules were taken from the React Native project itself and can be used by running
yarn lint
Issues / warning will be shown in the console and most of them can automatically be fixed by running
yarn lint -- --fix
The linting will also be run on each git push
and fail if there are issues.
This application uses the module
react-native-languages
(click on the link to see
how it works) to provide translations in the app for all text components in the users preferred language.
Currently only English,
Dutch, German and Spanishare enabled, but more languages can be added
When adding text to this app, please add them to the translation-JSON-file that can be found here and add it to the component like this
import React from 'react';
import {Text, View} from 'react-native';
import I18n from '../config/I18n';
const ExampleComponent = () => {
return (
<View>
<Text>{i18n.t('key')}</Text>
</View>
);
};
export default ExampleComponent;
This application uses accessibilityID's which makes it easier to select elements in a cross platform way with Appium.
When adding a new component to the code that can be used to interact with or that displays text needs to be provided
with a testProperties
that will automatically add the accessibilityID to the component.
For example, with a button component the following code needs to be added
<Button title={i18n.t('menu.reset')} {...testProperties(i18n.t('menu.reset'))}/>
Always try to use the text that is already available in the translation-TS-file that can be found here.
Make sure you've set up Appium and all other stuff to be able to run automated tests, see AUTOMATION
Because local automation will be ran against a build connected with the packager/metro builder, adjusting code during test execution is not wise. It will reflect immediately in the app which may cause breaking the tests.
To run all Appium UI tests please run the tests as described here
More information about building the app can be found here