Skip to content

Commit 739f9e7

Browse files
radko93radko93
authored
feature: update for React Native 0.64.0 (#193)
* feature: update for RN 0.64.0 closes #192 * doc: update readme
1 parent 7a2c416 commit 739f9e7

27 files changed

+195
-632
lines changed

‎README.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,10 @@ npx react-native init MyApp --template react-native-template-typescript
3131

3232
### Usage with older versions of React Native
3333

34-
#### e.g. `react-native@0.62.x`
34+
#### e.g. `react-native@0.63.x`
3535

3636
```sh
37-
npx react-native init MyApp --template react-native-template-typescript@6.4.*
37+
npx react-native init MyApp --template react-native-template-typescript@6.5.*
3838
```
3939

4040
See the below table to find out which version of the template to use.
@@ -43,6 +43,7 @@ See the below table to find out which version of the template to use.
4343

4444
| React Native | Template |
4545
|--- |--- |
46+
| 0.64 | 6.6.* |
4647
| 0.63 | 6.5.* |
4748
| 0.62 | 6.4.* |
4849
| 0.61 | 6.3.* |

‎template/App.tsx‎

Lines changed: 99 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -8,111 +8,107 @@
88
* @format
99
*/
1010

11-
import React from 'react';
12-
import {
13-
SafeAreaView,
14-
StyleSheet,
15-
ScrollView,
16-
View,
17-
Text,
18-
StatusBar,
19-
} from 'react-native';
11+
import React from 'react';
12+
import type {Node} from 'react';
13+
import {
14+
SafeAreaView,
15+
ScrollView,
16+
StatusBar,
17+
StyleSheet,
18+
Text,
19+
useColorScheme,
20+
View,
21+
} from 'react-native';
2022

21-
import {
22-
Header,
23-
LearnMoreLinks,
24-
Colors,
25-
DebugInstructions,
26-
ReloadInstructions,
27-
} from 'react-native/Libraries/NewAppScreen';
23+
import {
24+
Colors,
25+
DebugInstructions,
26+
Header,
27+
LearnMoreLinks,
28+
ReloadInstructions,
29+
} from 'react-native/Libraries/NewAppScreen';
2830

29-
declare const global: {HermesInternal: null | {}};
31+
const Section = ({children, title}): Node => {
32+
const isDarkMode = useColorScheme() === 'dark';
33+
return (
34+
<View style={styles.sectionContainer}>
35+
<Text
36+
style={[
37+
styles.sectionTitle,
38+
{
39+
color: isDarkMode ? Colors.white : Colors.black,
40+
},
41+
]}>
42+
{title}
43+
</Text>
44+
<Text
45+
style={[
46+
styles.sectionDescription,
47+
{
48+
color: isDarkMode ? Colors.light : Colors.dark,
49+
},
50+
]}>
51+
{children}
52+
</Text>
53+
</View>
54+
);
55+
};
3056

31-
const App = () => {
32-
return (
33-
<>
34-
<StatusBar barStyle="dark-content" />
35-
<SafeAreaView>
36-
<ScrollView
37-
contentInsetAdjustmentBehavior="automatic"
38-
style={styles.scrollView}>
39-
<Header />
40-
{global.HermesInternal == null ? null : (
41-
<View style={styles.engine}>
42-
<Text style={styles.footer}>Engine: Hermes</Text>
43-
</View>
44-
)}
45-
<View style={styles.body}>
46-
<View style={styles.sectionContainer}>
47-
<Text style={styles.sectionTitle}>Step One</Text>
48-
<Text style={styles.sectionDescription}>
49-
Edit <Text style={styles.highlight}>App.tsx</Text> to change this
50-
screen and then come back to see your edits.
51-
</Text>
52-
</View>
53-
<View style={styles.sectionContainer}>
54-
<Text style={styles.sectionTitle}>See Your Changes</Text>
55-
<Text style={styles.sectionDescription}>
56-
<ReloadInstructions />
57-
</Text>
58-
</View>
59-
<View style={styles.sectionContainer}>
60-
<Text style={styles.sectionTitle}>Debug</Text>
61-
<Text style={styles.sectionDescription}>
62-
<DebugInstructions />
63-
</Text>
64-
</View>
65-
<View style={styles.sectionContainer}>
66-
<Text style={styles.sectionTitle}>Learn More</Text>
67-
<Text style={styles.sectionDescription}>
68-
Read the docs to discover what to do next:
69-
</Text>
70-
</View>
71-
<LearnMoreLinks />
72-
</View>
73-
</ScrollView>
74-
</SafeAreaView>
75-
</>
76-
);
77-
};
57+
const App: () => Node = () => {
58+
const isDarkMode = useColorScheme() === 'dark';
7859

79-
const styles = StyleSheet.create({
80-
scrollView: {
81-
backgroundColor: Colors.lighter,
82-
},
83-
engine: {
84-
position: 'absolute',
85-
right: 0,
86-
},
87-
body: {
88-
backgroundColor: Colors.white,
89-
},
90-
sectionContainer: {
91-
marginTop: 32,
92-
paddingHorizontal: 24,
93-
},
94-
sectionTitle: {
95-
fontSize: 24,
96-
fontWeight: '600',
97-
color: Colors.black,
98-
},
99-
sectionDescription: {
100-
marginTop: 8,
101-
fontSize: 18,
102-
fontWeight: '400',
103-
color: Colors.dark,
104-
},
105-
highlight: {
106-
fontWeight: '700',
107-
},
108-
footer: {
109-
color: Colors.dark,
110-
fontSize: 12,
111-
fontWeight: '600',
112-
padding: 4,
113-
paddingRight: 12,
114-
textAlign: 'right',
115-
},
116-
});
60+
const backgroundStyle = {
61+
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
62+
};
11763

118-
export default App;
64+
return (
65+
<SafeAreaView style={backgroundStyle}>
66+
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
67+
<ScrollView
68+
contentInsetAdjustmentBehavior="automatic"
69+
style={backgroundStyle}>
70+
<Header />
71+
<View
72+
style={{
73+
backgroundColor: isDarkMode ? Colors.black : Colors.white,
74+
}}>
75+
<Section title="Step One">
76+
Edit <Text style={styles.highlight}>App.js</Text> to change this
77+
screen and then come back to see your edits.
78+
</Section>
79+
<Section title="See Your Changes">
80+
<ReloadInstructions />
81+
</Section>
82+
<Section title="Debug">
83+
<DebugInstructions />
84+
</Section>
85+
<Section title="Learn More">
86+
Read the docs to discover what to do next:
87+
</Section>
88+
<LearnMoreLinks />
89+
</View>
90+
</ScrollView>
91+
</SafeAreaView>
92+
);
93+
};
94+
95+
const styles = StyleSheet.create({
96+
sectionContainer: {
97+
marginTop: 32,
98+
paddingHorizontal: 24,
99+
},
100+
sectionTitle: {
101+
fontSize: 24,
102+
fontWeight: '600',
103+
},
104+
sectionDescription: {
105+
marginTop: 8,
106+
fontSize: 18,
107+
fontWeight: '400',
108+
},
109+
highlight: {
110+
fontWeight: '700',
111+
},
112+
});
113+
114+
export default App;

‎template/_editorconfig‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Windows files
2+
[*.bat]
3+
end_of_line = crlf

‎template/_gitattributes‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
*.pbxproj -text
1+
# Windows files should use crlf line endings
2+
# https://help.github.com/articles/dealing-with-line-endings/
3+
*.bat text eol=crlf

‎template/_gitignore‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,6 @@ build/
2929
local.properties
3030
*.iml
3131

32-
# Visual Studio Code
33-
#
34-
.vscode/
35-
3632
# node.js
3733
#
3834
node_modules/

‎template/_prettierrc.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@ module.exports = {
33
jsxBracketSameLine: true,
44
singleQuote: true,
55
trailingComma: 'all',
6+
arrowParens: 'avoid',
67
};

‎template/android/app/build.gradle‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,8 @@ def jscFlavor = 'org.webkit:android-jsc:+'
121121
def enableHermes = project.ext.react.get("enableHermes", false);
122122

123123
android {
124+
ndkVersion rootProject.ext.ndkVersion
125+
124126
compileSdkVersion rootProject.ext.compileSdkVersion
125127

126128
compileOptions {
@@ -169,11 +171,12 @@ android {
169171
variant.outputs.each { output ->
170172
// For each separate APK per architecture, set a unique version code as described here:
171173
// https://developer.android.com/studio/build/configure-apk-splits.html
174+
// Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc.
172175
def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
173176
def abi = output.getFilter(OutputFile.ABI)
174177
if (abi != null) { // null for the universal-debug, universal-release variants
175178
output.versionCodeOverride =
176-
versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
179+
defaultConfig.versionCode * 1000 + versionCodes.get(abi)
177180
}
178181

179182
}

‎template/android/app/src/debug/AndroidManifest.xml‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,10 @@
44

55
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
66

7-
<application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
7+
<application
8+
android:usesCleartextTraffic="true"
9+
tools:targetApi="28"
10+
tools:ignore="GoogleAppIndexingWarning">
11+
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
12+
</application>
813
</manifest>

‎template/android/app/src/main/AndroidManifest.xml‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,5 @@
2121
<category android:name="android.intent.category.LAUNCHER" />
2222
</intent-filter>
2323
</activity>
24-
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
2524
</application>
26-
2725
</manifest>

‎template/android/app/src/main/res/values/styles.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<resources>
22

33
<!-- Base application theme. -->
4-
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
4+
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
55
<!-- Customize your theme here. -->
66
<item name="android:textColor">#000000</item>
77
</style>

0 commit comments

Comments
 (0)