React Native Starter
Search…
Getting Started
Looking for an old documentation? As from now, it lives here: https://flatlogic.gitbook.io/react-native-starter/v/master/
What is React Native Starter?
We love building apps with React Native, because it helps us create high quality products for both major mobile platforms quickly and cost-effectively.
Getting started on a new app just takes too long. Most apps need the same basic building blocks and developer infrastructure, and we are bored of reinventing the wheel time and time again.
This Starter Kit reflects the best practices of React Native development we have discovered while building real-world applications for our customers. It is opinionated about tooling, patterns and development practices. It might not be a one-size-fits-all solution for everyone, but feel free to customize it for your needs, or just take inspiration from it.
What's inside
- Always up-to-date React Native scaffolding
- UI/UX Design from industry experts
- Modular and well-documented structure for application code
- Redux for state management
- React Navigation for simple navigation
- Disk-persisted application state caching
- More than 16 Ready-to-use Pages
Up and running (mac OS)
1. Clone and Install
1
# Clone the repo
2
git clone https://github.com/flatlogic/react-native-starter.git
3
4
# Install dependencies
5
yarn install
6
7
# Install native ios modules
8
cd ios && pod install
Copied!
2. Open RNS in your simulator
Then you can start the project by going to the project's folder and running there:
1
yarn start
2
3
yarn run:ios
Copied!
or, if you want to open it on Android:
1
yarn run:android
Copied!
Local images not rendered on iOS 14 physical device for release build
If you don't see images here is the fix that will help you until React Native package didn't add this on their end. Open node_modules folder and find this file Libraries/Image/RCTUIImageViewAnimated.m
scroll to the line 270 and you'll find this pice of code:
1
- (void)displayLayer:(CALayer *)layer
2
{
3
if (_currentFrame) {
4
layer.contentsScale = self.animatedImageScale;
5
layer.contents = (__bridge id)_currentFrame.CGImage;
6
}
7
}
Copied!
change it to what you see below. Then restart project and clear cache, you may also try to build on different device.
1
- (void)displayLayer:(CALayer *)layer
2
{
3
if (_currentFrame) {
4
layer.contentsScale = self.animatedImageScale;
5
layer.contents = (__bridge id)_currentFrame.CGImage;
6
} else {
7
[super displayLayer:layer];
8
}
9
}
Copied!
Up and running (Windows)
1. Clone and Install
1
# Clone the repo
2
git clone https://github.com/flatlogic/react-native-starter.git
3
4
# Install dependencies
5
yarn install
Copied!
2. Look through official guide
Introduction · React Native
reactnative
3. If project is not running correctly
unable to load script make sure you are either running a metro server ....Go to your
root folder of the project > node_modules > metro-config >src > defaults >blacklist.js.Open said file (VS Code, etc) and on the top you will see a var called SharedBlacklist. Change that var from what it is to what attached code says
1
FROM
2
3
var sharedBlacklist = [
4
/node_modules[/\\]react[/\\]dist[/\\].*/,
5
/website\/node_modules\/.*/,
6
/heapCapture\/bundle\.js/,
7
/.*\/__tests__\/.*/
8
];
9
10
TO
11
12
var sharedBlacklist = [
13
/node_modules[\/\\]react[\/\\]dist[\/\\].*/,
14
/website\/node_modules\/.*/,
15
/heapCapture\/bundle\.js/,
16
/.*\/__tests__\/.*/
17
];
Copied!
That's it! Cool, right?
Build project
You can generate a private signing key using
keytool. On Windows keytool must be run from C:\Program Files\Java\jdkx.x.x_x\bin.1
keytool -genkeypair -v -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
Copied!
Setting up Gradle variables
- 1.Place the
my-upload-key.keystorefile under theandroid/appdirectory in your project folder. - 2.Edit the file
~/.gradle/gradle.propertiesorandroid/gradle.properties, and add the following (replace*****with the correct keystore password, alias and key password),
1
MYAPP_UPLOAD_STORE_FILE=my-upload-key.keystore
2
MYAPP_UPLOAD_KEY_ALIAS=my-key-alias
3
MYAPP_UPLOAD_STORE_PASSWORD=*****
4
MYAPP_UPLOAD_KEY_PASSWORD=*****
Copied!
These are going to be global Gradle variables, which we can later use in our Gradle config to sign our app.
Note about security: If you are not keen on storing your passwords in plaintext, and you are running OSX, you can also store your credentials in the Keychain Access app. Then you can skip the two last rows in
~/.gradle/gradle.properties.Adding signing config to your app's Gradle config
The last configuration step that needs to be done is to setup release builds to be signed using upload key. Edit the file
android/app/build.gradle in your project folder, and add the signing config,1
...
2
android {
3
...
4
defaultConfig { ... }
5
signingConfigs {
6
release {
7
if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
8
storeFile file(MYAPP_UPLOAD_STORE_FILE)
9
storePassword MYAPP_UPLOAD_STORE_PASSWORD
10
keyAlias MYAPP_UPLOAD_KEY_ALIAS
11
keyPassword MYAPP_UPLOAD_KEY_PASSWORD
12
}
13
}
14
}
15
buildTypes {
16
release {
17
...
18
signingConfig signingConfigs.release
19
}
20
}
21
}
22
...
Copied!
Generating the release APK
Run the following in a terminal:
1
$ cd android
2
$ ./gradlew assembleRelease
Copied!
Also don't forget to run after you saved .apk file
1
./gradlew clean
Copied!
Potential issue free vs full v.
If you cloned free version and started it locally, then bought full version and launched it on the same virtual device you may face the issue with set up, it may be caused by the naming collision, please update you virtual device or start brand new VD and run RNS on the new device.
Last modified 1yr ago