Skip to content

Commit

Permalink
Upgrade to react-native@0.61-rc.3 (from 0.59.0)
Browse files Browse the repository at this point in the history
Fix #16

Fix #18

Closes #11
  • Loading branch information
brunolemos committed Sep 16, 2019
1 parent 23db949 commit d67d730
Show file tree
Hide file tree
Showing 49 changed files with 5,506 additions and 6,313 deletions.
27 changes: 13 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,31 @@

This is the source code from [this tutorial](https://dev.to/brunolemos/tutorial-100-code-sharing-between-ios-android--web-using-react-native-web-andmonorepo-4pej).

![article-cover](https://user-images.githubusercontent.com/619186/53903807-69870480-4023-11e9-95bc-98caaca01445.jpg)
![article-cover](https://user-images.githubusercontent.com/619186/64933790-1fc27680-d81d-11e9-8077-64a1066b7c17.png)


### How to run

_Requirements: [React Native](https://facebook.github.io/react-native/docs/getting-started.html#native)_
_Requirements: [React Native](https://facebook.github.io/react-native/docs/getting-started.html#native) (last tested on react-native@0.61)_

- `$ git clone git@github.com:brunolemos/react-native-web-monorepo.git`
- `$ cd react-native-web-monorepo`
- `$ yarn`
- `$ cd packages/mobile/ios`
- `$ pod install`
- `$ cd -`
- `$ yarn workspace web start`
- `$ yarn workspace mobile start`
- Run the project
- [iOS] Via Xcode
- `open packages/mobile/ios/myprojectname.xcodeproj` (open the project on Xcode)
- `yarn xcode` (open the project on Xcode)
- Press the Run button
- [Android] Via Android Studio
- `studio ./packages/mobile/android/` (open the project on Android Studio)
- `yarn studio` (open the project on Android Studio)
- Press the Run button
- Via CLI
- _Open a new terminal tab_
- `$ cd packages/mobile`
- `$ npm un -g react-native-cli`
- `$ npm i -g @react-native-community/cli`
- _You may need to launch your device emulator before the next command_
- `$ react-native run-ios` or `react-native run-android`
- `$ yarn android` or `$ yarn ios`

### Author

Expand All @@ -42,14 +41,14 @@ Follow me on Twitter: [@brunolemos](https://twitter.com/brunolemos)<br/>
Check out [DevHub](https://github.com/devhubapp/devhub).
The main difference is that it supports Desktop (Electron) in addition to Web, iOS and Android.

![DevHub Desktop](https://user-images.githubusercontent.com/619186/57279337-28d95500-707f-11e9-9b2b-60c1af41277a.jpg)
![DevHub Desktop](https://user-images.githubusercontent.com/619186/63945240-59d40000-ca49-11e9-98c1-353225f8dcf6.jpg)

![DevHub Menubar](https://github.com/devhubapp/devhub/blob/master/assets/static/menubar-co.jpg)
![DevHub Menubar](https://github.com/devhubapp/devhub/raw/master/landing/static/screenshots/devhub-desktop-menubar-banner.jpg)

<p align="center">
<img alt="DevHub Mobile - Notifications" height="620" src="https://user-images.githubusercontent.com/619186/57279347-2f67cc80-707f-11e9-8457-e892ff1f57c0.png" />
<img alt="DevHub Mobile - Notification Filters" height="620" src="https://user-images.githubusercontent.com/619186/57279348-2f67cc80-707f-11e9-8804-073b5d88a4cd.png" />
<img alt="DevHub Mobile - Events" height="620" src="https://user-images.githubusercontent.com/619186/57279349-30006300-707f-11e9-9edc-283fea7785a4.png" />
<img alt="DevHub Mobile - Notifications" height="620" src="https://github.com/devhubapp/devhub/raw/master/landing/static/screenshots/iphone-notifications-dark.jpg" />
<img alt="DevHub Mobile - Notification Filters" height="620" src="https://github.com/devhubapp/devhub/raw/master/landing/static/screenshots/iphone-notifications-filters-dark.jpg" />
<img alt="DevHub Mobile - Events" height="620" src="https://github.com/devhubapp/devhub/raw/master/landing/static/screenshots/iphone-events-dark.jpg" />
</p>

<br/>
19 changes: 14 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,20 @@
"packages/*"
]
},
"dependencies": {},
"scripts": {
"android": "yarn workspace mobile android",
"compile": "tsc -b --incremental",
"ios": "yarn workspace mobile ios",
"studio": "yarn workspace mobile studio",
"xcode": "yarn workspace mobile xcode"
},
"dependencies": {
"react-native": "0.61.0-rc.3"
},
"devDependencies": {
"@types/react": "16.8.19",
"@types/react-native": "0.57.60",
"concurrently": "4.1.0",
"typescript": "3.5.1"
"@types/react": "16.9.2",
"@types/react-native": "0.60.8",
"concurrently": "4.1.2",
"typescript": "3.6.2"
}
}
129 changes: 90 additions & 39 deletions packages/components/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,44 +1,95 @@
import React from 'react'
import { Platform, StyleSheet, Text, View } from 'react-native'
import React from 'react';
import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
View,
} from 'react-native';

const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
})
import { AppHeader } from './AppHeader'

export interface AppProps {}

export function App(_props: AppProps) {
export function App() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to react-native-web + monorepo!
</Text>
<Text style={styles.instructions}>
This component is being shared between iOS, Android & Web.
</Text>
<Text style={styles.instructions}>{instructions}</Text>
</View>
)
}
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={styles.scrollView}>
<AppHeader />
{global.HermesInternal == null ? null : (
<View style={styles.engine}>
<Text style={styles.footer}>Engine: Hermes</Text>
</View>
)}
<View style={styles.body}>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Code sharing using Monorepo</Text>
<Text style={styles.sectionDescription}>
Edit <Text style={styles.highlight}>packages/components/App.tsx</Text> to change this
screen and then come back to see your edits (in the phone or the browser).
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Web support via react-native-web</Text>
<Text style={styles.sectionDescription}>
Run <Text style={styles.highlight}>yarn workspace web start</Text> to
open this app in the browser.
</Text>
<Text style={styles.sectionDescription}>
It will share the same code from mobile, unless you create platform-specific files
using the <Text style={styles.highlight}>.web.tsx</Text> extension
(also supports <Text style={styles.highlight}>.android</Text>,{' '}
<Text style={styles.highlight}>.ios</Text>,{' '}
<Text style={styles.highlight}>.native</Text>, etc).
</Text>
</View>
</View>
</ScrollView>
</SafeAreaView>
</>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
})
scrollView: {
backgroundColor: 'white',
},
engine: {
position: 'absolute',
right: 0,
},
body: {
backgroundColor: 'white',
},
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
color: 'black',
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
color: 'gray',
},
highlight: {
fontWeight: '700',
},
footer: {
color: 'gray',
fontSize: 12,
fontWeight: '600',
padding: 4,
paddingRight: 12,
textAlign: 'right',
},
});

