Skip to content

Commit 6f082d5

Browse files
kyle-ssgkyle-ssg
committed
Initial
0 parents  commit 6f082d5

File tree

86 files changed

+44122
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

86 files changed

+44122
-0
lines changed

‎.gitignore

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# OSX
2+
#
3+
.DS_Store
4+
5+
# Android/IntelliJ
6+
#
7+
.idea
8+
9+
# node.js
10+
#
11+
node_modules/
12+
npm-debug.log
13+
yarn-error.log

‎.npmignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
example/*
2+
.idea/*
3+
.node_modules/*

‎README.md

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
[![Feature Flag, Remote Config and A/B Testing platform, Flagsmith](static-files/hero.png)](https://www.flagsmith.com/)
2+
3+
# react-navigation-focus-render
4+
5+
Screens within a stack or in tabs will still render when any global state(Redux/Context etc) is updated. This component lets you avoid these renders when the screens are inactive.
6+
7+
8+
# Installation
9+
10+
``
11+
npm i react-navigation-focus-render --save
12+
``
13+
14+
# Usage
15+
16+
```
17+
import FocusRender from 'react-navigation-focus-render'
18+
19+
const ExpensiveComponent = () => {
20+
const {count} = useCount(); // something that hooks into changing state
21+
22+
return (
23+
<FocusRender>
24+
... Components
25+
</FocusRender>
26+
)
27+
}
28+
```
29+
30+
# Advanced usage
31+
32+
You may wish to add a wrapper component that displays differently whilst the inactive component hydrates its state when the screen becomes active.
33+
34+
You can specify a Wrapper component that takes isFocused as a property.
35+
36+
```
37+
import FocusRender from 'react-navigation-focus-render'
38+
39+
const Wrapper = ({isFocused, children}) => (
40+
<View style={{opacity: isFocused ? 1 : 0.5}}>{children}</View>
41+
);
42+
43+
const ExpensiveComponent = () => {
44+
const {count} = useCount(); // something that hooks into changing state
45+
46+
return (
47+
<FocusRender Wrapper={Wrapper}>
48+
... Components
49+
</FocusRender>
50+
)
51+
}
52+
```
53+
54+
# Example
55+
56+
You can see the [example project](/example) to see this working.
57+
58+
HomeScreen:
59+
60+
- Contains an expensive component that renders 5000 text elements and is connected to redux state "count"
61+
- You can toggle between rendering the component via FocusRender or just by itself
62+
63+
TabScreen
64+
65+
- Contains a screen with a button that updates state "count"
66+
67+
68+
Given this simple example, the difference in performance when updating state can be measured using [https://github.com/Flagsmith/react-native-performance-monitor](react-native-performance-monitor).
69+
70+
71+
![img.png](img.png)
72+
73+
Of course, this is quite an extreme example but given an active stack of many tabs / screens this could easily add up if you have complex components.
74+
75+
76+

‎example/.buckconfig

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
2+
[android]
3+
target = Google Inc.:Google APIs:23
4+
5+
[maven_repositories]
6+
central = https://repo1.maven.org/maven2

‎example/.bundle/config

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
BUNDLE_PATH: "vendor/bundle"
2+
BUNDLE_FORCE_RUBY_PLATFORM: 1

‎example/.eslintrc.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
root: true,
3+
extends: '@react-native-community',
4+
};

‎example/.flowconfig

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
[ignore]
2+
; We fork some components by platform
3+
.*/*[.]android.js
4+
5+
; Ignore "BUCK" generated dirs
6+
<PROJECT_ROOT>/\.buckd/
7+
8+
; Ignore polyfills
9+
node_modules/react-native/Libraries/polyfills/.*
10+
11+
; Flow doesn't support platforms
12+
.*/Libraries/Utilities/LoadingView.js
13+
14+
[untyped]
15+
.*/node_modules/@react-native-community/cli/.*/.*
16+
17+
[include]
18+
19+
[libs]
20+
node_modules/react-native/interface.js
21+
node_modules/react-native/flow/
22+
23+
[options]
24+
emoji=true
25+
26+
exact_by_default=true
27+
28+
format.bracket_spacing=false
29+
30+
module.file_ext=.js
31+
module.file_ext=.json
32+
module.file_ext=.ios.js
33+
34+
munge_underscores=true
35+
36+
module.name_mapper='^react-native/\(.*\)$' -> '<PROJECT_ROOT>/node_modules/react-native/\1'
37+
module.name_mapper='^@?[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '<PROJECT_ROOT>/node_modules/react-native/Libraries/Image/RelativeImageStub'
38+
39+
suppress_type=$FlowIssue
40+
suppress_type=$FlowFixMe
41+
suppress_type=$FlowFixMeProps
42+
suppress_type=$FlowFixMeState
43+
44+
[lints]
45+
sketchy-null-number=warn
46+
sketchy-null-mixed=warn
47+
sketchy-number=warn
48+
untyped-type-import=warn
49+
nonstrict-import=warn
50+
deprecated-type=warn
51+
unsafe-getters-setters=warn
52+
unnecessary-invariant=warn
53+
signature-verification-failure=warn
54+
55+
[strict]
56+
deprecated-type
57+
nonstrict-import
58+
sketchy-null
59+
unclear-type
60+
unsafe-getters-setters
61+
untyped-import
62+
untyped-type-import
63+
64+
[version]
65+
^0.162.0