declare var global: any
5 changes: 5 additions & 0 deletions packages/components/src/AppHeader.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import {
Header as AppHeader
} from 'react-native/Libraries/NewAppScreen';

export { AppHeader }
22 changes: 22 additions & 0 deletions packages/components/src/AppHeader.web.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'

export function AppHeader() {
return <View style={styles.container}>
<Text style={styles.text}>Welcome to React Native Web + Monorepo</Text>
</View>
}

const styles = StyleSheet.create({
container: {
alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: 200,
backgroundColor: '#f3f3f3',
},
text: {
fontSize: 36,
fontWeight: '600',
}
})
6 changes: 5 additions & 1 deletion packages/components/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@
"emitDeclarationOnly": true,
"isolatedModules": false,
"outDir": "dist",
"rootDir": "src"
"rootDir": "src",
"typeRoots": [
"@types",
"../../node_modules/@types"
]
}
}
4 changes: 4 additions & 0 deletions packages/mobile/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
module.exports = {
root: true,
extends: '@react-native-community',
};
78 changes: 42 additions & 36 deletions packages/mobile/.flowconfig
Original file line number Diff line number Diff line change
Expand Up @@ -5,65 +5,71 @@
; Ignore "BUCK" generated dirs
<PROJECT_ROOT>/\.buckd/

; Ignore unexpected extra "@providesModule"
.*/node_modules/.*/node_modules/fbjs/.*
; Ignore polyfills
node_modules/react-native/Libraries/polyfills/.*

; Ignore duplicate module providers
; For RN Apps installed via npm, "Libraries" folder is inside
; "node_modules/react-native" but in the source repo it is in the root
.*/Libraries/react-native/React.js
; These should not be required directly
; require from fbjs/lib instead: require('fbjs/lib/warning')
node_modules/warning/.*

; Ignore polyfills
.*/Libraries/polyfills/.*
; Flow doesn't support platforms
.*/Libraries/Utilities/LoadingView.js

; Ignore metro
.*/node_modules/metro/.*
[untyped]
.*/node_modules/@react-native-community/cli/.*/.*

[include]

[libs]
../../node_modules/react-native/Libraries/react-native/react-native-interface.js
../../node_modules/react-native/flow/
node_modules/react-native/Libraries/react-native/react-native-interface.js
node_modules/react-native/flow/

[options]
emoji=true

esproposal.optional_chaining=enable
esproposal.nullish_coalescing=enable

module.system=haste
module.system.haste.use_name_reducers=true
# get basename
module.system.haste.name_reducers='^.*/\([a-zA-Z0-9$_.-]+\.js\(\.flow\)?\)$' -> '\1'
# strip .js or .js.flow suffix
module.system.haste.name_reducers='^\(.*\)\.js\(\.flow\)?$' -> '\1'
# strip .ios suffix
module.system.haste.name_reducers='^\(.*\)\.ios$' -> '\1'
module.system.haste.name_reducers='^\(.*\)\.android$' -> '\1'
module.system.haste.name_reducers='^\(.*\)\.native$' -> '\1'
module.system.haste.paths.blacklist=.*/__tests__/.*
module.system.haste.paths.blacklist=.*/__mocks__/.*
module.system.haste.paths.blacklist=<PROJECT_ROOT>/../../node_modules/react-native/Libraries/Animated/src/polyfills/.*
module.system.haste.paths.whitelist=<PROJECT_ROOT>/../../node_modules/react-native/Libraries/.*
module.file_ext=.js
module.file_ext=.json
module.file_ext=.ios.js

munge_underscores=true

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\)$' -> 'RelativeImageStub'

module.file_ext=.js
module.file_ext=.jsx
module.file_ext=.json
module.file_ext=.native.js
module.name_mapper='^react-native$' -> '<PROJECT_ROOT>/node_modules/react-native/Libraries/react-native/react-native-implementation'
module.name_mapper='^react-native/\(.*\)$' -> '<PROJECT_ROOT>/node_modules/react-native/\1'
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'

suppress_type=$FlowIssue
suppress_type=$FlowFixMe
suppress_type=$FlowFixMeProps
suppress_type=$FlowFixMeState

suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)?:? #[0-9]+
suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError

[lints]
sketchy-null-number=warn
sketchy-null-mixed=warn
sketchy-number=warn
untyped-type-import=warn
nonstrict-import=warn
deprecated-type=warn
unsafe-getters-setters=warn
inexact-spread=warn
unnecessary-invariant=warn
signature-verification-failure=warn
deprecated-utility=error

[strict]
deprecated-type
nonstrict-import
sketchy-null
unclear-type
unsafe-getters-setters
untyped-import
untyped-type-import

[version]
^0.92.0
^0.105.0
Loading

0 comments on commit d67d730

Please sign in to comment.