‎example/.gitignore

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
# OSX
2+
#
3+
.DS_Store
4+
5+
# Xcode
6+
#
7+
build/
8+
*.pbxuser
9+
!default.pbxuser
10+
*.mode1v3
11+
!default.mode1v3
12+
*.mode2v3
13+
!default.mode2v3
14+
*.perspectivev3
15+
!default.perspectivev3
16+
xcuserdata
17+
*.xccheckout
18+
*.moved-aside
19+
DerivedData
20+
*.hmap
21+
*.ipa
22+
*.xcuserstate
23+
24+
# Android/IntelliJ
25+
#
26+
build/
27+
.idea
28+
.gradle
29+
local.properties
30+
*.iml
31+
*.hprof
32+
33+
# node.js
34+
#
35+
node_modules/
36+
npm-debug.log
37+
yarn-error.log
38+
39+
# BUCK
40+
buck-out/
41+
\.buckd/
42+
*.keystore
43+
!debug.keystore
44+
45+
# fastlane
46+
#
47+
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
48+
# screenshots whenever they are needed.
49+
# For more information about the recommended setup visit:
50+
# https://docs.fastlane.tools/best-practices/source-control/
51+
52+
*/fastlane/report.xml
53+
*/fastlane/Preview.html
54+
*/fastlane/screenshots
55+
56+
# Bundle artifact
57+
*.jsbundle
58+
59+
# CocoaPods
60+
/ios/Pods/

‎example/.prettierrc.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
bracketSpacing: false,
3+
jsxBracketSameLine: true,
4+
singleQuote: true,
5+
trailingComma: 'all',
6+
arrowParens: 'avoid',
7+
};

‎example/.ruby-version

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
2.7.4

‎example/.watchmanconfig

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎example/Gemfile

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
source 'https://rubygems.org'
2+
3+
# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
4+
ruby '2.7.4'
5+
6+
gem 'cocoapods', '~> 1.11', '>= 1.11.2'

‎example/Gemfile.lock

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
GEM
2+
remote: https://rubygems.org/
3+
specs:
4+
CFPropertyList (3.0.5)
5+
rexml
6+
activesupport (6.1.4.4)
7+
concurrent-ruby (~> 1.0, >= 1.0.2)
8+
i18n (>= 1.6, < 2)
9+
minitest (>= 5.1)
10+
tzinfo (~> 2.0)
11+
zeitwerk (~> 2.3)
12+
addressable (2.8.0)
13+
public_suffix (>= 2.0.2, < 5.0)
14+
algoliasearch (1.27.5)
15+
httpclient (~> 2.8, >= 2.8.3)
16+
json (>= 1.5.1)
17+
atomos (0.1.3)
18+
claide (1.1.0)
19+
cocoapods (1.11.2)
20+
addressable (~> 2.8)
21+
claide (>= 1.0.2, < 2.0)
22+
cocoapods-core (= 1.11.2)
23+
cocoapods-deintegrate (>= 1.0.3, < 2.0)
24+
cocoapods-downloader (>= 1.4.0, < 2.0)
25+
cocoapods-plugins (>= 1.0.0, < 2.0)
26+
cocoapods-search (>= 1.0.0, < 2.0)
27+
cocoapods-trunk (>= 1.4.0, < 2.0)
28+
cocoapods-try (>= 1.1.0, < 2.0)
29+
colored2 (~> 3.1)
30+
escape (~> 0.0.4)
31+
fourflusher (>= 2.3.0, < 3.0)
32+
gh_inspector (~> 1.0)
33+
molinillo (~> 0.8.0)
34+
nap (~> 1.0)
35+
ruby-macho (>= 1.0, < 3.0)
36+
xcodeproj (>= 1.21.0, < 2.0)
37+
cocoapods-core (1.11.2)
38+
activesupport (>= 5.0, < 7)
39+
addressable (~> 2.8)
40+
algoliasearch (~> 1.0)
41+
concurrent-ruby (~> 1.1)
42+
fuzzy_match (~> 2.0.4)
43+
nap (~> 1.0)
44+
netrc (~> 0.11)
45+
public_suffix (~> 4.0)
46+
typhoeus (~> 1.0)
47+
cocoapods-deintegrate (1.0.5)
48+
cocoapods-downloader (1.5.1)
49+
cocoapods-plugins (1.0.0)
50+
nap
51+
cocoapods-search (1.0.1)
52+
cocoapods-trunk (1.6.0)
53+
nap (>= 0.8, < 2.0)
54+
netrc (~> 0.11)
55+
cocoapods-try (1.2.0)
56+
colored2 (3.1.2)
57+
concurrent-ruby (1.1.9)
58+
escape (0.0.4)
59+
ethon (0.15.0)
60+
ffi (>= 1.15.0)
61+
ffi (1.15.5)
62+
fourflusher (2.3.1)
63+
fuzzy_match (2.0.4)
64+
gh_inspector (1.1.3)
65+
httpclient (2.8.3)
66+
i18n (1.9.1)
67+
concurrent-ruby (~> 1.0)
68+
json (2.6.1)
69+
minitest (5.15.0)
70+
molinillo (0.8.0)
71+
nanaimo (0.3.0)
72+
nap (1.1.0)
73+
netrc (0.11.0)
74+
public_suffix (4.0.6)
75+
rexml (3.2.5)
76+
ruby-macho (2.5.1)
77+
typhoeus (1.4.0)
78+
ethon (>= 0.9.0)
79+
tzinfo (2.0.4)
80+
concurrent-ruby (~> 1.0)
81+
xcodeproj (1.21.0)
82+
CFPropertyList (>= 2.3.3, < 4.0)
83+
atomos (~> 0.1.3)
84+
claide (>= 1.0.2, < 2.0)
85+
colored2 (~> 3.1)
86+
nanaimo (~> 0.3.0)
87+
rexml (~> 3.2.4)
88+
zeitwerk (2.5.4)
89+
90+
PLATFORMS
91+
ruby
92+
93+
DEPENDENCIES
94+
cocoapods (~> 1.11, >= 1.11.2)
95+
96+
RUBY VERSION
97+
ruby 2.7.4p191
98+
99+
BUNDLED WITH
100+
2.2.27

‎example/__tests__/App-test.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/**
2+
* @format
3+
*/
4+
5+
import 'react-native';
6+
import React from 'react';
7+
import AppNavigator from '../app/components/navigators/AppNavigator';
8+
9+
// Note: test renderer must be required after react-native.
10+
import renderer from 'react-test-renderer';
11+
12+
it('renders correctly', () => {
13+
renderer.create(<AppNavigator />);
14+
});

0 commit comments

Comments
 (0)